/* == INHERITED ATOMS (de-inlined static styles; markup depends on these) == */
@media (max-width: 720px){.convo-view-head .rb-s7-1254{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}.convo-view-head > .hstack:first-child > div:has(> .mono:not(.faint)) > .rb-s7-0774{display:none}}
.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}
.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}
#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}
.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-1331{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.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-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-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-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-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-0932{background:color-mix(in srgb,var(--danger) 5%,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-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-0022{background:color-mix(in srgb,var(--primary) 8%,transparent);border:1px solid color-mix(in srgb,var(--primary) 15%,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-0334{background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success)}
.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-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-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-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-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}
.rb-s7-0558{background:linear-gradient(135deg,#f59e0b,#d97706);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-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-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-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-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-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-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-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-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-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-1127{background:var(--danger);border-color:var(--danger)}
.rb-s7-0252{background:var(--danger);font-size:0.6rem}
.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-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-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-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-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-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-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-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-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-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-0949{border-bottom:1px solid var(--border);transition:background .15s}
.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-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-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-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-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-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-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-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-0638{color:var(--color-primary-400)}
.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-0815{color:var(--danger);background:none;border:none;cursor:pointer}
.rb-s7-1330{color:var(--danger);border:1px solid var(--border)}
.rb-s7-0115{color:var(--danger);font-size:0.8rem}
.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-1141{color:var(--destructive)}
.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-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-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-0202{color:var(--muted-foreground,#94a3b8)}
.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-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-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-1155{color:var(--rb-category-header-desc-color,var(--muted-foreground))}
.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-0319{color:var(--success);font-size:0.8rem}
.rb-s7-0772{color:var(--success);font-size:1.1rem}
.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-0373{color:var(--warning);opacity:0.7}
.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-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-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-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-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-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-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-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-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-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-0151{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem}
.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-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-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-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-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-1249{flex:1;background:#141525;color:#94a3b8;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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-1368{font-size:13px;color:var(--text-muted);margin-top:6px}
.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-0922{font-size:14px;min-height:300px;padding:12px;line-height:1.6}
.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-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-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-0952{font-weight:600;font-size:0.95rem}
.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-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-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-0280{gap:8px}
.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-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-1075{height:34px}
.rb-s7-1343{height:36px}
.rb-s7-1103{height:38px}
.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-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-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-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-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-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-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-0261{margin:0 0 1rem;color:var(--text-secondary);font-size:0.875rem}
.rb-s7-0553{margin:0.25rem 0 0;color:var(--text-secondary);font-size:0.875rem}
.rb-s7-0394{margin:0.3rem 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-0521{margin:0;font-size:1.5rem;font-weight:700}
.rb-s7-0492{margin:10px 0 6px;font-weight:700;color:#fbbf24;font-size:1.1em}
.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-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-1377{max-width:560px;margin:60px auto 0}
.rb-s7-0362{max-width:600px}
.rb-s7-0940{max-width:70%}
.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-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-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-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-0457{padding:0.65rem 0.75rem;text-align:center}
.rb-s7-0161{padding:0.65rem 0.75rem;text-align:left}
.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-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-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-0017{padding:1.25rem}
.rb-s7-0920{padding:1.25rem;margin-bottom:1.5rem}
.rb-s7-0415{padding:1.5rem}
.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-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-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-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-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-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-0918{padding:24px;color:#fca5a5}
.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-1125{padding:2rem;text-align:center}
.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-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-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-0962{padding:6px 12px;font-size:11px;color:#94a3b8;border-bottom:1px solid var(--color-border-dark)}
.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-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-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-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-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-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-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-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-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-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-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-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-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-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-0551{width:100%;margin-top:4px;font-size:11px}
.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-0220{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;border-radius:4px}
.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-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-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-0328{width:20px;height:20px;border-radius:var(--rb-avatar-border-radius,9999px);object-fit:cover}
.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-0810{width:24px;height:24px;object-fit:cover;border-radius:var(--rb-border-radius,4px)}
.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}
.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-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-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-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-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-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)}
.trend-row > div.rb-s7-0768{min-width:0}
.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)}
body[data-forum-view="flat"] .fl-sidebar .rb-s7-0921{display:none !important}
@media (max-width: 768px){.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 .rb-s7-0332 .bbcode-btn, .bbcode-toolbar .rb-s7-0332 .rb-s7-0438{display:none !important}.bbcode-status-bar .rb-s7-0694{display:none}}
.rb-s7-0242,.rb-s7-0377,.rb-s7-0532,.rb-s7-0259,.rb-s7-1177,.rb-s7-1197,.rb-s7-0719,.rb-s7-0861{color:var(--primary)!important}
.rb-s7-0213,.rb-s7-0851,.rb-s7-1340{background:color-mix(in srgb,var(--primary) 14%,transparent)!important}
.kx-u1{ padding-right:42px; }
.kx-u2{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); background:none !important; border:0; color:var(--text-faint) !important; cursor:pointer; padding:6px; }
.kx-u3{ display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:11px 14px; border-radius:var(--radius); background:color-mix(in srgb,var(--danger) 12%,transparent) !important; color:var(--danger) !important; font-size:13.5px; font-weight:700; }
.kx-u4{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 !important; }
.kx-u5{ margin-bottom:22px; }
.kx-u6{ z-index:60; }
.kx-u7{ align-items:flex-start; margin:6px 0 18px; }
.kx-u8{ display:flex; align-items:flex-start; gap:8px; color:var(--text-secondary) !important; font-weight:600; font-size:13px; line-height:1.5; }
.kx-u9{ margin-top:2px; flex:none; }
.kx-u10{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.kx-u11{ font-size:22px; font-weight:800; color:var(--text-primary) !important; line-height:1.2; }
.kx-u12{ font-size:13.5px; color:var(--text-secondary) !important; margin-top:4px; }
.kx-u13{ grid-template-columns:1fr; text-transform:none; letter-spacing:0; font-size:13px; }
.kx-u14{ margin-right:7px; }
.kx-u15{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.kx-u16{ display:flex; gap:6px; }
.kx-u17{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.kx-u18{ border:0; background:none !important; }
.kx-u19{ padding:48px 22px; text-align:center; }
.kx-u20{ font-size:2.4rem; color:var(--text-faint) !important; opacity:.4 !important; margin-bottom:12px; }
.kx-u21{ font-size:.95rem; font-weight:700; color:var(--text-secondary) !important; margin-bottom:4px; }
.kx-u22{ font-size:.8rem; color:var(--text-faint) !important; margin-bottom:16px; }
.kx-u23{ position:absolute; }
.kx-u24{ z-index:50; }
.kx-u25{ display:inline-flex; align-items:center; gap:11px; min-width:0; }
.kx-u26{ z-index:60; background:var(--surface) !important; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.kx-u27{ border-top:1px solid var(--border); }
.kx-u28{ color:var(--danger) !important; background:none !important; border:0; cursor:pointer; }
.kx-u29{ width:18px; }
.kx-u30{ font-size:10px; margin-left:2px; opacity:.6 !important; }
.kx-u31{ background:none !important; border:0; cursor:pointer; font:inherit; }
.kx-u32{ padding:48px 22px; }
.kx-u33{ font-size:2.4rem; margin-bottom:12px; opacity:.4 !important; }
.kx-u34{ font-size:.95rem; font-weight:700; margin-bottom:4px; color:var(--text-secondary) !important; }
.kx-u35{ font-size:.8rem; }
.kx-u36{ cursor:pointer; user-select:none; }
.kx-u37{ width:20px; height:20px; border-radius:4px; object-fit:cover; }
.kx-u38{ font-size:12px; color:var(--text-faint) !important; }
.kx-u39{ font-size:12px; font-weight:700; color:var(--text-faint) !important; display:inline-flex; align-items:center; gap:5px; }
.kx-u40{ display:flex; gap:10px; align-items:center; min-width:0; }
.kx-u41{ color:inherit !important; display:block; }
.kx-u42{ color:var(--text-faint) !important; font-weight:600; font-style:italic; }
.kx-u43{ opacity:.55 !important; }
.kx-u44{ opacity:.7 !important; }
.kx-u45{ font-size:11px; color:var(--primary) !important; margin-right:6px; }
.kx-u46{ font-size:11px; color:var(--text-faint) !important; margin-right:6px; }
.kx-u47{ font-size:12px; color:var(--success) !important; margin-right:6px; }
.kx-u48{ font-size:11px; color:var(--info) !important; margin-right:6px; }
.kx-u49{ margin-top:2px; color:var(--text-faint) !important; }
.kx-u50{ margin-top:12px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.kx-u51{ margin-top:12px; display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.kx-u52{ margin-top:12px; width:100%; text-align:left; }
.kx-u53{ width:13px; height:13px; color:#fff !important; }
.kx-u54{ display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:11px 14px; border-radius:var(--radius); background:color-mix(in srgb,var(--success) 12%,transparent) !important; color:var(--success) !important; font-size:13.5px; font-weight:700; }
.kx-u55{ margin:14px 0 10px; }
.kx-u56{ margin:0; font-size:13.5px; color:var(--text-secondary) !important; line-height:1.55; }
.kx-u57{ margin-left:auto; color:var(--text-faint) !important; font-size:12.5px; }
.kx-u58{ color:inherit !important; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.kx-u59{ display:flex; flex-wrap:wrap; gap:7px; }
.kx-u60{ padding:20px 22px; }
.kx-av-0{ background:#f59e0b !important; color:#fff !important; }
.kx-av-1{ background:#ef4444 !important; color:#fff !important; }
.kx-av-2{ background:#ec4899 !important; color:#fff !important; }
.kx-av-3{ background:#a855f7 !important; color:#fff !important; }
.kx-av-4{ background:#ff5722 !important; color:#fff !important; }
.kx-av-5{ background:#3b82f6 !important; color:#fff !important; }
.kx-av-6{ background:#0ea5e9 !important; color:#fff !important; }
.kx-av-7{ background:#06b6d4 !important; color:#fff !important; }
.kx-av-8{ background:#10b981 !important; color:#fff !important; }
.kx-av-9{ background:#84cc16 !important; color:#fff !important; }
.kx-av-10{ background:#eab308 !important; color:#fff !important; }
.kx-av-11{ background:#f97316 !important; color:#fff !important; }
.kx-av-12{ background:#dc2626 !important; color:#fff !important; }
.kx-av-13{ background:#db2777 !important; color:#fff !important; }
.kx-av-14{ background:#9333ea !important; color:#fff !important; }
.kx-av-15{ background:#f24b18 !important; color:#fff !important; }
.rb-s7-0974{ margin-top:14px !important; }
.rb-s7-1062{ background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent) !important; }
.rb-s7-0140{ background: var(--popover, var(--card)) !important; }
.rb-s7-0758{ background:color-mix(in srgb, var(--primary) 15%, transparent) !important; color:var(--primary) !important; }
.rb-s7-0906{ background:color-mix(in srgb, var(--primary) 10%, transparent) !important; color:var(--primary) !important; }
.rb-s7-1026, .rb-s7-1085{ color:var(--primary) !important; }
.rb-s7-0082{ background:color-mix(in srgb, var(--muted-foreground) 10%, transparent) !important; color:var(--muted-foreground) !important; }
.rb-s7-0789{ color:var(--muted-foreground) !important; }
.rb-s7-0141.smilie-picker-pop{ z-index:100010 !important; }

/* ===========================================================================
   ASLITIUM · 01 — foundation: tokens, base type, page shell
   Corporate cobalt. Light is the default; dark rides html[data-theme="dark"].
   Generated brand tokens arrive from style_properties; everything below is the
   design layer that consumes them.
   =========================================================================== */

:root {
  /* brand ramp — the --rb-palette-primary* / --rbc-primary hooks exist ONLY
     when a member saved a Colors tweak (user-tweaks.css defines them last), so
     the literals below stay the shipped design until the member picks a colour
     — and then the whole ramp, masthead included, follows their choice */
  --as-primary-2: var(--rb-palette-primary500, #2E6FD0);
  --as-primary-deep: var(--rb-palette-primary700, #00368A);

  /* masthead */
  --as-mast: var(--rbc-primary, var(--rb-header-bg, #0047AB));
  --as-mast-deep: var(--rb-palette-primary700, #003077);
  --as-mast-bar: var(--rb-palette-primary600, var(--rb-sub-bar-bg, #003A8C));
  --as-mast-text: rgba(255, 255, 255, .78);
  --as-mast-text-active: #ffffff;
  --as-mast-line: rgba(255, 255, 255, .16);
  --as-mast-glow: #9DC0FF;

  /* role + info accents */
  --as-mod: #1E88D8;
  --as-mod-soft: #E3F1FC;
  --as-gold: #B9912F;
  --as-gold-soft: #F9F2DE;
  --as-info-cobalt: var(--rbc-primary, #0047AB);
  --as-info-sky: #1E88D8;
  --as-info-gold: #B9912F;
  --as-online: #2FBE68;

  /* surfaces the token set does not carry */
  --as-surface-3: #FFFFFF;
  --as-divider: #EBEFF5;
  --as-border-soft: #ECF0F6;
  --as-input: #FFFFFF;
  --as-input-border: #D7DEEA;

  /* type + metrics */
  --as-fs-base: 14.5px;
  --as-topbar-h: var(--rb-header-h, 74px);
  --as-navbar-h: 52px;
  --as-gutter: 24px;
  --as-gap: 18px;
  --as-avatar-radius: var(--rb-avatar-border-radius, 10px);
}

html[data-theme="dark"] {
  --as-primary-2: var(--rb-palette-primary500, #6FA4F0);
  --as-primary-deep: var(--rb-palette-primary700, #2B62C2);

  --as-mast-deep: var(--rb-palette-primary700, #072B66);
  --as-mast-text: rgba(255, 255, 255, .72);
  --as-mast-line: rgba(255, 255, 255, .12);

  --as-mod: #54A9EF;
  --as-mod-soft: #12283C;
  --as-gold: #D8B355;
  --as-gold-soft: #2E2612;
  --as-info-cobalt: var(--rbc-primary, #3E82E8);
  --as-info-sky: #54A9EF;
  --as-info-gold: #D8B355;

  --as-surface-3: #232D40;
  --as-divider: #222C40;
  --as-border-soft: #1F2939;
  --as-input: #111825;
  --as-input-border: #2E3A52;
}

/* ── 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: var(--as-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--link-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; }
svg { display: block; }

h1, h2, h3, h4 { color: var(--foreground); }
.mono { font-family: var(--font-mono); 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; }
.rb-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-to-content {
  position: absolute; left: -9999px; top: 0; z-index: 100060;
  background: var(--surface); color: var(--foreground);
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-to-content:focus { left: 0; }

/* Numbers read as data: tabular everywhere they are counted. */
.as-num, .rb-count b, .as-statcard b, .as-fw-row b { font-variant-numeric: tabular-nums; }

/* ── page shell ───────────────────────────────────────────────────────── */
/* Aslitium has no left icon rail; the shell is one centred column plus an
   optional 316px widget aside. */
.rbt-rail, aside.rbt-rail { display: none; }

#main-content,
main#main-content {
  width: 100%;
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 22px var(--as-gutter) 60px;
}

.rbt-content-shell,
.as-shell,
.rbt-content-shell.rb-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rb-sidebar-w, 316px);
  gap: var(--as-gap);
  align-items: start;
}
.rbt-content-shell.kx-shell-left { grid-template-columns: var(--rb-sidebar-w, 316px) minmax(0, 1fr); }
.rbt-content-shell.kx-shell-left .rbt-content { order: 2; }
.rbt-content-shell.kx-shell-left .rbt-widget-sidebar { order: 1; }

.rbt-content { min-width: 0; display: flex; flex-direction: column; gap: var(--as-gap); }
.rbt-widget-sidebar {
  display: flex; flex-direction: column; gap: var(--as-gap);
  min-width: 0;
}

/* ── card primitive ───────────────────────────────────────────────────── */
.as-card,
.rb-forum-table,
.rb-widget-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-sm, 8px);
  font: 800 13.5px/1 var(--font-sans);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  color: var(--primary-foreground, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 14px rgba(0, 71, 171, .22);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--primary), var(--as-primary-deep)); color: var(--primary-foreground, #fff); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-soft:hover { color: var(--primary); }
.btn-ghost, .btn-secondary {
  background: var(--surface); border-color: var(--border); color: var(--muted-foreground);
}
.btn-ghost:hover, .btn-secondary:hover { color: var(--foreground); border-color: var(--border-strong); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-danger { background: var(--danger); color: #fff; }

html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .btn-primary:hover { background: linear-gradient(180deg, var(--as-primary-2), var(--primary)); }

/* ── username role colours ────────────────────────────────────────────── */
.rb-username, .rb-ulink { font-weight: 700; }
.username--banned { text-decoration: line-through; opacity: .7; }

/* ── responsive shell ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  #main-content, main#main-content { padding: 16px 14px 48px; }
  .rbt-content-shell,
  .rbt-content-shell.rb-with-sidebar,
  .rbt-content-shell.kx-shell-left { grid-template-columns: minmax(0, 1fr); }
  .rbt-content-shell.kx-shell-left .rbt-content,
  .rbt-content-shell.kx-shell-left .rbt-widget-sidebar { order: 0; }
}


/* ===========================================================================
   ASLITIUM · 02 — masthead: cobalt topbar (74px) + cobalt navbar (52px)
   =========================================================================== */

.rb-header {
  background: var(--as-mast-deep);
  color: #fff;
  position: relative;
  z-index: 50;
}
.rb-header.sticky { position: sticky; top: 0; }

.rb-header-inner {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 0 var(--as-gutter);
  height: var(--as-topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* hamburger — phones only */
.rb-hamburger {
  display: none;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  place-items: center;
}
.rb-hamburger:hover { background: rgba(255, 255, 255, .18); }
.rb-hamburger svg { width: 18px; height: 18px; }

/* logo */
.rb-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rb-logo-link { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rb-logo-mark {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--as-avatar-radius, 10px);
  background: #fff; color: var(--as-mast);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 10, 30, .25);
}
.as-logo-mark {
  font: 700 21px/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: -.5px;
  padding-bottom: 2px;
}
.rb-logo-word {
  font-size: 20.5px; font-weight: 800; letter-spacing: .6px; color: #fff;
  display: flex; flex-direction: column; line-height: 1.05; min-width: 0;
}
.rb-logo-sub {
  font: 600 9.5px/1.2 var(--font-sans, system-ui, sans-serif);
  font-style: italic;
  letter-spacing: 1.4px;
  color: var(--as-mast-glow);
  margin-top: 3px;
  text-transform: uppercase;
}
.rb-logo-img { height: var(--logo-h, 34px); width: auto; }
html[data-theme="light"] .logo-dark { display: none; }
html[data-theme="dark"] .logo-light { display: none; }

/* apps grid */
.rb-apps { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm, 8px); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); cursor: pointer; flex: 0 0 34px; }
.rb-apps:hover { background: rgba(255, 255, 255, .16); }
.rb-apps-grid { display: grid; grid-template-columns: repeat(3, 3px); gap: 3px; }
.rb-apps-grid i { width: 3px; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .85); display: block; }
.rb-apps-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
  display: none;
}
.rb-apps-menu.is-open { display: block; }
.rb-apps-nav { display: flex; flex-direction: column; }
.rb-apps-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  font-size: 13.5px; font-weight: 600; color: var(--foreground);
}
.rb-apps-nav a:hover { background: var(--muted); color: var(--primary); }
.rb-apps-nav i { width: 16px; text-align: center; color: var(--text-faint); }

/* search */
.rb-search {
  flex: 1 1 auto; max-width: 470px; margin-inline: auto;
  height: 42px; border-radius: 11px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 2px 4px rgba(0, 14, 40, .22), 0 1px 0 rgba(255, 255, 255, .10);
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 14px;
  min-width: 0;
  transition: background .15s, border-color .15s;
}
.rb-search:hover, .rb-search:focus-within { background: rgba(255, 255, 255, .21); border-color: rgba(255, 255, 255, .4); }
.rb-search > svg { width: 16px; height: 16px; flex: 0 0 16px; color: rgba(255, 255, 255, .66); }
.rb-search input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: none;
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.rb-search input::placeholder { color: rgba(255, 255, 255, .72); font-weight: 500; }
.as-kbd {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 7px; background: rgba(2, 18, 48, .38);
  border: 1px solid rgba(255, 255, 255, .18);
  font: 700 10.5px/1 var(--font-mono); letter-spacing: .6px;
  color: rgba(255, 255, 255, .75);
  flex: 0 0 auto;
}

/* header actions */
.rb-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.rb-icon-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: grid; place-items: center;
}
.rb-icon-btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.rb-icon-btn svg { width: 17px; height: 17px; }
.rb-badge-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 99px;
  background: var(--danger); color: #fff;
  font: 800 10px/1 var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--as-mast-deep);
}

/* guest auth buttons */
.rb-header-actions .rb-nav-link {
  height: 38px; padding: 0 15px; border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.rb-header-actions .rb-nav-link:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.rb-header-actions .btn-primary {
  height: 38px; padding: 0 15px;
  background: #fff; color: var(--as-mast); border-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 10, 30, .18);
}
.rb-header-actions .btn-primary:hover { background: var(--primary-soft); color: var(--as-mast-deep); }

/* logged-in identity chip */
.rb-user { display: flex; align-items: center; gap: 9px; padding: 3px 6px 3px 3px; border-radius: 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; }
.rb-user:hover { background: rgba(255, 255, 255, .16); }
.rb-user .rb-avatar, .rb-user img { width: 30px; height: 30px; border-radius: var(--as-avatar-radius, 10px); }
.rb-user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.rb-user-meta small { font-size: 10.5px; color: rgba(255, 255, 255, .7); }
.rb-user-meta b { font-size: 13px; font-weight: 800; color: #fff; }
.rb-user-meta b a, .rb-user-meta b .rb-username { color: #fff; }

/* ── navbar (second cobalt bar) ───────────────────────────────────────── */
.rb-nav {
  background: var(--as-mast-bar);
  border-top: 1px solid var(--as-mast-line);
  position: relative;
  z-index: 45;
}
.rb-nav-inner {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 0 var(--as-gutter);
  height: var(--as-navbar-h);
  display: flex; align-items: stretch; gap: 2px;
}
/* no overflow clip here — the bar is only 52px tall and an auto overflow
   swallows every dropdown panel that opens below it (the "click does nothing"
   bug). Below 961px the whole bar is hidden behind the hamburger anyway. */
.rb-nav-list { display: flex; align-items: stretch; gap: 2px; min-width: 0; }

.rb-nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 15px; white-space: nowrap;
  font-size: 14px; font-weight: 700;
  color: var(--as-mast-text);
}
.rb-nav-item:hover { color: var(--as-mast-text-active); }
.rb-nav-item.is-active { color: var(--as-mast-text-active); }
.rb-nav-item.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--as-mast-glow);
}
.rb-nav-item i { font-size: 13px; opacity: .85; }
.kx-u30 { font-size: 11px; opacity: .7; }

.rb-nav-dd { display: flex; }
.rb-nav-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 120;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
}
.rb-nav-dd-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  font-size: 13.5px; font-weight: 600; color: var(--foreground);
}
.rb-nav-dd-link:hover { background: var(--muted); color: var(--primary); }
.rb-nav-dd-link i { width: 16px; text-align: center; color: var(--text-faint); }

.rb-nav-right { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* square translucent tool buttons */
.rb-nav-right .rb-nav-link,
.rb-nav-right .rb-tw-trigger {
  height: 32px; padding: 0 11px; border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
}
.rb-nav-right .rb-nav-link:hover,
.rb-nav-right .rb-tw-trigger:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.rb-theme-toggle { display: inline-flex; gap: 4px; }
.rb-theme-toggle button {
  width: 32px; height: 32px; border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  display: grid; place-items: center;
}
.rb-theme-toggle button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.rb-theme-toggle button svg { width: 16px; height: 16px; }
/* the active mode is the one you are NOT offered */
html[data-theme="light"] .rb-theme-toggle .t-sun,
html[data-theme="dark"] .rb-theme-toggle .t-moon { display: none; }

/* ── user menu (inherited kx-usermenu markup, Aslitium skin) ──────────── */
.kx-usermenu {
  width: 320px; z-index: 130;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
}
.kx-um-banner {
  position: relative;
  padding: 16px;
  background: linear-gradient(120deg, var(--as-mast-deep), var(--as-mast));
  color: #fff;
}
.kx-um-logout { position: absolute; top: 10px; right: 10px; }
.kx-um-logout button {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; display: grid; place-items: center; font-size: 12px;
}
.kx-um-logout button:hover { background: rgba(255, 255, 255, .25); }
.kx-um-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kx-um-ava img, .kx-um-ava .rb-avatar { width: 52px; height: 52px; border-radius: var(--as-avatar-radius, 10px); }
.kx-um-idtext { min-width: 0; }
.kx-um-name { font-size: 15px; font-weight: 800; color: #fff; display: block; }
.kx-um-name .rb-username { color: #fff; }
.kx-um-role { font-size: 12px; color: rgba(255, 255, 255, .78); margin-top: 1px; }
.kx-um-lastvisit { font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
.kx-um-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; border-bottom: 1px solid var(--as-divider); }
.kx-um-tab {
  text-align: center; padding: 8px 6px; border-radius: var(--radius-sm, 8px);
  font-size: 12.5px; font-weight: 700; color: var(--muted-foreground); background: var(--surface-2);
}
.kx-um-tab:hover { color: var(--primary); background: var(--primary-soft); }
.kx-um-list { padding: 6px; display: flex; flex-direction: column; }
.kx-um-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  font-size: 13.5px; font-weight: 600; color: var(--foreground);
}
.kx-um-item:hover { background: var(--muted); color: var(--primary); }
.kx-um-item i { width: 16px; text-align: center; color: var(--text-faint); }
.kx-um-item:hover i { color: var(--primary); }
.kx-um-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-top: 1px solid var(--as-divider); }
.kx-um-act {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm, 8px);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--muted-foreground);
}
.kx-um-act b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.kx-um-act:hover { border-color: var(--border-strong); color: var(--foreground); }
.kx-um-act--primary { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.kx-um-act--primary b { color: var(--primary); }

/* ── dropdown panels (conversations / notifications) ──────────────────── */
.rb-dropdown-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
  z-index: 130;
}
.rb-dropdown-panel .border-b, .rb-dropdown-panel .border-t, .kx-bdc { border-color: var(--as-divider); }
.kx-cfg { color: var(--foreground); }
.kx-cmut { color: var(--muted-foreground); }
.kx-cpri { color: var(--primary); }
.kx-ci { color: inherit; }
.rb-conv-row { display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--as-divider); }
.rb-conv-row:last-child { border-bottom: none; }
.rb-conv-row:hover { background: var(--surface-2); }
.rb-conv-row__avatar img, .rb-conv-row__avatar-letter {
  width: 34px; height: 34px; border-radius: var(--as-avatar-radius, 10px);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
}
.rb-conv-row__body { min-width: 0; flex: 1; }
.rb-conv-row__head { display: flex; justify-content: space-between; gap: 8px; }
.rb-conv-row__title { font-size: 13.5px; font-weight: 700; color: var(--foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-conv-row__time { font-size: 11.5px; color: var(--text-faint); flex: 0 0 auto; }
.rb-conv-row__sub { font-size: 12px; color: var(--text-faint); }
.rb-conv-row__pip { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); align-self: center; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .rb-header-inner { padding: 0 14px; gap: 10px; height: 62px; }
  .rb-hamburger { display: grid; }
  .rb-apps, .as-launcher { display: none; }
  .rb-logo-word { font-size: 17px; }
  .rb-logo-sub { display: none; }
  .rb-search { max-width: none; margin: 0 0 0 auto; flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  .rb-search input, .as-kbd { display: none; }
  .rb-nav { display: none; }
  .rb-header-actions .rb-nav-link span,
  .rb-header-actions .btn-primary span { display: none; }
  .rb-user-meta { display: none; }
  .kx-usermenu { width: min(320px, calc(100vw - 28px)); }
}

/* The core bundle hides the wordmark under 480px; Aslitium keeps the board name
   beside the mark on phones, so this matches that query and that specificity. */
@media (max-width: 480px) {
  header .rb-logo-word { display: flex; font-size: 15px; letter-spacing: .3px; }
  header .rb-logo-word .rb-logo-sub { display: none; }
  .rb-logo, .rb-logo-link { min-width: 0; }
  .rb-logo-word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rb-header-inner { gap: 8px; }
}


/* ===========================================================================
   ASLITIUM · 03 — stat strip + deep-navy corporate footer
   =========================================================================== */

/* ── stat strip (sits on the page ground, above the footer) ───────────── */
.as-statstrip {
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 0 var(--as-gutter) 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.as-statcard {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.as-statcard__body { display: flex; flex-direction: column; min-width: 0; }
.as-statcard__body b {
  font-size: 20px; font-weight: 800; color: var(--primary); line-height: 1.15;
}
.as-statcard__body small { font-size: 12px; font-weight: 700; color: var(--muted-foreground); }
/* the "newest member" tile shows a name, not a count — smaller, truncating */
.as-statcard--name .as-statcard__body b,
.as-statcard__latest {
  font-size: 16px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.as-statcard__ic {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: var(--radius, 10px);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
}
.as-statcard__ic svg { width: 20px; height: 20px; }

/* ── footer ───────────────────────────────────────────────────────────── */
.rb-footer.as-footer {
  margin-top: 8px;
  background: var(--rb-footer-bg);
  color: var(--rb-footer-text-color);
}

.as-footwidgets {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 34px var(--as-gutter) 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--as-gap);
  align-items: start;
}
.as-fw {
  padding: 20px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-lg, 12px);
  min-width: 0;
}
.as-fw h4 {
  margin: 0 0 14px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff;
}
.as-fw h4::after {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--as-primary-2), var(--as-mod));
}
.as-fw p { margin: 0; font-size: 13px; line-height: 1.65; color: inherit; }

.as-fw-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-size: 13px;
}
.as-fw-row:last-child { border-bottom: none; }
.as-fw-row b { color: #fff; font-weight: 800; }

.as-fw-link {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0;
  font-size: 13px; font-weight: 700;
  color: var(--rb-footer-link-color);
}
.as-fw-link:hover { color: #fff; }
.as-fw-link__ic {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  display: grid; place-items: center;
  color: var(--as-mast-glow);
}
.as-fw-link__ic svg { width: 12px; height: 12px; }

/* footbar */
.rb-footer-inner.as-footbar {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 13px var(--as-gutter);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.as-footer .as-footbar { border-top: 1px solid rgba(255, 255, 255, .07); }
.as-footbar__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; font-weight: 700; }
.as-footbar__links a { color: var(--rb-footer-link-color); }
.as-footbar__links a:hover { color: #fff; }
.as-footbar__controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.rb-footer-theme {
  display: inline-flex; gap: 3px; padding: 3px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm, 8px);
}
.rb-footer-theme button {
  width: 28px; height: 28px; border-radius: 6px;
  color: rgba(255, 255, 255, .7); display: grid; place-items: center; font-size: 12px;
}
.rb-footer-theme button:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.rb-footer-select {
  height: 32px; padding: 0 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm, 8px);
  color: #fff; font-size: 12.5px; font-weight: 600;
}
.rb-footer-select option { color: var(--foreground); background: var(--surface); }

/* copyright */
.as-copy { background: rgba(0, 0, 0, .3); }
.as-copy__in {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding: 12px var(--as-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; color: rgba(255, 255, 255, .55);
}
.as-copy__theme b {
  font-family: var(--font-sans, system-ui, sans-serif); font-style: italic; font-weight: 600;
  color: var(--as-mast-glow);
}

@media (max-width: 960px) {
  .as-statstrip { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 20px; }
  .as-footwidgets { grid-template-columns: 1fr; gap: 12px; padding: 24px 14px 18px; }
  .rb-footer-inner.as-footbar { padding: 12px 14px; gap: 10px 14px; }
  .as-footbar__controls { margin-left: 0; width: 100%; }
  .as-copy__in { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
}


/* ===========================================================================
   ASLITIUM · 04 — forum home
   Guest welcome hero, featured rail, category eyebrows that sit outside the
   card, and node rows built as a five-column grid
   (icon | title/desc/chips | THREADS | MESSAGES | last post).
   Templates: forum/index, macros/layout/forum_node_row,
              macros/layout/welcome_banner, macros/layout/featured_content.
   =========================================================================== */

/* ── home content stack ─────────────────────────────────────────────────── */
.rb-kx-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

/* The design carries no column-header strip: every count prints its own
   caption, so the bare label row is dropped wherever it renders. forum/show's
   sub-forum band reuses the class WITH the as-childforums__head modifier and
   keeps its heading. */
.rb-forum-head:not(.as-childforums__head) { display: none; }

/* mark-all-read — the mockup's page-title card action, pulled to the right */
.rb-markread-row {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  min-width: 0;
}
.rb-markread-row .btn {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
  min-height: 36px;
}
.rb-markread-row .btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.rb-markread-row .btn i {
  margin-right: 6px;
  font-size: 12px;
}

/* ── guest welcome hero ─────────────────────────────────────────────────── */
/* .rb-s7-1238 is the inherited banner atom; it ships a two-tone gradient that
   is not part of this design, so the card treatment is restated here. */
.rb-s7-1238 {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 20px 26px;
  margin-bottom: var(--as-gap);
  overflow: hidden;
}
.rb-s7-1238::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--as-mod));
}

.rb-wb {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.rb-wb-main { flex: 1 1 auto; min-width: 0; }

.rb-wb-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rb-wb-badge {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius, 10px);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.rb-wb-title {
  margin: 0;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: var(--foreground);
}
.rb-wb-desc {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.rb-wb-latest {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--as-divider);
}
.rb-wb-latest-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.rb-wb-latest-label i {
  color: var(--primary);
  font-size: 12px;
}
.rb-wb-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.rb-wb-mem {
  display: block;
  line-height: 0;
}
.rb-wb-mem-img,
.rb-wb-mem-letter,
.rb-wb-mem-more {
  width: 34px;
  height: 34px;
  border-radius: var(--as-avatar-radius, 10px);
  border: 1px solid var(--border);
}
.rb-wb-mem-img { object-fit: cover; }
.rb-wb-mem-letter,
.rb-wb-mem-more {
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
}
.rb-wb-mem-more {
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 11.5px;
}
.rb-wb-mem-more:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.rb-wb-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-wb-actions .btn {
  min-width: 152px;
  min-height: 38px;
}

/* ── featured content rail ──────────────────────────────────────────────── */
.rb-fc { min-width: 0; position: relative; }

.rb-fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* room for the arrow pair parked at the end of this row */
  padding-inline-end: 66px;
  min-height: 30px;
  margin: 0 2px 9px;
}
.rb-fc-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.rb-fc-star {
  color: var(--as-gold);
  font-size: 12px;
}

.rb-fc-wrap {
  position: relative;
  min-width: 0;
  /* core reserves 46px on both sides for the arrows, which pushes the rail out
     of line with every other block in the column (obvious in the discuss
     layout, where the thread rows sit flush against the panel edge). Aslitium
     floats the arrows over the rail instead, so the cards start where the
     content column starts. */
  padding-inline: 0;
}
.rb-fc-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 3px;
  margin: -3px;
}
.rb-fc-track::-webkit-scrollbar { display: none; }

.rb-fc-card {
  position: relative;
  /* three across, sharing the 14px gaps — a fixed card width left a sliver of
     the fourth card hanging over the edge at most column widths */
  flex: 0 0 calc((100% - 28px) / 3);
  max-width: none;
  min-height: 158px;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.rb-fc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.rb-fc-card:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.rb-fc-card__body {
  width: 100%;
  min-width: 0;
  padding: 14px 15px;
}
.rb-fc-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.rb-fc-card__title {
  margin: 9px 0 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rb-fc-card__desc {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rb-fc-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
  min-width: 0;
}
.rb-fc-card__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
}
.rb-fc-card__avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  object-fit: cover;
}
.rb-fc-card__avatar--letter {
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
}
.rb-fc-card__author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-fc-card__stats {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rb-fc-card__stats i { margin-right: 4px; }

/* image cards ride the dark scrim the template paints into background-image */
.rb-fc-card--img { min-height: 176px; }
.rb-fc-card--img .rb-fc-card__title,
.rb-fc-card--img .rb-fc-card__author,
.rb-fc-card--img .rb-fc-card__stats { color: var(--primary-foreground); }
.rb-fc-card--img .rb-fc-card__desc {
  color: var(--primary-foreground);
  opacity: .82;
}
.rb-fc-card--img .rb-fc-card__tag,
.rb-fc-card--img .rb-fc-card__avatar--letter {
  background: var(--primary);
  color: var(--primary-foreground);
}

/* the arrows ride in the section header, not over the cards — floating them
   on the rail buried the first card's title */
.rb-fc-nav {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.rb-fc-nav:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}
.rb-fc-prev { left: auto; right: 34px; }
.rb-fc-next { right: 0; }

/* the rail is a container (core sets container-type on .rb-fc), so the card
   count follows the COLUMN width — the discuss layout gives it ~250px less */
@container (max-width: 720px) {
  .rb-fc-card { flex-basis: calc((100% - 14px) / 2); }
}
@container (max-width: 460px) {
  .rb-fc-card { flex-basis: 100%; }
  .rb-fc-nav { display: none; }
}

/* ── category: eyebrow outside, card body inside ────────────────────────── */
.rb-forum-table {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
/* on the board index the wrapper is a bare stack — the card is per category */
.rb-kx-content > .rb-forum-table {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rb-category { min-width: 0; }

.rb-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 24px;
  margin: 0 0 10px 2px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--foreground);
}
.rb-category-header:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 4px;
  border-radius: 4px;
}
/* the node icon plays the mockup's cobalt square bullet */
.rb-category-header > i {
  order: 1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--primary);
  color: var(--primary-foreground);
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.rb-category-header > img,
.rb-category-header .kx-u37 {
  order: 1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.rb-category-header > a {
  order: 2;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-category-header > a:hover { color: var(--primary); }
.rb-category-header .desc {
  order: 3;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-category-header::after {
  content: "";
  order: 4;
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.rb-category-header .rb-chevron {
  order: 5;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  transition: transform .18s ease, color .15s ease;
}
.rb-category-header .rb-chevron svg { width: 15px; height: 15px; }
.rb-category-header:hover .rb-chevron { color: var(--primary); }
.rb-category.is-collapsed .rb-chevron { transform: rotate(180deg); }
.rb-category.is-collapsed .rb-cat-body { display: none; }

.rb-cat-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

/* ── forum node row ─────────────────────────────────────────────────────── */
/* DOM order is icon · main · last post · counts; the counts box is dissolved
   with display:contents and `order` restores the designed column sequence. */
.rb-forum-node {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 88px 88px 300px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  min-width: 0;
  border-bottom: 1px solid var(--as-divider);
  transition: background-color .14s ease;
}
.rb-forum-node:hover { background: var(--surface-2); }
.rb-cat-body > .rb-forum-node:last-child { border-bottom: 0; }

/* forums parked directly under the board root carry their own card */
.rb-forum-table > .rb-forum-node {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.rb-forum-table > .rb-forum-node:hover { background: var(--surface-2); }

.rb-node-icon {
  order: 1;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius, 10px);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 19px;
}
.rb-node-icon svg { width: 21px; height: 21px; }
.rb-node-icon img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }

.rb-node-main {
  order: 2;
  min-width: 0;
}
.rb-node-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
}
.rb-node-title > a {
  min-width: 0;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-node-title > a:hover { color: var(--link-color, var(--primary)); }
.rb-node-desc {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rb-subforums {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  min-width: 0;
}
.rb-subforums-label { flex: 0 0 auto; }
.rb-subforums-label i { color: var(--text-faint); }
.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}
.rb-chip:hover {
  background: var(--primary-soft);
  border-color: var(--as-input-border);
  color: var(--link-color, var(--primary));
}
.rb-chip svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--text-faint); }
.rb-chip i { font-size: 11px; color: var(--text-faint); }
.rb-chip .rb-chip-ico-img {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  object-fit: cover;
  flex: 0 0 auto;
}

/* counts — two centred columns lifted out of their wrapper */
.rb-counts { display: contents; }
.rb-count {
  order: 3;
  min-width: 0;
  text-align: center;
}
.rb-count b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-count small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-count-dot { display: none; }

/* ── last post column ───────────────────────────────────────────────────── */
.rb-lastpost {
  order: 4;
  min-width: 0;
}
.rb-lastpost .rb-lp-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--as-avatar-radius, 10px);
  object-fit: cover;
  flex: 0 0 auto;
}
.rb-lp-title {
  display: block;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the inherited .kx-u41 atom pins this link to color:inherit with !important */
.rb-lastpost a.rb-lp-title:hover { color: var(--link-color, var(--primary)) !important; }

.rb-lp-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-lp-meta .au a {
  font-weight: 700;
  color: var(--muted-foreground);
}
.rb-lp-meta .au a:hover { color: var(--link-color, var(--primary)); }
.rb-lp-meta .ti { color: var(--text-faint); }
/* the designed meta line is text only: date sits behind a middot, no glyph */
.rb-lp-meta .ti svg { display: none; }
.rb-lp-meta .ti::before {
  content: "·";
  margin: 0 5px;
  color: var(--text-faint);
}

/* empty forum — cobalt plus mark plus a quiet invitation */
.rb-lastpost .rb-lp-title.kx-u42 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.45;
  white-space: normal;
}
.rb-lastpost .rb-lp-title.kx-u42::before {
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* ── board with no forums at all ────────────────────────────────────────── */
.rb-forum-table.kx-u32 {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.rb-forum-table .kx-cfaint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted-foreground);
}
.rb-forum-table .kx-u33 { color: var(--primary); }
/* .kx-u34 pins a colour token this theme does not define, with !important */
.rb-forum-table .kx-u34 {
  color: var(--foreground) !important;
  font-size: 18px;
}
.rb-forum-table .kx-u35 { color: var(--text-faint); }

/* ── dark deltas ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .rb-node-icon { box-shadow: inset 0 0 0 1px var(--border); }
html[data-theme="dark"] .rb-wb-badge { box-shadow: inset 0 0 0 1px var(--border); }
html[data-theme="dark"] .rb-category-header > i,
html[data-theme="dark"] .rb-category-header > img,
html[data-theme="dark"] .rb-category-header .kx-u37 { box-shadow: 0 0 0 3px var(--as-border-soft); }
html[data-theme="dark"] .rb-fc-card:hover { border-color: var(--as-input-border); }
html[data-theme="dark"] .rb-chip:hover { border-color: var(--primary); }

/* ── collapse ≤960px ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .rb-kx-content { gap: 18px; }
  .rb-forum-table { gap: 18px; }

  .rb-forum-node {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    row-gap: 10px;
    align-items: start;
    padding: 14px 16px;
  }
  .rb-node-icon {
    align-self: start;
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
  .rb-node-icon svg { width: 19px; height: 19px; }
  .rb-node-icon img { width: 24px; height: 24px; }
  .rb-count { display: none; }
  .rb-lastpost { grid-column: 2; }

  .rb-fc-card { flex-basis: 246px; max-width: 246px; }
  .rb-fc-nav { display: none; }

  .rb-wb { flex-direction: column; align-items: stretch; gap: 16px; }
  .rb-wb-actions { flex-direction: row; }
  .rb-wb-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* ── phone tuning ≤768px ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rb-s7-1238 { padding: 16px 18px 16px 21px; }
  .rb-wb-title { font-size: 19px; }
  .rb-wb-mem-img,
  .rb-wb-mem-letter,
  .rb-wb-mem-more { width: 36px; height: 36px; }

  .rb-markread-row .btn { min-height: 38px; }

  .rb-category-header { min-height: 36px; }
  .rb-subforums { gap: 8px; }
  .rb-chip { padding: 6px 12px; min-height: 36px; }

  .rb-fc-card { flex-basis: 82%; max-width: 82%; }
}

/* ── narrow phones ≤560px ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .rb-forum-node { padding: 13px 14px; }
  .rb-node-title { font-size: 15px; }
  .rb-lp-meta { white-space: normal; }
  .rb-wb-actions { flex-direction: column; }
  .rb-wb-actions .btn { width: 100%; }
  .rb-fc-card { flex-basis: 88%; max-width: 88%; }
  .rb-fc-track { gap: 10px; }
}


/* ===========================================================================
   ASLITIUM · 05 — thread list
   forum/show.php · macros/thread/thread_row.php · macros/layout/pagination.php
   Screen order: breadcrumb card → page-head card → filter pills →
   thread rows → pagination. The same row macro is reused by whats_new and
   tags/show inside a plain .thread-list wrapper, so both containers are
   carried here.
   =========================================================================== */

/* ── orphaned de-inlining atoms ────────────────────────────────────────────
   The templates still emit these utility classes; their old declarations left
   with the inherited stylesheet. Geometry only, no colour opinions. */
.kx-fnone { flex: none; }
.kx-min0 { min-width: 0; }
a.kx-ci,
a.kx-ci:hover { color: inherit; }

/* ── breadcrumb card ──────────────────────────────────────────────────────
   Shared with profile/show, which emits the identical nav. */
.rb-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.rb-breadcrumb a { color: inherit; }
.rb-breadcrumb a:hover,
.rb-breadcrumb a.kx-ci:hover { color: var(--link-color, var(--primary)); }
.rb-breadcrumb a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 8px);
}
.rb-breadcrumb svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--text-faint);
}
.rb-breadcrumb .cur {
  min-width: 0;
  font-weight: 800;
  color: var(--foreground);
}

/* ── page head card (.kx-u10) ─────────────────────────────────────────────
   Serif h1 + description on the left, Watch / New-thread on the right. The
   template prints the primary action before the watch toggle, so flex order
   restores the mockup's reading order without touching the markup. */
.kx-u10 {
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.kx-u10 > .kx-min0 { flex: 1 1 260px; order: 1; }
.kx-u10 > button { order: 2; }
.kx-u10 > .btn-primary { order: 3; }
.kx-u10 > .btn,
.kx-u10 > button.btn { flex: none; }

.kx-u10 .kx-u11 {
  margin: 0 0 5px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.2px;
}
.kx-u10 .kx-u12 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* watch toggle in its "on" state — the template also flips inline colours */
.kx-u10 > button.btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* ── filter / sort strip ──────────────────────────────────────────────────
   .kx-u15 is the row wrapper, .rb-sortbar the pill group, .thread-prefix-filter
   the prefix chips. Every pill is a 999px capsule; active is a cobalt gradient. */
.rb-sortbar,
.thread-prefix-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.rb-sortpill,
.thread-prefix-filter .kx-pfall {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted-foreground);
  transition: background .15s, color .15s, border-color .15s;
}
.rb-sortpill i { font-size: 12.5px; opacity: .9; }
.rb-sortpill:hover,
.thread-prefix-filter .kx-pfall:hover {
  color: var(--foreground);
  border-color: var(--border-strong);
}
.rb-sortpill:focus-visible,
.thread-prefix-filter .kx-pfall:focus-visible,
.thread-prefix-chip:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.rb-sortpill.is-active,
.thread-prefix-filter .kx-pfall.is-active {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px rgba(0, 71, 171, .20);
}
.rb-sortpill.is-active:hover,
.thread-prefix-filter .kx-pfall.is-active:hover { color: var(--primary-foreground); }

html[data-theme="dark"] .rb-sortpill.is-active,
html[data-theme="dark"] .thread-prefix-filter .kx-pfall.is-active {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px rgba(0, 0, 0, .35);
}

/* prefix chips wrap an admin-coloured badge, so the chip itself only supplies
   the capsule frame and the selected ring. */
.thread-prefix-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.thread-prefix-chip:hover { border-color: var(--border-strong); }
.kx-pfchip { opacity: .88; }
.kx-pfchip:hover { opacity: 1; }
.thread-prefix-chip.is-active {
  opacity: 1;
  background: var(--primary-soft);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

/* ── thread list shell ────────────────────────────────────────────────────
   .rb-threadlist is forum/show's container; .thread-list is the master
   whats_new / tags wrapper around the same rows. */
.rb-threadlist,
.thread-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rb-tl-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 190px;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-tl-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-tl-head span:nth-child(2),
.rb-tl-head span:nth-child(3) { text-align: center; }

/* ── thread row ───────────────────────────────────────────────────────────
   avatar + title block | replies | views | last reply */
.rb-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px 190px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--as-divider);
  transition: background .14s;
}
.rb-thread-row:last-child { border-bottom: none; }
.rb-thread-row:hover { background: var(--surface-2); }

.rb-thread-row.is-pinned {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--primary);
}
.rb-thread-row.is-pinned:hover { background: var(--muted); }
html[data-theme="dark"] .rb-thread-row.is-pinned { background: var(--as-surface-3); }
html[data-theme="dark"] .rb-thread-row.is-pinned:hover { background: var(--surface-2); }

/* left cell */
.rb-th-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rb-th-modcheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
}
.rb-th-modcheck input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.rb-thread-row .rb-th-avatar {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--as-avatar-radius, 10px);
  font-size: .9rem;
}

.rb-th-titles {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rb-th-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--foreground);
}
.rb-th-title > a {
  min-width: 0;
  color: inherit;
  overflow-wrap: anywhere;
}
.rb-th-title > a:hover,
.rb-th-title > a.kx-ci:hover { color: var(--link-color, var(--primary)); }
.rb-th-title > a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 8px);
}
.rb-th-title > i { flex: none; }

/* Prefix badge: every colour, size and radius arrives as an admin-configured
   inline style from ThreadPrefixBadge::style(), so the layer only sets the
   case treatment and keeps the badge from stretching the row. */
.rb-th-title > span.whitespace-nowrap {
  flex: none;
  max-width: 100%;
  line-height: 1.3;
  text-transform: uppercase;
}

.rb-th-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.rb-th-state--mod { background: var(--as-gold-soft); color: var(--as-gold); }
.rb-th-state--del { background: var(--muted); color: var(--danger); }

.rb-th-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--as-gold-soft);
  color: var(--as-gold);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rb-th-author {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.rb-th-author a { color: inherit; }
.rb-th-author-name { font-weight: 700; color: var(--muted-foreground); }
.rb-th-author a:hover .rb-th-author-name { color: var(--link-color, var(--primary)); }

.rb-th-delreason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger);
  overflow-wrap: anywhere;
}

/* count cells */
.rb-th-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}
.rb-th-stat b {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-th-stat small {
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* last reply cell */
.rb-th-last {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.rb-th-last .rb-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--as-avatar-radius, 10px);
  font-size: .72rem;
}
.rb-th-last .au {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-th-last .au a { color: inherit; }
.rb-th-last .au a:hover,
.rb-th-last .au a.kx-ci:hover { color: var(--link-color, var(--primary)); }
.rb-th-last .ti {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── empty state (.rb-threadlist.kx-u19) ──────────────────────────────────
   Padding and muted colours already ship with the inherited atoms; only the
   display headline and the action spacing are ours. */
.rb-threadlist.kx-u19 .kx-u21 {
  font-size: 18px;
  font-weight: 700;
}
.rb-threadlist.kx-u19 .btn { margin-top: 4px; }

/* ── pagination ───────────────────────────────────────────────────────────
   Two shapes reach this container: forum/show's own .rb-page anchors and the
   master macro's .btn.btn-sm.btn-ghost buttons. Both land on a 34px square. */
.rb-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.rb-page {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  transition: background .14s, color .14s, border-color .14s;
}
.rb-page:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--foreground);
}
.rb-page:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.rb-page.nav { padding: 0 12px; }
.rb-page.is-active {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.rb-page.is-active:hover {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  border-color: transparent;
  color: var(--primary-foreground);
}
/* the ellipsis span carries an inherited background:none !important */
.rb-pagination .kx-u18 { color: var(--text-faint); }

.rb-pagination .btn.btn-sm {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rb-pagination .btn.btn-sm.btn-icon {
  width: 34px;
  padding: 0;
}
.rb-pagination .rb-pagination__current {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.rb-pagination .text-muted {
  padding: 0 4px;
  font-weight: 700;
  color: var(--text-faint);
}

html[data-theme="dark"] .rb-page.is-active,
html[data-theme="dark"] .rb-pagination .rb-pagination__current {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ── collapse ─────────────────────────────────────────────────────────────
   960 drops the count and last-reply columns exactly as the mockup does, so
   the row becomes avatar + title on one full-width line. */
@media (max-width: 960px) {
  .rb-breadcrumb {
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
  }

  .kx-u10 {
    align-items: flex-start;
    padding: 16px 16px;
    margin-bottom: 12px;
  }
  .kx-u10 .kx-u11 { font-size: 21px; }

  .rb-tl-head { display: none; }

  .rb-thread-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 13px 14px;
  }
  .rb-th-stat,
  .rb-th-last { display: none; }
}

@media (max-width: 768px) {
  .rb-sortpill,
  .thread-prefix-filter .kx-pfall {
    min-height: 36px;
    padding: 7px 13px;
  }
  .thread-prefix-chip { min-height: 36px; }

  .rb-page {
    min-width: 36px;
    height: 36px;
  }
  .rb-pagination .btn.btn-sm {
    min-width: 36px;
    height: 36px;
  }
  .rb-pagination .btn.btn-sm.btn-icon { width: 36px; }
}

@media (max-width: 560px) {
  .kx-u10 { padding: 14px 14px; }
  .kx-u10 .kx-u11 { font-size: 19px; }
  .kx-u10 > .btn,
  .kx-u10 > button.btn { flex: 1 1 auto; }

  .rb-thread-row {
    padding: 12px;
    gap: 10px;
  }
  .rb-th-main { gap: 10px; }
  .rb-thread-row .rb-th-avatar {
    width: 38px;
    height: 38px;
    font-size: .82rem;
  }
  .rb-th-title { font-size: 13.8px; }
  .rb-th-author { font-size: 12px; }

  .rb-pagination { gap: 5px; }
  .rb-page.nav { padding: 0 10px; }
}


/* ===========================================================================
   ASLITIUM · 06 — thread view
   Post cards, the left-rail postbit, BBCode content (quotes / code / spoilers /
   hide), reactions + post actions, the reply editor and the inline moderation
   bar. Consumes the tokens declared in as-01-core.css.

   Cascade notes:
   • core CSS loads BEFORE the theme layer, and the inherited de-inlining atoms
     (keep.css) load before this file — equal-specificity rules here therefore
     win on source order.
   • The post <article> carries inline onmouseover/onmouseout handlers that
     write style.borderColor, so per-state accents are painted with box-shadow
     instead of border-color, which the handlers cannot clobber.
   =========================================================================== */

/* ── thread stack + shared metrics ────────────────────────────────────── */
.thread-body {
  display: flex;
  flex-direction: column;
  gap: var(--as-gap, 18px);
  /* core reads this for the postbit-layout variants and the Q&A 3-col grid */
  --rb-postbit-width: var(--rail-w, 240px);
}
/* the template's space-y utility would double the flex gap */
.thread-body.space-y-5 > * + * { margin-top: 0; }

/* ── state banners above the post list ────────────────────────────────── */
.state-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-foreground);
}
.state-banner i { font-size: 13px; }
.state-banner--moderated {
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn);
}
.state-banner--deleted {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  color: var(--danger);
}
.state-banner--locked {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 26%, transparent);
  color: var(--primary);
}

/* ── the post card ────────────────────────────────────────────────────── */
.post-wrapper,
.post-wrapper.rb-pb {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* rds.css pins .post-prose padding with !important through this variable, so
     the design value is delivered as the variable rather than fought. */
  --rb-post-prose-padding: 20px 22px;
  --rb-post-prose-line-height: var(--rb-content-line-height, 1.7);
  transition: box-shadow .18s ease;
}
.post-wrapper:target { box-shadow: var(--shadow-md), 0 0 0 2px var(--ring); }

/* OP + accepted answer: inset edges, immune to the inline border handlers. */
.post-wrapper.op { box-shadow: var(--shadow-sm), inset 0 2px 0 0 var(--primary); }
.post-wrapper.kx-post-accepted { box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--success); }

/* Deleted / moderated posts read as provisional. */
.post-wrapper.post--deleted,
.post-wrapper.state-deleted { opacity: .72; }

/* Full-width status strips the card opens with. The atoms carry only colour,
   so the row layout is supplied here. */
.post-wrapper > .rb-s7-0792,
.post-wrapper > .rb-s7-1316,
.post-wrapper > .rb-s7-0718 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
}
.post-state-label {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.post-state-label--moderated { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.post-state-label--deleted { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.rb-dim-85 { opacity: .85; }
.rb-dim-60 { opacity: .6; }

/* ── post grid: rail | body ───────────────────────────────────────────── */
.post.rb-pb-body {
  display: grid;
  grid-template-columns: var(--rail-w, 240px) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-width: 0;
}
/* The Q&A layout (vote | body | rail) is pinned by core with #main-content and
   !important; it reads --rb-postbit-width, which .thread-body already sets. */

.post-body.rb-pb-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── postbit rail ─────────────────────────────────────────────────────── */
.rb-pb-author.rb-postbit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  min-width: 0;
  padding: 20px 18px;
  background: var(--surface-2);
  border-right: 1px solid var(--as-border-soft);
}

.rb-pb-ava {
  position: relative;
  display: block;
  flex-shrink: 0;
  margin-bottom: 11px;
  --av-sz: 116px;
  text-decoration: none;
}
.rb-pb-ava .rb-avatar,
.rb-pb-ava .avatar,
.rb-pb-ava img {
  width: 116px;
  height: 116px;
  border-radius: var(--as-avatar-radius, 10px);
  object-fit: cover;
  /* double ring: a surface gap, then a hairline */
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border);
}
.rb-pb-ava .rb-avatar-letter { font-size: 2.5rem; }

.rb-pb-online-dot,
.kx-pb-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 3px solid var(--surface);
}
.kx-dot-on { background: var(--as-online); }
.kx-dot-off { background: var(--text-faint); }

.rb-pb-username {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--foreground);
  text-decoration: none;
}
/* Role colour arrives as the group's inline username_css and wins over this. */
.rb-pb-username:hover { color: var(--primary); }
.rb-pb-username.username--banned { text-decoration: line-through; opacity: .65; }

.rb-pb-role {
  margin: 2px 0 11px;
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

/* Banner bars. renderBadges() writes display/width/padding inline, so only the
   shape and the type are set from here. */
.rb-pb-badges { width: 100%; min-width: 0; }
.rb-pb-badges .userBanner {
  border-radius: var(--radius-sm, 8px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.rb-pb-badges .userBanner i { margin-right: 6px; }
.rb-pb-badges .userBanner--image {
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm, 8px);
  box-shadow: none;
}

/* Trophies */
.rb-pb-trophies { width: 100%; }
.rb-pb-trophy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 8px);
  background: var(--as-gold-soft);
  color: var(--as-gold);
  font-size: 12px;
}
.kx-tr-ico {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.15em;
}

/* Stat rows — the design's "Puan | Çözüm" pill plus icon rows collapses onto
   this single hairline table, which is all the macro emits. */
.rb-pb-info {
  width: 100%;
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  text-align: left;
}
.rb-pb-info .rw {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 11px;
  border-bottom: 1px solid var(--as-divider);
  font-size: 12px;
}
.rb-pb-info .rw:last-child { border-bottom: none; }
.rb-pb-info .rw > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-weight: 600;
}
.rb-pb-info .rw > b {
  margin-left: auto;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
/* Lead row (points, or the first stat when points are off) carries the accent. */
.rb-pb-info .rw:first-child { background: var(--primary-soft); }
.rb-pb-info .rw:first-child > span { color: var(--primary); }
.rb-pb-info .rw:first-child > b { color: var(--primary); font-size: 13.5px; }
.rb-pb-info .rw.rb-pb-row--warn > span,
.rb-pb-info .rw.rb-pb-row--warn > b { color: var(--danger); }
.rb-pb-info .rw a { color: var(--link-color, var(--primary)); text-decoration: none; }
.rb-pb-info .rw a:hover { text-decoration: underline; }

/* Reputation strip + pips */
.rb-pb-rep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  font-size: 12px;
}
.rb-pb-rep__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--muted-foreground);
}
.rb-pb-rep__val {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
}
.rb-pb-rep__val.is-pos { color: var(--success); }
.rb-pb-rep__val.is-neg { color: var(--danger); }
.rb-pb-rep__bar { display: inline-flex; gap: 3px; flex-shrink: 0; }
.rb-pb-rep__pip {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-strong, var(--border));
}
.rb-pb-rep__pip.on-pos { background: var(--primary); }
.rb-pb-rep__pip.on-neg { background: var(--danger); }

/* Custom fields */
.rb-pb-custom {
  width: 100%;
  font-size: 12px;
  color: var(--muted-foreground);
}
.rb-pb-custom a { color: var(--link-color, var(--primary)); }

/* Profile button */
.rb-pb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.rb-pb-rank:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.kx-block { display: block; }
.kx-ptr { cursor: pointer; }

/* ── post head ────────────────────────────────────────────────────────── */
.post-wrapper .post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 22px;
  background: transparent;
  border-bottom: 1px solid var(--as-divider);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
}
.post-head .post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.post-head__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.post-head .pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--muted);
  color: var(--muted-foreground);
}
.post-head .pill.accent {
  background: var(--primary);
  color: var(--primary-foreground, #fff);
}
.rb-thread-starter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--as-mod-soft);
  color: var(--as-mod);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}
.rb-thread-starter i { font-size: 9px; }
.post-num,
.post-permalink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
}
.post-num:hover,
.post-permalink:hover { color: var(--primary); }
.post-permalink[data-copied="1"] { color: var(--success); }

/* Article-thread OP head (the rich branch's author strip). */
.post-wrapper > .rb-s7-0794 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--as-divider);
}
.post-wrapper > .rb-s7-0794 .rb-pbm-badges .userBanner {
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ── post content ─────────────────────────────────────────────────────── */
.post-wrapper .post-prose,
.post-wrapper .bbcode-content {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--as-fs-base, 14.5px);
  line-height: var(--rb-content-line-height, 1.7);
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.post-wrapper .post-prose > :first-child { margin-top: 0; }
.post-wrapper .post-prose > :last-child { margin-bottom: 0; }
.post-wrapper .post-prose p { margin: 0 0 12px; }
.post-wrapper .post-prose h1,
.post-wrapper .post-prose h2,
.post-wrapper .post-prose h3,
.post-wrapper .post-prose h4,
.post-wrapper .post-prose .bbcode-heading {
  margin: 20px 0 10px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--foreground);
}
.post-wrapper .post-prose h1 { font-size: 24px; }
.post-wrapper .post-prose h2 { font-size: 20px; }
.post-wrapper .post-prose h3 { font-size: 17px; }
.post-wrapper .post-prose h4 { font-size: 15px; }
.post-wrapper .post-prose ul,
.post-wrapper .post-prose ol,
.post-wrapper .post-prose .bbcode-list { margin: 0 0 12px; padding-left: 22px; }
.post-wrapper .post-prose li { margin-bottom: 4px; }
.post-wrapper .post-prose img { border-radius: var(--radius-sm, 8px); }
.post-wrapper .post-prose hr,
.post-wrapper .post-prose .bbcode-hr {
  border: 0;
  border-top: 1px solid var(--as-divider);
  margin: 16px 0;
}
.post-prose a[href]:not([class]),
.bbcode-content a[href]:not([class]) { color: var(--link-color, var(--primary)); }

/* ── BBCode: quote ────────────────────────────────────────────────────── */
/* Core paints .bbcode-quote from a legacy --color-primary-500 with an orange
   rgba fallback; every property it sets is restated here on the token set. */
.bbcode-content .bbcode-quote,
.post-prose .bbcode-quote {
  margin: 0 0 14px;
  padding: 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  overflow: hidden;
  font-size: var(--as-fs-base, 14.5px);
  font-style: normal;
  line-height: 1.6;
}
.bbcode-quote__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 14px 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
}
.bbcode-quote__author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bbcode-quote__icon { font-size: 11px; opacity: .8; }
.bbcode-quote__post-link {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.bbcode-quote__post-link:hover { text-decoration: underline; }
.bbcode-content .bbcode-quote-content,
.post-prose .bbcode-quote-content {
  padding: 6px 14px 12px;
  font-style: italic;
  font-weight: 600;
  font-size: var(--as-fs-base, 14.5px);
  line-height: 1.6;
  color: var(--muted-foreground);
}
/* Nested quotes step back to the plain surface so the cobalt does not stack. */
.bbcode-quote .bbcode-quote {
  background: var(--surface);
  border-left-color: var(--border-strong, var(--border));
}
.bbcode-quote .bbcode-quote .bbcode-quote__header { color: var(--muted-foreground); }
.bbcode-quote__expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
}

/* ── BBCode: code ─────────────────────────────────────────────────────── */
/* content/bbcode.css hardcodes slate/graphite values AND re-asserts them under
   [data-theme="light"] with !important — matching that weight is the only way
   to bring code blocks onto the Aslitium palette in all three theme states. */
.bbcode-content .bbcode-code-wrap,
.post-prose .bbcode-code-wrap {
  margin: 0 0 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm, 8px) !important;
  background: var(--surface-2) !important;
  overflow: hidden;
}
.bbcode-content .bbcode-code-header,
.post-prose .bbcode-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 13px !important;
  background: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
.bbcode-content .bbcode-code-lang,
.post-prose .bbcode-code-lang {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--primary) !important;
}
.bbcode-content .bbcode-code-copy,
.post-prose .bbcode-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-foreground) !important;
  cursor: pointer;
}
.bbcode-content .bbcode-code-copy:hover,
.post-prose .bbcode-code-copy:hover {
  color: var(--foreground) !important;
  background: var(--surface) !important;
  border-color: var(--border-strong, var(--border));
}
.bbcode-content .bbcode-code-copy.copied,
.post-prose .bbcode-code-copy.copied { color: var(--success) !important; }
.bbcode-content .bbcode-code,
.post-prose .bbcode-code {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 12px 13px !important;
  background: var(--surface-2) !important;
  color: var(--foreground) !important;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  overflow-x: auto;
}
.bbcode-content .bbcode-code code,
.post-prose .bbcode-code code {
  color: var(--foreground) !important;
  background: transparent !important;
  font-family: var(--font-mono);
}
.bbcode-content .bbcode-code-lines,
.post-prose .bbcode-code-lines { border-right-color: var(--border) !important; }
.bbcode-content .bbcode-code-ln,
.post-prose .bbcode-code-ln {
  color: var(--text-faint) !important;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.65;
}
.bbcode-content .bbcode-icode,
.post-prose .bbcode-icode {
  padding: .15em .42em;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: .86em;
}

/* ── BBCode: spoiler / hide ───────────────────────────────────────────── */
.bbcode-content .bbcode-spoiler,
.post-prose .bbcode-spoiler {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
  overflow: hidden;
}
.bbcode-content .bbcode-spoiler > summary,
.post-prose .bbcode-spoiler > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--muted-foreground);
  cursor: pointer;
  user-select: none;
}
.bbcode-content .bbcode-spoiler[open] > summary,
.post-prose .bbcode-spoiler[open] > summary { color: var(--primary); }
.bbcode-content .bbcode-spoiler-content,
.post-prose .bbcode-spoiler-content { padding: 12px 14px; }
.bbcode-ispoiler {
  border-radius: 4px;
  background: var(--foreground);
  color: transparent;
}
.bbcode-ispoiler:hover { background: transparent; color: inherit; }

.bbcode-content .bbcode-hide,
.post-prose .bbcode-hide {
  margin: 0 0 14px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
}
.bbcode-content .bbcode-hide-visible,
.post-prose .bbcode-hide-visible { border-left-color: var(--success); }
.bbcode-content .bbcode-hide-locked,
.post-prose .bbcode-hide-locked {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left-color: var(--warn);
  color: var(--warn);
  font-style: italic;
}
.bbcode-hide-icon { flex-shrink: 0; opacity: .8; }

/* ── BBCode: tables + mentions ────────────────────────────────────────── */
.bbcode-content .bbcode-table,
.post-prose .bbcode-table {
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  font-size: 13px;
}
.bbcode-content .bbcode-th,
.post-prose .bbcode-th {
  background: var(--surface-2);
  border-color: var(--border);
  font-weight: 800;
  color: var(--foreground);
}
.bbcode-content .bbcode-td,
.post-prose .bbcode-td { border-color: var(--border); }
.bbcode-content .bbcode-mention,
.post-prose .bbcode-mention { color: var(--primary); font-weight: 700; }

/* ── edit-history line + modal ────────────────────────────────────────── */
/* The row carries only utility classes, so it is reached through its Alpine
   component name. */
.post-body [x-data^="rbEditHistory"] {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 6px 22px 0;
  font-size: 11.5px;
  color: var(--text-faint);
}
.rb-hist-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--as-mod-soft);
  color: var(--as-mod);
  font-weight: 700;
}
.rb-linklike {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link-color, var(--primary));
  font: inherit;
  cursor: pointer;
}
.rb-modal-backdrop { background: rgba(0, 0, 0, .55); }
.rb-modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 14px);
  box-shadow: var(--shadow-lg);
}
.rb-hist-entry {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
  overflow: hidden;
}
.rb-hist-entry__head {
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--as-divider);
  font-size: 12px;
}
.rb-hist-entry__head--current { background: var(--primary-soft); }
.rb-hist-avatar { width: 22px; height: 22px; border-radius: var(--as-avatar-radius, 10px); }
.rb-hist-who { font-weight: 800; color: var(--foreground); }
.rb-hist-when { color: var(--text-faint); }
.rb-hist-rev {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}
.rb-hist-diff { padding: 10px 12px; font-size: 12.5px; line-height: 1.6; }
.rb-ico-primary { color: var(--primary); }
.rb-btn-bare { background: none; border: 0; cursor: pointer; }
.rb-border-soft { border-color: var(--as-border-soft); }

/* ── signature ────────────────────────────────────────────────────────── */
.post-body [x-data*="sigOpen"] { padding: 0 22px; }
.post-body [x-data*="sigOpen"] > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  cursor: pointer;
}
.post-body [x-data*="sigOpen"] > button:hover { color: var(--primary); }
.kx-sig-on { color: var(--primary); }
.post-body .rb-s7-0554 {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ── post footer: actions ─────────────────────────────────────────────── */
.post-wrapper .post-foot,
.post-wrapper footer.post-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 22px;
  border-top: 1px solid var(--as-divider);
  background: transparent;
}
.post-wrapper .post-foot .spacer { flex: 1 1 auto; }

.post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: 700 12.5px/1 var(--font-sans);
  color: var(--muted-foreground);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.post-action:hover {
  color: var(--foreground);
  border-color: var(--border-strong, var(--border));
}
.post-action.on {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}
.post-action.rep-neg { border-color: color-mix(in srgb, var(--danger) 34%, transparent); }
.post-action.text-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.post-action:disabled { opacity: .5; cursor: default; }

.rb-multi-quote .rb-mq-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
}
.rb-multi-quote.is-armed {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}

/* inline-mod checkbox that opens the footer */
.post-foot .inline-mod-post-cb { accent-color: var(--primary); cursor: pointer; }

/* ── reputation popup ─────────────────────────────────────────────────── */
.rb-rep { position: relative; display: inline-flex; }
.rb-rep-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 268px;
  max-width: 86vw;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.rb-rep-pop__title {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--foreground);
}
.rb-rep-pop__reason {
  width: 100%;
  resize: vertical;
  margin-bottom: 9px;
  padding: 8px 10px;
  border: 1px solid var(--as-input-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--as-input);
  font-size: 12.5px;
}
.rb-rep-pop__actions { display: flex; gap: 8px; }
.rb-rep-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: 800 12px/1 var(--font-sans);
  color: var(--muted-foreground);
  cursor: pointer;
}
.rb-rep-btn--pos:hover { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); border-color: transparent; }
.rb-rep-btn--neg:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.rb-rep-btn:disabled { opacity: .55; cursor: default; }

/* ── reactions (rich bar) ─────────────────────────────────────────────── */
.react-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.react-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: 700 12.5px/1 var(--font-sans);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.react-chip:hover { color: var(--foreground); border-color: var(--border-strong, var(--border)); }
.react-chip.on {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}
.react-chip:disabled { cursor: default; opacity: .7; }
.react-chip__emoji { font-size: 14px; line-height: 1; }
.react-chip .mono { font-variant-numeric: tabular-nums; }
.react-chip--add { border-style: dashed; }
.react-chip__label { font-weight: 700; }

.react-who-wrap { position: relative; display: inline-flex; min-width: 0; }
.react-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  font: 800 12.5px/1 var(--font-sans);
  color: var(--primary);
  cursor: pointer;
}
.react-who:hover { background: var(--primary-soft); }
.react-who__emojis { display: inline-flex; gap: 1px; font-size: 13px; }
.react-who__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.react-who__caret { font-size: 10px; opacity: .75; }
.react-who-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: 240px;
  max-width: 86vw;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.react-who-pop__head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--as-divider);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.react-who-pop__list { max-height: 240px; overflow-y: auto; padding: 5px; }
.react-who-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 8px);
  font-size: 12.5px;
  color: var(--foreground);
  text-decoration: none;
}
.react-who-row:hover { background: var(--surface-2); }
.react-who-row__emoji { font-size: 14px; flex-shrink: 0; }
.react-who-row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.react-who-row--more { color: var(--text-faint); font-weight: 700; }

.react-picker-wrap { position: relative; display: inline-flex; }
.react-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  /* stays under the global overlay ceiling (100051) */
  z-index: 60;
  display: flex;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
.react-picker__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.react-picker__item:hover { background: var(--surface-2); transform: translateY(-2px); }
.react-picker__item.is-active { background: var(--primary-soft); }

/* ── reactions (legacy branch) ────────────────────────────────────────── */
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font: 700 12.5px/1 var(--font-sans);
  color: var(--muted-foreground);
  cursor: pointer;
}
.reaction-btn:hover { color: var(--foreground); }
.reaction-picker {
  display: flex;
  gap: 3px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.reaction-emoji-btn { border-radius: 999px; }
.reaction-emoji-btn:hover { background: var(--surface-2); }
.reaction-emoji-active { background: var(--primary-soft); }

/* ── Q&A vote column ──────────────────────────────────────────────────── */
.qna-vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--surface-2);
  border-right: 1px solid var(--as-border-soft);
}
.kx-vote-off { color: var(--text-faint); background: transparent; }
.kx-vote-off:hover { background: var(--muted); color: var(--foreground); }
.kx-vote-up-on { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.kx-vote-down-on { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.kx-score-pos { color: var(--success); }
.kx-score-neg { color: var(--danger); }
.kx-score-zero { color: var(--muted-foreground); }
.kx-accept-off { color: var(--text-faint); background: transparent; }
.kx-accept-off:hover { background: var(--muted); color: var(--success); }
.kx-accept-on { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }

/* ── multi-quote tray + quick-edit modal ──────────────────────────────── */
.rb-mq-widget {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
}
.rb-mq-widget.rb-hidden { display: none; }
.rb-mq-icon { color: var(--primary); }
.rb-mq-msg { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rb-mq-count { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary); }
.rb-mq-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted-foreground);
}
.rb-mq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font: 800 12px/1 var(--font-sans);
  color: var(--muted-foreground);
  cursor: pointer;
}
.rb-mq-insert { background: var(--primary); border-color: transparent; color: var(--primary-foreground, #fff); }
.rb-mq-clear:hover { color: var(--danger); }

.rb-qem-overlay { background: rgba(0, 0, 0, .55); }
.rb-qem-head {
  border-bottom: 1px solid var(--as-divider);
  background: var(--surface-2);
}
.rb-qem-icon { background: var(--primary-soft); color: var(--primary); }
.rb-qem-input {
  border: 1px solid var(--as-input-border);
  background: var(--as-input);
}
.rb-qem-foot {
  border-top: 1px solid var(--as-divider);
  background: var(--surface-2);
}

/* ── reply card ───────────────────────────────────────────────────────── */
.rb-reply-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.rb-reply-card > .rb-round-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--as-divider);
  font-size: 14px;
  font-weight: 800;
  color: var(--foreground);
}
.rb-reply-locked-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 18px 0;
  padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--radius-sm, 8px);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn);
}
#rb-reply-form { padding: 14px 18px 18px; }
#rb-reply-form > div:has(> .rb-send-row) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.rb-send-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.rb-guest-reply {
  margin-bottom: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
}
.rb-guest-reply__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.rb-guest-reply__input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--as-input-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--as-input);
}
.rb-guest-reply__hint { margin: 7px 0 0; font-size: 11.5px; color: var(--text-faint); }
.rb-guest-reply__captcha { margin-top: 10px; }

/* ── BBCode editor chrome ─────────────────────────────────────────────── */
.bbcode-editor-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  overflow: hidden;
}
.bbcode-editor-wrapper > .bbcode-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--as-divider);
  border-radius: 0;
}
/* components.css pins the sticky toolbar's background with !important; the
   design ground is the soft inner surface, so it is restated at higher weight. */
.rb-reply-card .bbcode-editor-wrapper > .bbcode-toolbar { background: var(--surface-2) !important; }
.bbcode-tbi { display: inline-flex; align-items: center; }
.bbcode-btn,
.bbcode-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bbcode-btn:hover,
.bbcode-tab-btn:hover { background: var(--muted); color: var(--foreground); }
.bbcode-tab-btn.active,
.bbcode-tab-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
.rb-ed-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.rb-ed-btnimg.is-active { background: var(--primary-soft); color: var(--primary); }

.bbcode-wysiwyg {
  min-height: 132px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: var(--as-input);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.65;
  outline: none;
}
.bbcode-wysiwyg:focus { box-shadow: none; }
.bbcode-wysiwyg:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}
.bbcode-source-area { background: var(--as-input); }
.bbcode-source-textarea {
  min-height: 190px;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: var(--as-input);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}
.bbcode-status-bar {
  border: 0;
  border-top: 1px solid var(--as-divider);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-faint);
}
.bbcode-fullscreen {
  border-radius: 0;
  border: 0;
}

.rb-ed-pop,
.smilie-picker-pop {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.smilie-picker-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  border-bottom: 1px solid var(--as-divider);
}
.smilie-tab {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-foreground);
  cursor: pointer;
}
.smilie-tab.is-active,
.smilie-tab.active { background: var(--primary-soft); color: var(--primary); }
.smilie-btn { border-radius: var(--radius-sm, 8px); }
.hover-muted:hover { background: var(--muted); }
.rb-ed-note { font-size: 11.5px; color: var(--text-faint); }
.rb-ed-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-faint); }

/* attachments strip */
.rb-attach { margin-top: 10px; }
.rb-attach__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.rb-attach__hint,
.rb-attach__max { font-size: 11.5px; color: var(--text-faint); }
.rb-attach__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.rb-attach__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
  font-size: 12px;
}
.rb-attach__thumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.rb-attach__name {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.rb-attach__meta { color: var(--text-faint); }
.rb-attach__err { color: var(--danger); font-size: 11.5px; }

/* ── AI tools + AI reply ──────────────────────────────────────────────── */
.rb-ai-tools {
  margin: 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
}
.rf-aitools-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-aitools-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--primary);
}
.rf-translate-row { display: inline-flex; align-items: center; gap: 6px; }
.rf-translate-sel { min-width: 150px; }
.rf-working { font-size: 12px; color: var(--text-faint); }
.rf-result {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  overflow: hidden;
}
.rf-result-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--as-divider);
}
.rf-result-title { font-size: 12.5px; font-weight: 800; color: var(--foreground); }
.rf-result-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.rf-result-body {
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.rf-result-foot {
  padding: 7px 12px;
  border-top: 1px solid var(--as-divider);
  font-size: 11px;
  color: var(--text-faint);
}

.rb-ai-reply { position: relative; }
.rb-ai-pop-backdrop { background: rgba(0, 0, 0, .45); }
.rb-ai-pop {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.rf-pop-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 8px);
  color: var(--muted-foreground);
  cursor: pointer;
}
.rf-pop-x:hover { background: var(--muted); color: var(--foreground); }
.rf-ai-label0,
.tc-ai-label {
  display: block;
  margin: 4px 0 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.tc-ai-full { width: 100%; margin-bottom: 8px; }
.tc-ai-btn-full2 { width: 100%; margin-top: 4px; }
.tc-ai-err { margin: 8px 0 0; font-size: 12px; color: var(--danger); }
.tc-ai-result {
  margin-top: 10px;
  border-top: 1px solid var(--as-divider);
  padding-top: 10px;
}
.tc-ai-result-body {
  max-height: 200px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.tc-ai-actions { display: flex; gap: 7px; margin-top: 9px; }
.tc-ai-flex1 { flex: 1; }
.tc-ai-note { margin: 8px 0 0; font-size: 11px; color: var(--text-faint); }

/* ── similar threads + webmentions ────────────────────────────────────── */
.rb-webmentions {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rb-webmentions h3 { color: var(--text-faint); }
.rb-webmentions li strong { color: var(--foreground); font-weight: 800; }
.rb-webmentions li span { color: var(--text-faint); }

.post-wrapper + .rb-s7-0484,
.rb-s7-0484 {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.rb-s7-0484 > .rb-s7-0441 { border-bottom: 1px solid var(--as-divider); }

/* ── floating reply FAB ───────────────────────────────────────────────── */
.floating-reply-fab {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  color: var(--primary-foreground, #fff);
  font-weight: 800;
}

/* ── inline moderation bar ────────────────────────────────────────────── */
/* The bar's container has no semantic class — the de-inlining atom rb-s7-0791
   (fixed bottom strip) is its only stable hook. */
.rb-s7-0791 {
  padding: 11px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
}
.rb-s7-0791 > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: var(--container, 1240px);
  margin-inline: auto;
}
.rb-s7-0791 > div > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.rb-s7-0791 .btn {
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted-foreground);
}
.rb-s7-0791 .btn:hover { color: var(--foreground); border-color: var(--border-strong, var(--border)); }
.rb-s7-0791 .btn-primary {
  border-color: transparent;
  color: var(--primary-foreground, #fff);
}
.rb-mod-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--muted-foreground);
}
.rb-mod-check input { accent-color: var(--primary); }
.kx-del-soft { color: var(--warn); }
.kx-del-hard { color: var(--danger); }
.kx-delbtn-soft { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.kx-delbtn-hard { background: var(--danger); color: var(--primary-foreground, #fff); }

/* ── dark-mode deltas ─────────────────────────────────────────────────── */
/* Most surfaces re-theme through the tokens; only the pieces whose light
   treatment does not translate are restated. */
html[data-theme="dark"] .post-wrapper { box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .post-wrapper.op { box-shadow: var(--shadow-sm), inset 0 2px 0 0 var(--primary); }
html[data-theme="dark"] .rb-pb-ava .rb-avatar,
html[data-theme="dark"] .rb-pb-ava .avatar,
html[data-theme="dark"] .rb-pb-ava img {
  box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 4px var(--border);
}
html[data-theme="dark"] .rb-pb-info,
html[data-theme="dark"] .rb-pb-rep { background: var(--as-surface-3); }
html[data-theme="dark"] .bbcode-content .bbcode-code-wrap,
html[data-theme="dark"] .post-prose .bbcode-code-wrap,
html[data-theme="dark"] .bbcode-content .bbcode-code,
html[data-theme="dark"] .post-prose .bbcode-code { background: var(--as-input) !important; }
html[data-theme="dark"] .bbcode-content .bbcode-code-header,
html[data-theme="dark"] .post-prose .bbcode-code-header { background: var(--surface-2) !important; }
html[data-theme="dark"] .react-chip--add { border-style: solid; background: var(--surface-2); }
html[data-theme="dark"] .floating-reply-fab {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
}
html[data-theme="dark"] .rb-s7-0791 { box-shadow: 0 -6px 24px rgba(0, 0, 0, .5); }

/* ── ≤960: the rail becomes a horizontal author strip ─────────────────── */
@media (max-width: 960px) {
  .post.rb-pb-body { grid-template-columns: minmax(0, 1fr); }

  .rb-pb-author.rb-postbit {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--as-border-soft);
  }
  .rb-pb-ava { margin: 0; flex-shrink: 0; --av-sz: 52px; }
  .rb-pb-ava .rb-avatar,
  .rb-pb-ava .avatar,
  .rb-pb-ava img {
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .rb-pb-ava .rb-avatar-letter { font-size: 1.25rem; }
  .rb-pb-online-dot,
  .kx-pb-dot { right: -1px; bottom: -1px; width: 13px; height: 13px; border-width: 2px; }

  .rb-pb-username { font-size: 14px; }
  .rb-pb-role { margin: 1px 0 0; font-size: 11.5px; }

  .rb-pb-badges {
    width: auto;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .rb-pb-badges .userBanner { width: auto; padding: 4px 9px; font-size: 10px; }

  /* stat table, reputation, trophies, custom fields and the profile button
     are desktop-only detail */
  .rb-pb-info,
  .rb-pb-rep,
  .rb-pb-trophies,
  .rb-pb-custom,
  .rb-pb-rank { display: none; }

  .post-wrapper { --rb-post-prose-padding: 16px 18px; }
  .post-wrapper .post-head { padding: 10px 18px; }
  .post-wrapper .post-foot,
  .post-wrapper footer.post-foot { padding: 10px 18px; }
  .post-body [x-data^="rbEditHistory"],
  .post-body [x-data*="sigOpen"] { padding-left: 18px; padding-right: 18px; }

  .qna-vote-col { padding: 12px 8px; }

  #rb-reply-form { padding: 12px 14px 14px; }
  .rb-reply-card > .rb-round-top { padding: 12px 14px; }
  .rb-reply-locked-note { margin: 10px 14px 0; }
  .rb-ai-tools { margin: 0 14px; }
}

/* ── ≤768: phone tuning ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* every tappable control clears 36px */
  .post-action,
  .react-chip,
  .react-who,
  .rb-mq-btn,
  .rb-rep-btn,
  .bbcode-btn,
  .bbcode-tab-btn,
  .rb-s7-0791 .btn { min-height: 36px; }
  .bbcode-btn,
  .bbcode-tab-btn { width: 36px; }
  .react-picker__item { width: 40px; height: 40px; }

  .post-wrapper .post-head { gap: 6px 8px; }
  .post-head .post-meta { font-size: 12px; }

  /* labels drop, glyph + count stay */
  .rb-multi-quote .rb-mq-label,
  .react-chip--add .react-chip__label { display: none; }

  .rb-pb-badges { flex-basis: 100%; margin: 4px 0 0; justify-content: flex-start; }

  .rb-mq-widget { left: 12px; right: 12px; transform: none; border-radius: var(--radius-lg, 12px); }
  .rb-mq-text { display: none; }

  .rb-s7-0791 { padding: 9px 12px; }
  .rb-s7-0791 > div { gap: 8px; }

  .bbcode-wysiwyg { min-height: 112px; padding: 11px 12px; }
  .bbcode-source-textarea { min-height: 150px; padding: 11px 12px; }
  .rb-rep-pop,
  .react-who-pop { width: min(280px, calc(100vw - 32px)); }
}

/* ── ≤560: narrow phones ──────────────────────────────────────────────── */
@media (max-width: 560px) {
  .post-wrapper { --rb-post-prose-padding: 14px; border-radius: var(--radius, 10px); }
  .post-wrapper .post-head { padding: 9px 14px; }
  .post-wrapper .post-foot,
  .post-wrapper footer.post-foot { padding: 9px 14px; gap: 6px; }
  .post-body [x-data^="rbEditHistory"],
  .post-body [x-data*="sigOpen"] { padding-left: 14px; padding-right: 14px; }

  .rb-pb-author.rb-postbit { padding: 10px 14px; flex-wrap: wrap; }
  .rb-pb-username { font-size: 13.5px; }

  .post-action { padding: 5px 10px; }
  .post-action span:not(.rb-mq-check) { display: none; }
  .post-action.rb-multi-quote,
  .rb-rep .post-action { padding: 5px 12px; }

  .bbcode-content .bbcode-code,
  .post-prose .bbcode-code { font-size: 11.5px; }
  .bbcode-content .bbcode-code-lines,
  .post-prose .bbcode-code-lines { display: none; }

  .react-picker { left: 0; transform: none; flex-wrap: wrap; max-width: calc(100vw - 40px); border-radius: var(--radius-lg, 12px); }
}


/* ===========================================================================
   ASLITIUM · 07 — profile: cover banner, identity card, tab panel, wall,
   members listing and the hover user-card popover.
   Templates: profile/show (992), members/index + notable + online (master),
   and the #rb-user-card block at the foot of layouts/main.
   =========================================================================== */

/* ── page wrapper ─────────────────────────────────────────────────────── */
/* Both .rb-profile-wrap blocks sit inside #main-content, which already owns
   the container width and gutters — they only need to stop being a container
   of their own. */
.rb-profile-wrap { width: 100%; max-width: 100%; min-width: 0; }

.rb-profile-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--as-gap);
  align-items: start;
  padding-bottom: 8px;
}

/* ── cover banner ─────────────────────────────────────────────────────── */
/* Card frame with an 8px reveal; the cobalt plate lives on .cover-bg so the
   uploaded-cover rule in core (background-image: var(--cover-img)) can take
   the plate over without the frame moving. */
.profile-cover {
  position: relative;
  margin: 0 0 var(--as-gap);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}

.cover-bg {
  position: relative;
  height: var(--rb-profile-banner-height, 224px);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--primary);
  background-image: linear-gradient(115deg, var(--as-mast-deep), var(--primary) 55%, var(--as-primary-2));
}

/* diagonal hairline weave — the cobalt ground is the one place a white
   overlay is allowed to stand in for a token */
.cover-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 52px);
}

/* oversized brand letter, bled off the bottom-right corner */
.cover-bg::after {
  content: "A";
  position: absolute;
  right: 34px;
  bottom: -72px;
  font: italic 600 260px/1 var(--font-sans, system-ui, sans-serif);
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
  user-select: none;
}

/* uploaded cover: restate core's paint rule so the gradient above cannot
   shadow it, and retire the decorations for a bottom scrim */
.profile-cover.has-cover .cover-bg {
  background-color: var(--surface-2);
  background-image: var(--cover-img, none);
  background-size: cover;
  background-position: center var(--cover-pos, 50%);
  background-repeat: no-repeat;
}
.profile-cover.has-cover .cover-bg::before { content: none; }
.profile-cover.has-cover .cover-bg::after {
  content: "";
  inset: 0;
  right: auto;
  bottom: auto;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .28) 100%);
}
.profile-cover .cover-bg.is-repositioning { cursor: grab; touch-action: none; user-select: none; }
.profile-cover .cover-bg.is-repositioning:active { cursor: grabbing; }

/* cover tools — dark scrim chips over the cobalt plate */
.cover-bg-edit__btn,
.cover-reposition-btn,
.cover-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .5);
  color: var(--primary-foreground);
  font: 700 12.5px/1 var(--font-sans);
  cursor: pointer;
}
.cover-bg-edit__btn:hover,
.cover-reposition-btn:hover { background: rgba(0, 0, 0, .68); color: var(--primary-foreground); }
.cover-remove-btn:hover { background: var(--danger); border-color: transparent; }

.cover-reposition-btn { position: absolute; top: 12px; left: 12px; z-index: 4; }
.cover-remove-btn { position: absolute; top: 56px; right: 12px; z-index: 4; }

.cover-reposition-bar {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px 8px 0 0;
  background: rgba(0, 0, 0, .58);
  color: var(--primary-foreground);
}
.cover-reposition-hint {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cover-reposition-actions { display: inline-flex; gap: 8px; flex-shrink: 0; }

/* ── identity card ────────────────────────────────────────────────────── */
.rb-id-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rb-id-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  min-width: 0;
}
.rb-id-avatar {
  position: relative;
  width: 76px; height: 76px; flex: 0 0 76px;
  border-radius: var(--as-avatar-radius, 10px);
  background: var(--surface-2);
  overflow: hidden;
}
.rb-id-avatar img,
.rb-id-avatar .avatar-initials {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rb-id-avatar .avatar-initials {
  display: grid; place-items: center;
  font: 800 30px/1 var(--font-sans);
  color: var(--primary-foreground);
}
/* own-profile upload overlay: the template leans on utility classes that this
   build does not emit, so drive the reveal from the wrapper instead */
.rb-id-avatar > form > label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  background: rgba(0, 0, 0, .52);
  color: var(--primary-foreground);
  cursor: pointer;
  transition: opacity .2s;
}
.rb-id-avatar:hover > form > label,
.rb-id-avatar > form > label:focus-within { opacity: 1; }

.rb-id-headtext { min-width: 0; }
.rb-id-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.rb-id-name svg,
.rb-id-name .rb-verified-badge { flex: none; }
/* group banners ride inline with the name — pill geometry only, the colour is
   supplied per group */
.rb-id-name .userBanner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.3;
}
.rb-id-sub {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-id-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 16px;
  margin-top: -4px;
}
.rb-rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-rank-pill svg { width: 14px; height: 14px; flex: none; }
.rb-rank-pill.gold { background: var(--as-gold-soft); color: var(--as-gold); }

/* ── identity actions ─────────────────────────────────────────────────── */
.rb-id-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--as-divider);
}
.rb-id-actions .btn { width: 100%; justify-content: center; min-height: 38px; }
/* the plain `.btn` variants here (Message, Block) carry no colour class */
.rb-id-actions .btn:not([class*="btn-"]) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted-foreground);
}
.rb-id-actions .btn:not([class*="btn-"]):hover {
  color: var(--foreground);
  border-color: var(--border-strong);
}
.rb-id-actions .btn.kx-blockbtn { color: var(--danger); }
.rb-id-actions .btn.kx-blockbtn.is-blocked { color: var(--success); }
/* the inherited atom makes .mod-tools an inline sliver; it has to stack with
   the rest of the action column */
.rb-id-actions .mod-tools { display: flex; width: 100%; margin-left: 0; }
.rb-id-actions .mod-tools .btn { flex: 1; min-width: 0; }

/* ── contact / status rows ────────────────────────────────────────────── */
.rb-id-contact { padding: 4px 0; border-top: 1px solid var(--as-divider); }
.rb-id-contact .rw {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-foreground);
}
.rb-id-contact .rw svg { width: 14px; height: 14px; flex: none; color: var(--text-faint); }
.rb-id-contact .rw a {
  min-width: 0;
  color: var(--link-color, var(--primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kx-stat-dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--text-faint);
}
.kx-stat-dot.is-on {
  background: var(--as-online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-online) 24%, transparent);
}
.kx-stat-label { font-weight: 700; color: var(--muted-foreground); }
.kx-stat-label.is-on { color: var(--as-online); }

/* ── meta strip — cobalt gradient ground inside the identity card ─────── */
.rb-id-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(120deg, var(--as-mast-deep), var(--as-mast));
  color: var(--primary-foreground);
}
.rb-id-twocol > div { min-width: 0; padding: 13px 16px; }
.rb-id-twocol > div + div { border-left: 1px solid rgba(255, 255, 255, .16); }
.rb-id-twocol .lb {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.rb-id-twocol .vl {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── künye: about card with icon rows ─────────────────────────────────── */
.rb-kunye { padding: 0 0 10px; border-top: 1px solid var(--as-divider); }
.rb-kunye .ttl {
  padding: 14px 18px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-kunye .rw {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 18px;
  font-size: 12.5px;
}
.rb-kunye .rw svg { width: 14px; height: 14px; flex: none; color: var(--text-faint); }
.rb-kunye .rw span {
  min-width: 0;
  font-weight: 600;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-kunye .rw b {
  margin-left: auto;
  font-weight: 800;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── sidebar sections: bio, reputation, follower thumbs, widgets ──────── */
.rb-id-section { padding: 14px 18px; border-top: 1px solid var(--as-divider); }
.rb-id-section .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-id-section .hd a { font-size: 11px; font-weight: 700; color: var(--primary); }
.rb-id-section .hd a:hover { color: var(--primary); text-decoration: underline; }
.kx-viewcount { font-weight: 700; color: var(--text-faint); }
.kx-ptr { cursor: pointer; }
.kx-ov-hidden { overflow: hidden; }

.rb-rep-list { display: flex; flex-direction: column; gap: 9px; }
.rb-rep-item {
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--as-border-soft);
  border-radius: var(--radius-sm, 8px);
}
.rb-rep-item__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rb-rep-item__from {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-rep-item__pts {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rb-rep-item__pts.is-pos { color: var(--success); }
.rb-rep-item__pts.is-neg { color: var(--danger); }
.rb-rep-item__reason {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* avatar thumb strips (followers / visitors) */
.rb-id-section .avatar,
.rb-id-section .rb-avatar {
  width: 32px; height: 32px;
  border-radius: var(--as-avatar-radius, 10px);
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
}
.rb-id-widgets { padding: 14px 18px; border-top: 1px solid var(--as-divider); }

/* ── main column: panel + tab strip ───────────────────────────────────── */
.rb-panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rb-panel .rb-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--as-divider);
  overflow-x: auto;
  scrollbar-width: none;
}
.rb-panel .rb-tabs::-webkit-scrollbar { display: none; }
.rb-panel .rb-tab {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 13px 14px;
  border-bottom: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.rb-panel .rb-tab svg { width: 15px; height: 15px; }
.rb-panel .rb-tab:hover { color: var(--foreground); }
.rb-panel .rb-tab.is-active { color: var(--foreground); }
.rb-panel .rb-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}

/* the pane padding is inherited geometry; only the inner blocks are ours */
.rb-tabpanes { min-width: 0; }
.rb-tabpanes .side-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 14px 16px;
}
.rb-tabpanes .side-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-tabpanes .hstack { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pstat-val { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.pstat-lbl {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── wall: composer, posts, comments, reply ───────────────────────────── */
.rb-pp-composer-wrap { margin-bottom: 16px; }

.rb-pp-list { display: flex; flex-direction: column; }
.rb-pp-card {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--as-divider);
}
.rb-pp-card:last-child { border-bottom: 0; padding-bottom: 2px; }

.rb-pp-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--as-avatar-radius, 10px);
  background: var(--surface-2);
  overflow: hidden;
}
.rb-pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rb-pp-avatar-letter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font: 800 15px/1 var(--font-sans);
  color: var(--primary-foreground);
}

.rb-pp-body { flex: 1; min-width: 0; }
.rb-pp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
}
.rb-pp-author {
  max-width: 100%;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-pp-sep { color: var(--text-faint); }
.rb-pp-time { font-weight: 600; color: var(--text-faint); }

.rb-pp-msg {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.rb-pp-msg img { max-width: 100%; border-radius: var(--radius-sm, 8px); }
.rb-pp-msg a { color: var(--link-color, var(--primary)); }

.rb-pp-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--as-gold-soft);
  color: var(--as-gold);
  font-size: 11.5px;
  font-weight: 700;
}
.rb-pp-pending--inline { margin: 0 0 0 6px; padding: 3px 8px; }

.rb-pp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--as-divider);
}
.rb-pp-action,
.rb-pp-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-foreground);
  font: 700 12px/1 var(--font-sans);
  cursor: pointer;
}
.rb-pp-action:hover,
.rb-pp-like:hover { color: var(--foreground); border-color: var(--border-strong); }
.rb-pp-action--danger { color: var(--danger); }
.rb-pp-action--danger:hover { color: var(--danger); border-color: var(--danger); }
.rb-pp-action--meta { background: var(--surface-2); cursor: default; }
.rb-pp-action--meta:hover { color: var(--muted-foreground); border-color: var(--border); }
.rb-pp-spacer { flex: 1; }
.rb-pp-like.is-liked { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.rb-pp-like__count { font-variant-numeric: tabular-nums; }

.rb-pp-comments { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.rb-pp-comment {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
}
.rb-pp-comment__avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.rb-pp-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rb-pp-comment__body { flex: 1; min-width: 0; font-size: 12.5px; }
.rb-pp-comment__body .rb-pp-author { font-size: 12.5px; }
.rb-pp-comment__msg {
  margin-top: 3px;
  line-height: 1.55;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}
.rb-pp-comment__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-pp-comment__actions .rb-pp-action { min-height: 28px; padding: 4px 10px; font-size: 11.5px; }

.rb-pp-reply { display: flex; align-items: center; gap: 9px; min-width: 0; margin-top: 12px; }
.rb-pp-reply__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface-2);
}
.rb-pp-reply__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rb-pp-reply__field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.rb-pp-composer__icon {
  position: absolute;
  left: 13px;
  font-size: 12px;
  color: var(--text-faint);
  pointer-events: none;
}
.rb-pp-composer__input {
  width: 100%;
  height: 38px;
  padding: 0 14px 0 32px;
  border: 1px solid var(--as-input-border);
  border-radius: 999px;
  background: var(--as-input);
  color: var(--foreground);
  font: 600 13px var(--font-sans);
}
.rb-pp-composer__input::placeholder { color: var(--text-faint); font-weight: 500; }
.rb-pp-composer__input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.rb-pp-reply__submit { flex: none; min-height: 38px; }

.rb-pp-empty { padding: 36px 12px; text-align: center; color: var(--text-faint); }
.rb-pp-empty__icon { display: block; margin: 0 auto 10px; font-size: 30px; opacity: .45; }
.rb-pp-empty p { margin: 0; font-size: 13.5px; }

/* wall reactions — scoped to the profile bar so the postbit layer keeps the
   generic .react-* rules */
.rb-pp-react-bar { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rb-pp-react-bar .react-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted-foreground);
  font: 700 12px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rb-pp-react-bar .react-chip:hover { color: var(--foreground); border-color: var(--border-strong); }
.rb-pp-react-bar .react-chip.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.rb-pp-react-bar .react-chip[disabled] { opacity: .6; cursor: default; }
.rb-pp-react-bar .react-chip__emoji { font-size: 13px; line-height: 1; }
.rb-pp-react-bar .react-picker-wrap { position: relative; display: inline-flex; }
.rb-pp-react-bar .react-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md);
}
.rb-pp-react-bar .react-picker__item {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.rb-pp-react-bar .react-picker__item:hover { background: var(--muted); }
.rb-pp-react-bar .react-picker__item.is-active { background: var(--primary-soft); }

/* ── activity feed (threads / posts / warnings tabs) ──────────────────── */
.activity-list { display: flex; flex-direction: column; }
.activity-row {
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--as-divider);
}
.activity-row:last-child { border-bottom: 0; }
.activity-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
}
/* the warning rows inherit a danger colour from a de-inlining atom — give the
   tile a matching ground rather than leaving it on the cobalt wash */
.activity-icon.rb-s7-1092 { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.activity-title { font-size: 13.5px; line-height: 1.55; color: var(--foreground); overflow-wrap: anywhere; }
.activity-thread { font-weight: 700; color: var(--link-color, var(--primary)); }
.activity-thread:hover { color: var(--link-color, var(--primary)); text-decoration: underline; }
.activity-meta { margin-top: 4px; font-size: 12px; color: var(--text-faint); }

/* ── badges tab ───────────────────────────────────────────────────────── */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
}
.badge-icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--radius-sm, 8px);
  background: var(--as-gold-soft);
  color: var(--as-gold);
  overflow: hidden;
}
.kx-trophy-icon { width: 100%; height: 100%; object-fit: contain; }
.badge-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-desc { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--text-faint); }

/* ── about tab ────────────────────────────────────────────────────────── */
.about-bookmarks { display: flex; }
.about-grid { display: flex; flex-direction: column; }
.about-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--as-divider);
  font-size: 13px;
}
.about-row:last-child { border-bottom: 0; }
.about-row > span:first-child,
.about-row > .lbl {
  flex: 0 0 34%;
  max-width: 180px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.about-row > span:last-child {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--foreground);
  overflow-wrap: anywhere;
}
.about-row a { color: var(--link-color, var(--primary)); }
.about-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 20px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.about-section-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.about-section-edit:hover { color: var(--primary); border-color: var(--primary); }

/* ── following / followers / visitors tabs ────────────────────────────── */
.rb-tabpanes .follow-grid .side-card {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  transition: border-color .15s, background .15s;
}
.rb-tabpanes .follow-grid .side-card:hover { background: var(--primary-soft); border-color: var(--primary); }
.follow-grid .avatar {
  display: grid;
  place-items: center;
  border-radius: var(--as-avatar-radius, 10px);
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary-foreground);
}

/* ── members listing ──────────────────────────────────────────────────── */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: var(--as-gap);
}
.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 20px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.member-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* no background here: seed-letter avatars carry their own --av-background */
.member-card .avatar {
  display: grid;
  place-items: center;
  width: 64px; height: 64px; flex: none;
  border-radius: var(--as-avatar-radius, 10px);
  overflow: hidden;
  font: 800 24px/1 var(--font-sans);
}
.member-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-name {
  max-width: 100%;
  min-width: 0;
  margin-top: 11px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-handle {
  max-width: 100%;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-card .pill {
  max-width: 100%;
  margin-top: 9px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.member-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; min-width: 0; }
.member-stats > div + div { border-left: 1px solid var(--border); }
.member-stats > div span:first-child {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.member-stats > div span:last-child { font-size: 10.5px; font-weight: 700; color: var(--text-faint); }
.member-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-online-txt { color: var(--as-online); }
.rb-online-dot { color: var(--as-online); }

/* notable board podium */
.member-grid--boards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.podium-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
}
.podium-top__body { min-width: 0; }
.rb-crown {
  position: absolute;
  top: -8px; left: -4px;
  color: var(--as-gold);
  font-size: 14px;
  transform: rotate(-18deg);
}
.rb-medal-rank { color: var(--medal-fg, var(--as-gold)); }

/* ── hover user card ──────────────────────────────────────────────────── */
#rb-user-card {
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
}
#rb-uc-cover { height: 76px; }
#rb-uc-cover-gradient {
  background: linear-gradient(115deg, var(--as-mast-deep), var(--primary) 55%, var(--as-primary-2));
}
#rb-uc-cover-gradient::before {
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 26px);
  background-size: auto;
}
.rb-uc-avatar-wrap {
  margin-top: -28px;
  border: 3px solid var(--surface);
  border-radius: var(--as-avatar-radius, 10px);
  background: var(--surface-2);
}
.rb-uc-online-dot { background: var(--as-online); border-color: var(--surface); }
.rb-uc-name-row #rb-uc-name { font-size: 15px; font-weight: 800; color: var(--foreground); }
.rb-uc-name-row #rb-uc-name:hover { color: var(--primary); }
#rb-uc-rank { margin-top: 5px; }
.rb-uc-stats {
  margin: 12px 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
}
.rb-uc-stat { background: var(--surface-2); }
.rb-uc-stat:hover { background: var(--muted); }
.rb-uc-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-uc-stat-label { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--text-faint); }
#rb-uc-lastseen,
#rb-uc-joined { color: var(--text-faint); font-weight: 600; }
.rb-uc-btn {
  min-height: 34px;
  border-radius: var(--radius-sm, 8px);
  font-size: 12.5px;
  font-weight: 800;
}
.rb-uc-btn-primary {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  color: var(--primary-foreground);
}
.rb-uc-btn-primary:hover {
  filter: none;
  transform: none;
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
}
.rb-uc-btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--muted-foreground); }
.rb-uc-btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--foreground); }

/* ── warn / ban dialogs on this page ──────────────────────────────────── */
.ban-dur-btn { min-height: 34px; }
.ban-dur-btn:hover { border-color: var(--border-strong); }

/* ── dark deltas ──────────────────────────────────────────────────────── */
/* the cobalt plate sits far above the dark ground, so it is pulled down and
   the watermark loses contrast rather than gaining it */
html[data-theme="dark"] .cover-bg {
  background-image: linear-gradient(115deg, var(--as-mast-deep), var(--as-mast) 58%, var(--primary));
}
html[data-theme="dark"] .cover-bg::after { color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .cover-bg::before {
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 52px);
}
html[data-theme="dark"] .rb-id-twocol {
  background: linear-gradient(120deg, var(--as-mast-deep), var(--as-mast-bar));
}
html[data-theme="dark"] .member-card:hover { background: var(--surface-2); }
html[data-theme="dark"] .rb-tabpanes .follow-grid .side-card:hover { background: var(--as-surface-3); }
html[data-theme="dark"] #rb-user-card { box-shadow: var(--shadow-lg); }
html[data-theme="dark"] #rb-uc-cover-gradient {
  background: linear-gradient(115deg, var(--as-mast-deep), var(--as-mast) 60%, var(--primary));
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .rb-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .cover-bg { height: 140px; }
  .cover-bg::after { font-size: 170px; right: 18px; bottom: -46px; }
  .cover-remove-btn { top: 12px; right: 128px; }
  .rb-panel .rb-tabs { padding: 0 8px; }
  .member-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .member-grid--boards { grid-template-columns: minmax(0, 1fr); }
  .badges-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .about-row { flex-direction: column; align-items: flex-start; gap: 3px; padding: 11px 0; }
  .about-row > span:first-child,
  .about-row > .lbl { flex: none; max-width: 100%; }
  .rb-pp-action,
  .rb-pp-like,
  .rb-pp-react-bar .react-chip { min-height: 36px; }
  .rb-pp-comment__actions .rb-pp-action { min-height: 32px; }
  .cover-reposition-btn span,
  .cover-remove-btn span { display: none; }
  .cover-remove-btn { right: 12px; top: 56px; }
}

@media (max-width: 560px) {
  .rb-id-head { gap: 12px; padding: 16px; }
  .rb-id-avatar { width: 64px; height: 64px; flex: 0 0 64px; }
  .rb-id-avatar .avatar-initials { font-size: 25px; }
  .rb-id-name { font-size: 16px; }
  .rb-id-pills,
  .rb-id-actions,
  .rb-id-section,
  .rb-id-widgets { padding-left: 16px; padding-right: 16px; }
  .rb-id-contact .rw,
  .rb-kunye .rw,
  .rb-kunye .ttl { padding-left: 16px; padding-right: 16px; }
  .cover-bg::after { font-size: 130px; bottom: -34px; right: 12px; }
  .rb-pp-card { gap: 10px; }
  .rb-pp-reply__submit span { display: none; }
  .member-grid { grid-template-columns: 1fr 1fr; }
  .member-card { padding: 16px 10px; }
  .member-card .avatar { width: 56px; height: 56px; font-size: 21px; }
  #rb-user-card { width: 300px; }
}


/* ===========================================================================
   ASLITIUM · 08 — sidebar / zone widgets + add-on widget skins

   Aslitium's widget rhythm follows the mockup's right column: a small caps
   letterspaced label sitting on the page ground, and the widget's content in
   its own white card underneath. RaxBoard emits header and body inside one
   .rb-widget-container, so the container is stripped back to a bare shell,
   the header becomes the label, and .rb-widget-body carries the card chrome.

   The per-widget markup is generated in PHP and reaches the page as hashed
   de-inlining atoms (.rb-w-<hash>). Those atoms already carry core geometry
   and a handful of literal brand colours; everything below re-skins them onto
   the cobalt token set.
   =========================================================================== */

/* ── widget column plumbing ───────────────────────────────────────────── */
/* Core pins the aside to a flex basis of 280px, which leaves a dead strip
   inside the 316px grid track the shell layer defines. Let the track win. */
.rbt-widget-sidebar {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
}

/* above_content / below_content zones: the shell uses gap, so drop the
   inherited margins and stack the widgets on the same rhythm. */
.rbt-content > .rb-s7-0822,
.rbt-content > .rb-s7-0870 {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--as-gap);
}

.rb-ad--sidebar-top,
.rb-ad--sidebar-bottom {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
}

/* ── widget chrome ────────────────────────────────────────────────────── */
.rb-widget-container {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-bottom: 0;
  min-width: 0;
}

.rb-widget-header {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 2px 9px;
  min-width: 0;
}

.rb-widget-icon {
  align-self: center;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--primary);
}

.rb-widget-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rb-widget-title--link:hover {
  color: var(--primary);
  text-decoration: none;
}

.rb-widget-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  padding: 6px 0;
  font-size: 13px;
  color: var(--foreground);
}

/* The body has no side padding so list rows and their dividers run to the
   card edge; every direct child pays its own gutter instead. */
.rb-widget-body > * { padding-inline: 14px; }
.rb-widget-body > .rb-lt { padding-inline: 0; }

/* Empty / "no data" copy shared by most widgets. */
.rb-widget-body .rb-w-9934ba58,
.rb-widget-body .rb-w-ac2fb058,
.rb-widget-body .rb-w-6d26a45b,
.rb-widget-body .rb-w-eb704eb4 {
  margin: 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-faint);
}

/* Avatars are rounded squares in Aslitium; the widget renderer writes the
   radius inline as --av-br, so the box rule has to be re-declared here. */
.rb-widget-body .rb-avatar,
.rb-widget-body .rb-av,
.rb-widget-body .rb-av-ban-veil {
  border-radius: var(--as-avatar-radius, 10px);
}

.rb-widget-body a { color: inherit; }
.rb-widget-body .rb-ulink { font-weight: 700; }
.rb-widget-body .rb-ulink:hover { color: var(--primary); }

/* Core paints every hoverable widget row with --muted; Aslitium uses the soft
   inner surface so the cobalt accents stay the only colour in the card. */
.rb-widget-body [data-rbhov="bg"]:hover { background: var(--surface-2); }
.rb-widget-body [data-rbhov="fg"]:hover { color: var(--primary); }

/* ── list rows (featured / trending / newest / recent / leaderboard) ───── */
.rb-widget-body .rb-w-e8d8f828,
.rb-widget-body .rb-w-b0682258,
.rb-widget-body .rb-w-fd84ba2a,
.rb-widget-body .rb-w-8e1e485a,
.rb-widget-body .rb-w-4da3fda7,
.rb-widget-body .rb-w-2f710ad1 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--as-divider);
  color: var(--foreground);
  transition: background .15s;
  min-width: 0;
}
.rb-widget-body .rb-w-4da3fda7,
.rb-widget-body .rb-w-2f710ad1 { align-items: flex-start; gap: 9px; }

.rb-widget-body .rb-w-e8d8f828:last-child,
.rb-widget-body .rb-w-b0682258:last-child,
.rb-widget-body .rb-w-fd84ba2a:last-child,
.rb-widget-body .rb-w-8e1e485a:last-child,
.rb-widget-body .rb-w-4da3fda7:last-child,
.rb-widget-body .rb-w-2f710ad1:last-child { border-bottom: none; }

/* Wrappers that only group rows must not add a gutter of their own, or the
   rows' dividers would stop short of the card edge. */
.rb-widget-body > .rb-w-d79e5831,
.rb-widget-body > .rb-w-afd75412 { padding-inline: 0; }
.rb-widget-body > .rb-w-d79e5831 { gap: 0; }

/* row bodies + titles */
.rb-widget-body .rb-w-ff4088b3,
.rb-widget-body .rb-w-396e68ac { flex: 1; min-width: 0; }

.rb-widget-body .rb-w-10e43c81,
.rb-widget-body .rb-w-0739a3dd,
.rb-widget-body .rb-w-9fc986e7,
.rb-widget-body .rb-w-6a8e93e8 {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rb-widget-body .rb-w-6a8e93e8 { white-space: normal; }

.rb-widget-body .rb-w-b4b203b4,
.rb-widget-body .rb-w-8b7e8776,
.rb-widget-body .rb-w-0b0f9f46,
.rb-widget-body .rb-w-4818648c,
.rb-widget-body .rb-w-0b5c22a8 {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.rb-widget-body .rb-w-b4b203b4 .rb-ulink,
.rb-widget-body .rb-w-8b7e8776 .rb-ulink { color: var(--muted-foreground); }

/* profile-post / reaction excerpt columns wrap rather than clip */
.rb-widget-body .rb-w-8cd9ba2d { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; }
.rb-widget-body .rb-w-9ce341e1 { font-weight: 700; color: var(--foreground); }
.rb-widget-body .rb-w-23cf1185 { color: var(--muted-foreground); }

/* leaderboard score */
.rb-widget-body .rb-w-db9812ff {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
/* member-stat value + its medal cluster */
.rb-widget-body .rb-w-8e5c7cd9 { flex: 0 0 auto; gap: 5px; }
.rb-widget-body .rb-w-3cf1889e {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-w-c07446fb { font-size: 13.5px; font-weight: 700; }
.rb-widget-body .rb-w-02b7cc0f {
  flex: 0 0 18px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ── rank chips + medals ──────────────────────────────────────────────── */
/* Core reads --rank-bg / --medal-bg from an inline literal gradient. Repaint
   both from tokens; podium places are keyed off row order. */
.rb-widget-body .rb-w-rank,
.rb-widget-body .rb-w-medal,
.rb-widget-body .rb-w-58270bd5 {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: var(--radius-sm, 8px);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--muted-foreground);
  box-shadow: none;
}

.rb-widget-body > *:nth-child(1) .rb-w-rank,
.rb-widget-body .rb-w-fd84ba2a:nth-child(1) .rb-w-medal {
  background: var(--as-gold-soft);
  color: var(--as-gold);
}
.rb-widget-body > *:nth-child(2) .rb-w-rank,
.rb-widget-body .rb-w-fd84ba2a:nth-child(2) .rb-w-medal {
  background: var(--surface-2);
  color: var(--muted-foreground);
}
.rb-widget-body > *:nth-child(3) .rb-w-rank,
.rb-widget-body .rb-w-fd84ba2a:nth-child(3) .rb-w-medal {
  background: var(--primary-soft);
  color: var(--primary);
}

/* trending heat + featured / reaction / birthday glyphs — literal hex in core */
.rb-widget-body .rb-w-016107ed { font-size: 9px; color: var(--as-gold); }
.rb-widget-body .rb-w-e2b51408 { font-size: 10px; color: var(--as-gold); margin-top: 3px; }
.rb-widget-body .rb-w-ae14b2d2 { font-size: 10px; color: var(--as-gold); margin: 0 3px 0 0; }
.rb-widget-body .rb-w-3a1dd637 { color: var(--danger); font-size: 10px; margin-right: 4px; }
.rb-widget-body .rb-w-8fe283d0 { color: var(--as-mod); margin-right: 6px; }
.rb-widget-body .rb-w-2bf466c8 { color: var(--as-gold); opacity: 1; margin-right: 5px; }
.rb-widget-body .rb-w-ec31ba16 { font-size: 10px; color: var(--as-gold); }
.rb-widget-body .rb-w-faa9a073 { font-size: 10px; color: var(--muted-foreground); }
.rb-widget-body .rb-w-204a06cb { font-size: 10px; color: var(--warn); }

/* ── forum statistics ─────────────────────────────────────────────────── */
.rb-widget-body .rb-w-51ddf879 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 8px 14px 12px;
}
.rb-widget-body .rb-w-51ddf879 > .rb-w-statbox:nth-child(1) { --as-sb: var(--as-info-cobalt); }
.rb-widget-body .rb-w-51ddf879 > .rb-w-statbox:nth-child(2) { --as-sb: var(--as-info-sky); }
.rb-widget-body .rb-w-51ddf879 > .rb-w-statbox:nth-child(3) { --as-sb: var(--as-info-gold); }

.rb-widget-body .rb-w-statbox {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius, 10px);
  background: color-mix(in srgb, var(--as-sb, var(--primary)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--as-sb, var(--primary)) 18%, transparent);
}
.rb-widget-body .rb-w-70def89c {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--as-sb, var(--primary));
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-w-92c8831e {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.rb-widget-body .rb-w-e027bd73 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 4px;
  margin: 0;
  border-top: 1px solid var(--as-divider);
  min-width: 0;
}
.rb-widget-body .rb-w-b30deae0 {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rb-widget-body .rb-w-3b14e1bf {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* online-statistics block variant */
.rb-widget-body .rb-w-0e03c8fb { padding-block: 8px; font-size: 13px; }
.rb-widget-body .rb-w-4e6deae2 {
  margin-top: 8px;
  padding-block: 8px 4px;
  border-top: 1px solid var(--as-divider);
  font-size: 12px;
  color: var(--text-faint);
}

/* ── visitor panel — signed in ────────────────────────────────────────── */
.rb-widget-body .rb-w-cfa00675 {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px 12px;
  margin: 0;
  min-width: 0;
}
.rb-widget-body .rb-w-df89f930 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 14px;
  font-weight: 800;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rb-widget-body .rb-w-0f6a0249 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
}

.rb-widget-body .rb-w-7b4e5f9e {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0 14px 12px;
}
.rb-widget-body .rb-w-68b79cfc {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 9px 4px;
  border-radius: var(--radius, 10px);
  background: var(--surface-2);
  border: 1px solid var(--as-border-soft);
}
.rb-widget-body .rb-w-45c8798e {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-w-7ef3be28 {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.rb-widget-body .rb-w-afd75412 {
  border-top: 1px solid var(--as-divider);
  padding-top: 6px;
  gap: 0;
}
.rb-widget-body .rb-w-fe644bee {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground);
  transition: background .15s, color .15s;
}
.rb-widget-body .rb-w-9decffcc {
  flex: 0 0 16px;
  width: 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
}
.rb-widget-body .rb-w-fe644bee:hover { color: var(--primary); }
.rb-widget-body .rb-w-fe644bee:hover .rb-w-9decffcc { color: var(--primary); }

/* ── visitor panel — guest welcome card ───────────────────────────────── */
/* This is the only widget whose heading belongs inside the card: the mockup
   shows a display welcome title, muted copy and a full-width cobalt CTA. */
.rb-widget-container:has(.rb-w-6860dd2d) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  overflow: hidden;
}
.rb-widget-container:has(.rb-w-6860dd2d) .rb-widget-header { padding: 0 0 8px; }
.rb-widget-container:has(.rb-w-6860dd2d) .rb-widget-icon { display: none; }
.rb-widget-container:has(.rb-w-6860dd2d) .rb-widget-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.2px;
  text-transform: none;
  white-space: normal;
  color: var(--foreground);
}
.rb-widget-container:has(.rb-w-6860dd2d) .rb-widget-body {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.rb-widget-body .rb-w-6860dd2d { padding: 0; text-align: left; }
.rb-widget-body .rb-w-acade58f {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.rb-widget-body .rb-w-de9abecf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  font-size: 13.5px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.rb-widget-body .rb-w-de9abecf:hover {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
}
.rb-widget-body .rb-w-c92f779a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  font-size: 13.5px;
  font-weight: 700;
  background: var(--surface);
  color: var(--muted-foreground);
}
.rb-widget-body .rb-w-c92f779a:hover {
  color: var(--foreground);
  border-color: var(--border-strong);
}

/* ── who's online / recently active / last 24h ────────────────────────── */
.rb-widget-body .rb-w-3d0eb438 {
  padding: 8px 14px 10px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.rb-widget-body .rb-w-3d0eb438 .rb-ulink { color: var(--foreground); }
.rb-widget-body .rb-w-3d0eb438 .rb-ulink:hover { color: var(--primary); }

/* "+N more" reads as the mockup's overflow chip rather than an underlined link */
.rb-widget-body .rb-w-f0c0e749 {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-w-f0c0e749:hover { background: var(--surface-2); color: var(--primary); }

.rb-widget-body .rb-w-9a8588b4 {
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--as-divider);
  font-size: 12px;
  color: var(--text-faint);
}
.rb-widget-body .rb-w-de422fee {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.rb-widget-body .rb-w-e174c69c { color: var(--muted-foreground); }
.rb-widget-body .rb-w-7d3b553d { opacity: .8; color: var(--as-mod); }

.rb-widget-body .rb-w-3e1863d4 {
  margin: 6px 0 0;
  padding: 8px 14px 4px;
  border-top: 1px solid var(--as-divider);
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ── tag cloud ────────────────────────────────────────────────────────── */
.rb-widget-body .rb-w-ca85797a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 12px;
  line-height: 1.4;
}
.rb-widget-body .rb-w-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--as-border-soft);
  background: var(--surface-2);
  color: var(--muted-foreground);
  font-size: var(--tag-size, 12.5px);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  /* core fades low-usage tags via --tag-op, which would wash out the whole
     pill; the size ramp alone carries the weight here. */
  opacity: 1;
}
.rb-widget-body .rb-w-tag:hover {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}

/* ── latest poll ──────────────────────────────────────────────────────── */
.rb-widget-body .rb-w-32688494 {
  padding-block: 8px 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.4;
}
.rb-widget-body .rb-w-abd137b8 { margin-bottom: 9px; }
.rb-widget-body .rb-w-df6e2067 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-w-246d8237 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 72%;
}
.rb-widget-body .rb-w-7f46be31 {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.rb-widget-body .rb-w-pollbar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--as-primary-2), var(--primary));
}
.rb-widget-body .rb-w-6aae1df2 { padding-block: 4px 8px; font-size: 12px; }
.rb-widget-body .rb-w-6a6938fe { font-weight: 700; color: var(--primary); }

/* ── search forum / find member ───────────────────────────────────────── */
.rb-widget-body .rb-w-ccc58d95 {
  display: flex;
  gap: 7px;
  padding-block: 8px 10px;
  min-width: 0;
}
.rb-widget-body .rb-w-a7f05990 {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--as-input-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--as-input);
  color: var(--foreground);
  font-size: 13px;
}
.rb-widget-body .rb-w-a7f05990::placeholder { color: var(--text-faint); }
.rb-widget-body .rb-w-a7f05990:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.rb-widget-body .rb-w-d0f85683 {
  flex: 0 0 auto;
  min-width: 38px;
  height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.rb-widget-body .rb-w-d0f85683:hover {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
}

/* ── birthdays ────────────────────────────────────────────────────────── */
.rb-widget-body .rb-w-21db4e01 {
  padding-block: 8px 10px;
  font-size: 13px;
  line-height: 1.9;
}
.rb-widget-body .rb-w-429b242e { color: var(--text-faint); }

/* ── LatestThreads add-on ─────────────────────────────────────────────── */
/* The add-on ships its own stylesheet from the page BODY, so it lands after
   this layer. Its colours all run through --rb-lt-* custom properties: set
   them on the widget container, which is a nearer ancestor than the :root the
   add-on writes them to, so proximity settles it without a specificity war.
   Structural overrides below carry the extra class the add-on's 0,2,0
   selectors need to be beaten. The .rb-lt-host twin is the add-on's own
   JS-stamped fallback for engines without :has(). */
.rb-widget-container:has(.rb-lt),
.rb-widget-container.rb-lt-host {
  --rb-lt-widget-bg: var(--surface);
  --rb-lt-widget-border: var(--border);
  --rb-lt-widget-primary: var(--primary);
  --rb-lt-widget-border-radius: var(--radius-lg, 12px);
  --rb-lt-tab-bg: var(--surface-2);
  --rb-lt-tab-active-color: var(--primary);
  --rb-lt-tab-inactive-color: var(--muted-foreground);
  --rb-lt-header-bg: var(--surface-2);
  --rb-lt-row-hover-bg: var(--surface-2);
  --rb-lt-title-color: var(--foreground);
  --rb-lt-title-hover-color: var(--primary);
  --rb-lt-meta-color: var(--text-faint);
  --rb-lt-stat-color: var(--foreground);
  --rb-lt-num-bg: var(--surface-2);
  --rb-lt-border-line: var(--as-divider);
  --rb-lt-font-size: 13.5px;
  --rb-lt-row-padding: 11px 16px;
}

.rb-widget-body .rb-lt {
  box-shadow: var(--shadow-sm);
}
/* the add-on hides the generic header, so the panel supplies its own frame */
.rb-widget-container:has(.rb-lt) > .rb-widget-body,
.rb-widget-container.rb-lt-host > .rb-widget-body {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.rb-widget-body .rb-lt .rb-lt-tabbar,
.rb-widget-body .rb-lt .rb-lt-tabs {
  border-bottom: 1px solid var(--border);
}
.rb-widget-body .rb-lt .rb-lt-tab {
  padding: 11px 15px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  min-height: 40px;
}
.rb-widget-body .rb-lt .rb-lt-tab.active::after {
  height: 2px;
  background: var(--primary);
}
.rb-widget-body .rb-lt .rb-lt-thead {
  padding: 7px 16px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
}
.rb-widget-body .rb-lt .rb-lt-title { font-weight: 700; }
.rb-widget-body .rb-lt .rb-lt-num {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-lt .rb-lt-cell-stat,
.rb-widget-body .rb-lt .rb-lt-cell-date strong { font-variant-numeric: tabular-nums; }
.rb-widget-body .rb-lt .rb-lt-prefix {
  border-radius: var(--radius-sm, 6px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 7px;
  background: var(--primary-soft);
  color: var(--primary);
}
.rb-widget-body .rb-lt .rb-lt-row--pinned {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--primary);
}
.rb-widget-body .rb-lt .rb-lt-cell-thread .rb-av,
.rb-widget-body .rb-lt .rb-av { border-radius: var(--as-avatar-radius, 10px); }
.rb-widget-body .rb-lt .rb-lt-member-card {
  border-radius: var(--radius, 10px);
  border-color: var(--as-border-soft);
}
.rb-widget-body .rb-lt .rb-lt-member-name { font-weight: 700; }
.rb-widget-body .rb-lt .rb-lt-custom-ic,
.rb-widget-body .rb-lt .rb-lt-row--custom {
  background: var(--primary-soft);
  color: var(--primary);
}
.rb-widget-body .rb-lt .rb-lt-custom-ic { border-radius: var(--radius-sm, 6px); }
.rb-widget-body .rb-lt .rb-lt-footer { border-top: 1px solid var(--as-divider); }
.rb-widget-body .rb-lt .rb-lt-more {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  min-height: 36px;
  border-radius: 999px;
}
.rb-widget-body .rb-lt .rb-lt-prefs {
  border-radius: var(--radius-lg, 12px);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
.rb-widget-body .rb-lt .rb-lt-prefs-save {
  border-radius: var(--radius-sm, 8px);
  font-weight: 800;
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
}
.rb-widget-body .rb-lt .rb-lt-tabnav,
.rb-widget-body .rb-lt .rb-lt-toolbtn { min-height: 40px; width: 38px; }

/* ── ResourceHub add-on widgets ───────────────────────────────────────── */
.rb-widget-body .rb-rh-w-list {
  gap: 0;
  padding-inline: 0;
}
.rb-widget-body .rb-rh-w-item {
  gap: 3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--as-divider);
}
.rb-widget-body .rb-rh-w-item:last-child { border-bottom: none; }
.rb-widget-body .rb-rh-w-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--foreground);
}
.rb-widget-body .rb-rh-w-title:hover { color: var(--primary); }
.rb-widget-body .rb-rh-w-meta { font-size: 12px; color: var(--text-faint); }
.rb-widget-body .rb-rh-w-star { color: var(--as-gold); }
.rb-widget-body .rb-rh-w-star-dim { color: var(--border); }
.rb-widget-body .rb-rh-w-empty {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-faint);
}
.rb-widget-body .rb-rh-w-stats {
  gap: 8px;
  padding: 10px 14px 12px;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}
.rb-widget-body .rb-rh-w-stat {
  gap: 2px;
  padding: 10px 6px;
  border-radius: var(--radius, 10px);
  background: var(--surface-2);
  border: 1px solid var(--as-border-soft);
}
/* the widget emits .rb-rh-w-stat-num; the add-on sheet only styles -stat-val */
.rb-widget-body .rb-rh-w-stat-num {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rb-widget-body .rb-rh-w-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--muted-foreground);
}

/* ── dark-mode deltas ─────────────────────────────────────────────────── */
/* Tokens carry most of the theming; only the treatments that must change
   shape in dark are restated here. */
html[data-theme="dark"] .rb-widget-body {
  box-shadow: none;
}
html[data-theme="dark"] .rb-widget-container:has(.rb-w-6860dd2d) {
  box-shadow: none;
}
html[data-theme="dark"] .rb-widget-body .rb-w-de9abecf {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
html[data-theme="dark"] .rb-widget-body .rb-w-de9abecf:hover {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
}
html[data-theme="dark"] .rb-widget-body .rb-w-d0f85683 {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
}
html[data-theme="dark"] .rb-widget-body .rb-w-f0c0e749:hover {
  background: var(--muted);
}
html[data-theme="dark"] .rb-widget-body .rb-w-tag { background: var(--surface-2); }
html[data-theme="dark"] .rb-widget-body .rb-lt { box-shadow: none; }
html[data-theme="dark"] .rb-widget-body .rb-lt .rb-lt-prefs {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Stacked below the content column: the widgets are full width, so the
     stat and quick-stat grids get room to breathe. */
  .rb-widget-body .rb-w-51ddf879,
  .rb-widget-body .rb-w-7b4e5f9e { gap: 10px; }
}

@media (max-width: 768px) {
  /* Tap targets: every row and control clears 36px on a phone. */
  .rb-widget-body .rb-w-e8d8f828,
  .rb-widget-body .rb-w-b0682258,
  .rb-widget-body .rb-w-fd84ba2a,
  .rb-widget-body .rb-w-8e1e485a,
  .rb-widget-body .rb-w-4da3fda7,
  .rb-widget-body .rb-w-2f710ad1,
  .rb-widget-body .rb-w-fe644bee { min-height: 42px; padding-block: 11px; }

  .rb-widget-body .rb-w-tag { min-height: 32px; padding: 6px 12px; }
  .rb-widget-body .rb-w-f0c0e749 { min-height: 24px; padding: 4px 10px; }
  .rb-widget-body .rb-w-a7f05990,
  .rb-widget-body .rb-w-d0f85683 { height: 40px; }
  .rb-widget-body .rb-w-de9abecf,
  .rb-widget-body .rb-w-c92f779a { min-height: 42px; }
  .rb-widget-body .rb-lt .rb-lt-tab { min-height: 42px; }
}

@media (max-width: 560px) {
  .rb-widget-header { padding-bottom: 7px; }
  .rb-widget-body .rb-w-51ddf879,
  .rb-widget-body .rb-w-7b4e5f9e { gap: 6px; padding-inline: 12px; }
  .rb-widget-body .rb-w-statbox,
  .rb-widget-body .rb-w-68b79cfc { padding-inline: 4px; }
  .rb-widget-body .rb-w-70def89c { font-size: 16px; }
  .rb-widget-body .rb-w-45c8798e { font-size: 14px; }
  .rb-widget-body .rb-w-92c8831e,
  .rb-widget-body .rb-w-7ef3be28 { letter-spacing: .2px; font-size: 9.5px; }
  .rb-widget-container:has(.rb-w-6860dd2d) { padding: 16px; }
}


/* ===========================================================================
   ASLITIUM · 09 — forms, auth, dialogs and the remaining pages
   Everything form-shaped plus the pages no other layer owns: auth (page +
   modal), conversations, help, tags, search, what's-new, errors, the
   style-tweak drawer and the mobile nav drawer.
   Light is the default; dark rides html[data-theme="dark"].
   =========================================================================== */

/* ── layout primitives ────────────────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vstack { display: flex; flex-direction: column; min-width: 0; }

/* Generic card. as-01 owns .as-card / .rb-forum-table / .rb-widget-container;
   .card is the plain paper used by auth, conversation and help. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}

/* ── labels ───────────────────────────────────────────────────────────── */
.field-label,
.as-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 6px;
}
.field-label i { color: var(--primary); margin-right: 5px; font-size: 12px; }
.field-label .req { color: var(--danger); margin-left: 3px; }

/* ── field rows ───────────────────────────────────────────────────────── */
/* Some .field parents are plain padded cards (post editor) and some are
   gap-spaced flex columns (auth forms, the conversation composer card); the
   stacking margin is therefore opt-out rather than opt-in. */
.field { display: block; min-width: 0; }
.field + .field { margin-top: 16px; }
.vstack > .field + .field,
.rb-s7-0956 > .field + .field { margin-top: 0; }

.field-hint,
.form-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
}
.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

/* ── text controls ────────────────────────────────────────────────────── */
.big-input,
.form-control,
.as-input,
input[type="text"].rb-input,
input[type="email"].rb-input,
input[type="password"].rb-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--as-input-border);
  border-radius: var(--radius, 10px);
  background: var(--as-input);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.big-input::placeholder,
.form-control::placeholder,
.as-input::placeholder {
  color: var(--text-faint);
  font-weight: 500;
}
.big-input:hover,
.form-control:hover { border-color: var(--border-strong); }
.big-input:focus,
.form-control:focus,
.as-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.big-input:disabled,
.form-control:disabled,
.big-input[readonly],
.form-control[readonly] {
  background: var(--muted);
  color: var(--text-faint);
  cursor: not-allowed;
}
.big-input[aria-invalid="true"],
.form-control[aria-invalid="true"],
.big-input.is-invalid,
.form-control.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--danger) 16%, transparent);
}

/* No min-height on textarea.big-input: the post editor's inherited atom
   already sets its own 300px and must keep it. */
textarea.form-control,
textarea.big-input,
textarea.as-input {
  padding: 12px 14px;
  font-weight: 500;
  line-height: 1.6;
  resize: vertical;
}
textarea.form-control { min-height: 110px; }

select.form-control,
select.as-input {
  padding-right: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--foreground);
}

/* The search field in the conversation rail and the inline search bar reuse
   the same ground so the whole board reads as one input system. */
.convo-search,
.big-search {
  background: var(--as-input);
  border: 1px solid var(--as-input-border);
  color: var(--text-faint);
}
.convo-search:focus-within,
.big-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.convo-search input,
.big-search input {
  border: 0;
  background: transparent;
  outline: none;
  color: var(--foreground);
  font-family: var(--font-sans);
  min-width: 0;
}
.convo-search input::placeholder,
.big-search input::placeholder { color: var(--text-faint); }

/* ── checkboxes, radios, switches ─────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted-foreground);
  font-weight: 600;
  cursor: pointer;
}

/* ── recipient picker (conversations) ─────────────────────────────────── */
.rb-recipient-picker__field {
  min-height: 44px;
  border: 1px solid var(--as-input-border);
  border-radius: var(--radius, 10px);
  background: var(--as-input);
}
.rb-recipient-picker__field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.rb-recipient-picker__chip {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}
.rb-recipient-picker__input { color: var(--foreground); font-weight: 500; }
.rb-recipient-picker__menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md);
}
.rb-recipient-picker__option-avatar { border-radius: var(--as-avatar-radius, 10px); }
.rb-recipient-picker__option-name { font-weight: 700; }

/* ── chips, tags and small controls ───────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { color: var(--primary); border-color: var(--primary); }
.chip.active,
.chip[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}
.chip i { font-size: 11px; opacity: .9; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-decoration: none;
}
a.tag:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
/* Two inherited atoms already size .tag (the tag-page title pill and the
   tag-cloud pill); re-assert them so this layer does not shrink them. */
.tag.rb-s7-0730 { font-size: 18px; padding: 4px 10px; }
.tag.rb-s7-0419 { font-size: 13px; padding: 6px 12px; }

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm, 8px);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--foreground); border-color: var(--border); }
.icon-btn.active,
.icon-btn[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }

/* ── pagination ───────────────────────────────────────────────────────── */
.rb-pagination { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.rb-pagination__current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.page-nums { display: flex; flex-wrap: wrap; gap: 5px; }
.page-num {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  text-decoration: none;
}
.page-num:hover { background: var(--surface-2); color: var(--primary); border-color: var(--border); }
.page-num.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}

/* ── validation, alerts and flash banners ─────────────────────────────── */
.rb-form-errors {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius, 10px);
  color: var(--danger);
  box-shadow: var(--shadow-sm);
}
.rb-form-errors__head { font-weight: 800; letter-spacing: .2px; }
.rb-form-errors__list { color: var(--foreground); }

.as-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.55;
}
.as-alert--info { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 28%, transparent); color: var(--primary); }
.as-alert--ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.as-alert--warn { background: var(--as-gold-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.as-alert--err { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }

/* Flash / notice strip (partials/notices). */
.rax-notice {
  border-radius: var(--radius, 10px);
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.rax-notice__title { font-weight: 800; letter-spacing: .2px; }
.rax-notices-fixed .rax-notice { border-radius: 0; box-shadow: none; }
.rax-notices-floating .rax-notice {
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
}

/* ── tables ───────────────────────────────────────────────────────────── */
.acc-table-scroll,
.as-table-scroll { overflow-x: auto; }
.acc-table,
.rb-apidocs-table,
.as-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--foreground);
}
.acc-table thead tr,
.rb-apidocs-table thead tr,
.as-table thead tr {
  opacity: 1;
  background: var(--surface-2);
}
.acc-table th,
.rb-apidocs-table th,
.as-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.acc-table td,
.rb-apidocs-table td,
.as-table td {
  padding: 11px 12px;
  border-top: 1px solid var(--as-divider);
  vertical-align: top;
}
.acc-table tbody tr,
.rb-apidocs-table tbody tr,
.as-table tbody tr { border-top: 0; }
.acc-table tbody tr:hover,
.as-table tbody tr:hover { background: var(--surface-2); }
.acc-table .acc-col-right,
.as-table .as-col-right { text-align: right; font-variant-numeric: tabular-nums; }

/* Tables inside help / BBCode content keep the same paper. */
.rb-s7-0466 table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 14px 0;
}
.rb-s7-0466 th,
.prose th {
  background: var(--surface-2);
  text-align: left;
  font-weight: 800;
}
.rb-s7-0466 th,
.rb-s7-0466 td,
.prose th,
.prose td {
  border: 1px solid var(--border);
  padding: 8px 11px;
}

/* ── tab strips ───────────────────────────────────────────────────────── */
.as-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--as-divider);
  overflow-x: auto;
  scrollbar-width: none;
}
.as-tabs::-webkit-scrollbar { display: none; }
.as-tab {
  position: relative;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
  cursor: pointer;
}
.as-tab:hover { color: var(--foreground); }
.as-tab.is-active { color: var(--foreground); }
.as-tab.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}

/* ── empty states ─────────────────────────────────────────────────────── */
.empty-state,
.rb-s7-1111,
.rb-s7-1105,
.rb-s7-0418,
.rb-s7-0460 {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  color: var(--muted-foreground);
}
.empty-state i,
.rb-s7-1111 i,
.rb-s7-1105 i,
.rb-s7-0418 i,
.rb-s7-0460 i { color: var(--primary); }
.empty-state h3,
.rb-s7-1111 h3,
.rb-s7-0418 h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--foreground);
}
.empty-state p,
.rb-s7-1111 p,
.rb-s7-0418 p { color: var(--text-faint); }

/* ===========================================================================
   AUTH — /login, /register, /forgot-password, /reset-password  (.ax-*)
   The 288px cobalt brand panel attaches to .ax-hero / .ax-shell's first grid
   column and is owned by the split-modal step; nothing here styles or hides
   it, so that layer can define the column, the diagonal hairlines, the display
   claim and the <=960px collapse in one place.
   =========================================================================== */
.ax-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0 44px;
}
.ax-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 14px);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ax-card {
  padding: 30px 34px 28px;
  gap: 14px;
  background: var(--surface);
}
.ax-card-head h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--foreground);
  margin: 0 0 5px;
}
.ax-card-head p { font-size: 13px; color: var(--muted-foreground); }
.ax-back {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
  border-radius: var(--radius-sm, 8px);
  padding: 5px 8px;
}
.ax-back:hover { color: var(--primary); background: var(--primary-soft); }

.ax-form { gap: 13px; }
.ax-field label,
.axm-field label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ax-input-wrap > i,
.axm-input-wrap > i { color: var(--text-faint); font-size: 13px; left: 14px; }
.ax-input-wrap input,
.axm-input-wrap input {
  height: 44px;
  padding: 0 42px 0 40px;
  background: var(--as-input);
  border: 1px solid var(--as-input-border);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}
.ax-input-wrap input::placeholder,
.axm-input-wrap input::placeholder { color: var(--text-faint); font-weight: 500; }
.ax-input-wrap input:focus,
.axm-input-wrap input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.ax-eye,
.axm-eye {
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-sm, 8px);
  color: var(--text-faint);
}
.ax-eye:hover,
.axm-eye:hover { color: var(--foreground); background: var(--muted); }

.ax-check,
.axm-check {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-foreground);
  gap: 9px;
}
.ax-check--terms span,
.axm-check span { color: var(--muted-foreground); line-height: 1.5; }
.ax-link,
.axm-link { color: var(--link-color, var(--primary)); font-size: 12.5px; font-weight: 700; }
.ax-link:hover,
.axm-link:hover { color: var(--primary); }
.ax-link--bold,
.axm-link--bold { font-weight: 800; }

/* Cobalt CTA — 46px, the tallest control on the card. */
.ax-btn--primary,
.axm-btn {
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  color: var(--primary-foreground, #fff);
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px color-mix(in srgb, var(--primary) 24%, transparent);
}
.ax-btn--primary:hover,
.axm-btn:hover {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  filter: none;
  transform: none;
}
.ax-btn--primary:active,
.axm-btn:active { transform: translateY(1px); }

/* Corporate SSO / passkey button below the "OR" rule. */
.ax-btn--oauth,
.as-sso {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ax-btn--oauth:hover,
.as-sso:hover { border-color: var(--border-strong); background: var(--muted); }
.ax-btn--oauth i,
.as-sso i { color: var(--primary); font-size: 15px; }

/* "OR" divider. */
.ax-divider,
.as-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ax-divider::before,
.ax-divider::after,
.as-divider::before,
.as-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--as-divider);
}
.ax-foot,
.axm-foot { font-size: 13px; color: var(--muted-foreground); }
.ax-alert,
.axm-alert {
  border-radius: var(--radius, 10px);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
}
.ax-alert--ok {
  background: color-mix(in srgb, var(--success) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  color: var(--success);
}
.ax-alert--err,
.axm-alert--err {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger);
}
.ax-custom-fields { gap: 13px; }

/* Core ships `.ax-shell input… { border-radius: 8px !important }` (and the
   same for .axm-shell) to beat the Tailwind rounded-* utilities; !important
   is the only way back to the Aslitium radii. */
.ax-shell input:not([type="checkbox"]):not([type="radio"]),
.ax-shell textarea,
.ax-shell select,
.axm-shell input:not([type="checkbox"]):not([type="radio"]),
.axm-shell textarea,
.axm-shell select { border-radius: var(--radius, 10px) !important; }
.ax-shell .ax-btn,
.axm-shell .axm-btn { border-radius: 11px !important; }
.ax-shell button.ax-eye,
.axm-shell button.axm-eye { border-radius: var(--radius-sm, 8px) !important; }

/* ── auth modal shell (partials/auth_modals) ──────────────────────────── */
dialog.axm-dialog::backdrop {
  background: rgba(5, 14, 33, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.axm-shell {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.axm-card { padding: 28px 30px 24px; gap: 13px; background: var(--surface); }
.axm-card-head h1,
.axm-card-title {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--foreground);
  margin: 0 0 4px;
}
.axm-card-head p { font-size: 13px; color: var(--muted-foreground); }
.axm-close {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
}
.axm-close:hover { background: var(--muted); color: var(--foreground); }
.axm-form { gap: 12px; }

/* Captcha widgets sit on the card, not on the page ground. */
.ax-captcha,
.rb-captcha-field { display: grid; justify-items: center; }

/* ===========================================================================
   TWO-FACTOR CHALLENGE  (auth/tfa_challenge)
   =========================================================================== */
.rb-s7-0193 .card { padding: 30px; }
.rb-s7-1045 {
  font-weight: 700;
  color: var(--foreground);
}
.rb-s7-1045 i { color: var(--primary); margin-right: 8px; }
.rb-s7-1173 { color: var(--muted-foreground); }
/* Flash card variants: keep the atom's colour, add the tinted ground. */
.card.rb-s7-0690 {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-left: 3px solid var(--danger);
  font-weight: 600;
}
.card.rb-s7-0442 {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  border-left: 3px solid var(--success);
  font-weight: 600;
}
.rb-s7-0977 {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--as-input);
}
.rb-s7-1123 { color: var(--text-faint); border-top-color: var(--as-divider); }
.rb-s7-0508 { color: var(--muted-foreground); font-weight: 700; }
.rb-s7-0508:hover { color: var(--primary); }

/* ===========================================================================
   404 / error pages
   =========================================================================== */
.rb-s7-0750 {
  font-weight: 700;
  color: var(--primary);
  opacity: .18;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .rb-s7-0750 { opacity: .3; }
.rb-s7-1039 .page-subtitle { max-width: 460px; margin-inline: auto; }

/* ===========================================================================
   CONVERSATIONS
   =========================================================================== */
.messages-layout {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  /* Bounded so the rail and the reader scroll internally like a mail client
     instead of pushing the page. */
  height: clamp(460px, calc(100vh - 210px), 880px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.convo-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.convo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 16px 10px;
}
.convo-head .page-title,
.rb-s7-1256 {
  font-weight: 700;
  color: var(--foreground);
}
.convo-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  margin: 0 16px 10px;
  border-radius: var(--radius, 10px);
}
.convo-search > i { font-size: 12px; }
.convo-search input { flex: 1; font-size: 13px; height: 100%; }
.convo-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.convo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--as-divider);
  text-decoration: none;
  color: var(--foreground);
  position: relative;
  transition: background .12s;
}
.convo-row:hover { background: var(--surface-2); }
.convo-row.active { background: var(--primary-soft); }
.convo-row.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
}
.convo-row .rb-avatar,
.convo-row img { border-radius: var(--as-avatar-radius, 10px); }
.convo-main { flex: 1; min-width: 0; }
.convo-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  min-width: 0;
}
.convo-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.convo-preview {
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.unread-dot {
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground, #fff);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.convo-view {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--background);
}
.convo-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.convo-view-head .rb-s7-1254 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.convo-view-head .rb-avatar,
.convo-view-head img { border-radius: var(--as-avatar-radius, 10px); }
.kx-ls-meta { font-size: 11.5px; margin-top: 2px; color: var(--text-faint); }
.kx-ls-on { color: var(--as-online); }
.kx-ls-dot { font-size: 7px; vertical-align: 1px; margin-right: 4px; color: var(--as-online); }
.kx-ls-dot-off { color: var(--text-faint); }

.convo-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.day-sep::before,
.day-sep::after { content: ""; flex: 1; height: 1px; background: var(--as-divider); }

.bubble-row { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.bubble-row.me { margin-left: auto; flex-direction: row-reverse; }
.bubble-row .rb-avatar,
.bubble-row img { border-radius: var(--as-avatar-radius, 10px); }
.bubble {
  position: relative;
  max-width: 100%;
  min-width: 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  box-shadow: var(--shadow-sm);
}
.bubble-row.me .bubble {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground, #fff);
  border-radius: 14px 14px 4px 14px;
}
.bubble-sender { font-size: 11.5px; font-weight: 800; }
.bubble-text { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.bubble-text a { color: var(--link-color, var(--primary)); text-decoration: underline; }
.bubble-row.me .bubble-text a { color: rgba(255, 255, 255, .92); }
.bubble-time {
  margin-top: 4px;
  text-align: right;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.bubble-row.me .bubble-time { color: rgba(255, 255, 255, .78); }
.bubble-edited { opacity: .7; }
.bubble-actions {
  position: absolute;
  top: -20px;
  right: 4px;
  display: none;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
.bubble-row.me .bubble-actions { right: auto; left: 4px; }
.bubble-row:hover .bubble-actions,
.bubble-row:focus-within .bubble-actions { display: flex; }
.bubble-action {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 11.5px;
  cursor: pointer;
}
.bubble-action:hover { background: var(--muted); color: var(--primary); }
.bubble-action.is-active { color: var(--primary); }
.bubble-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bubble-reactions:empty { display: none; }

.convo-composer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.rb-send-row { display: inline-flex; align-items: center; gap: 6px; }
.conv-react-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow-md);
}
/* Details rail (fixed panel) */
.rb-s7-0879 { background: var(--surface); border-left-color: var(--border); }
.rb-s7-1094 { color: var(--foreground); }
.rb-s7-0430:hover { background: var(--surface-2); }
.rb-s7-0430 .rb-avatar,
.rb-s7-0430 img { border-radius: var(--as-avatar-radius, 10px); }
.rb-s7-1078 { background: var(--surface-2); border-bottom-color: var(--as-divider); }
.rb-s7-1318 {
  background: var(--as-input);
  border-color: var(--as-input-border);
  color: var(--foreground);
}
.rb-s7-1318:focus { border-color: var(--primary); box-shadow: 0 0 0 3.5px var(--primary-soft); }

/* ===========================================================================
   HELP
   =========================================================================== */
.about-grid {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.about-row {
  border-bottom: 1px solid var(--as-divider);
  color: var(--foreground);
  transition: background .12s;
}
.about-row:last-child { border-bottom: 0; }
a.about-row:hover { background: var(--surface-2); }
.about-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  display: inline-grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 9px;
}
.rb-help-pg-ico { color: var(--cat-color, var(--primary)); }
.page-title-icon { color: var(--primary); margin-right: 9px; }
.about-row .rb-s7-1254 { font-size: 14.5px; font-weight: 700; color: var(--foreground); }

.kx-help-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
}
.kx-help-link i { width: 16px; text-align: center; color: var(--text-faint); font-size: 12px; }
.kx-help-link:hover { background: var(--surface-2); color: var(--foreground); }
.kx-help-link.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.kx-help-link.is-active i { color: var(--primary); }
.kx-help-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Help article body — generous measure. */
.rb-s7-0466 { color: var(--foreground); }
.rb-s7-0466 h2,
.rb-s7-0466 h3 {
  font-weight: 700;
  margin: 22px 0 8px;
}
.rb-s7-0466 h2 { font-size: 20px; }
.rb-s7-0466 h3 { font-size: 16.5px; }
.rb-s7-0466 p { margin: 0 0 12px; }
.rb-s7-0466 a { color: var(--link-color, var(--primary)); text-decoration: underline; }
.rb-s7-0466 ul,
.rb-s7-0466 ol { padding-left: 22px; margin: 0 0 12px; }
.rb-s7-0466 li { margin-bottom: 5px; }
.rb-s7-0466 blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-style: italic;
  color: var(--foreground);
}
.rb-s7-0466 code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.rb-s7-0466 pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 13px 15px;
  overflow-x: auto;
}
.rb-s7-0466 img { border-radius: var(--radius, 10px); }

/* ===========================================================================
   TAGS
   =========================================================================== */
.rb-s7-0730 { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.tag-cloud-section .section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 12px;
}
.tag-cloud-section .section-title i { color: var(--primary); font-size: 15px; }
.rb-tagcloud {
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  border-color: transparent;
}
.rb-tagcloud:hover { color: var(--primary); border-color: var(--primary); }
.tag-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tag-search { margin-bottom: 14px; }
.page-meta { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ===========================================================================
   SEARCH
   =========================================================================== */
.search-hero { padding: 4px 0 18px; }
.big-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.big-search > i { color: var(--primary); }
.big-search input { font-size: 16px; font-weight: 600; height: 30px; }
.big-search kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.search-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.search-results { display: flex; flex-direction: column; gap: 9px; }
.rb-sr-count { color: var(--muted-foreground); }
.rb-sr-count b { color: var(--foreground); }
.rb-sr-count .rb-sr-q { color: var(--primary); }
.rb-sr {
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.rb-sr:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.rb-sr__icon { border-radius: var(--radius, 10px); }
/* Remap the core's generic type palette onto the Aslitium accents. */
.rb-sr__icon--thread { background: var(--primary-soft); color: var(--as-info-cobalt); }
.rb-sr__icon--post { background: var(--as-mod-soft); color: var(--as-info-sky); }
.rb-sr__icon--member { background: var(--surface-2); color: var(--muted-foreground); }
.rb-sr__icon--tag { background: var(--as-gold-soft); color: var(--as-info-gold); }
.rb-sr__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  background: var(--surface-2);
  color: var(--muted-foreground);
}
.rb-sr__badge--thread { background: var(--primary-soft); color: var(--as-info-cobalt); }
.rb-sr__badge--post { background: var(--as-mod-soft); color: var(--as-info-sky); }
.rb-sr__badge--member { background: var(--surface-2); color: var(--muted-foreground); }
.rb-sr__badge--tag { background: var(--as-gold-soft); color: var(--as-info-gold); }
.rb-sr__title { font-weight: 700; }
.rb-sr__title mark,
.rb-sr__snippet mark { background: var(--primary-soft); color: var(--primary); }
.rb-sr__meta { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ===========================================================================
   STYLE-TWEAKS DRAWER  (.rb-tw-*)
   =========================================================================== */
.rb-tw-drawer { position: fixed; inset: 0; z-index: 100055; }
.rb-tw-drawer__backdrop { background: rgba(5, 14, 33, .55); }
.rb-tw-drawer__panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.rb-tw-drawer__head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.rb-tw-drawer__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
}
.rb-tw-drawer__title i { color: var(--primary); font-size: 14px; }
.rb-tw-drawer__x {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm, 8px);
  color: var(--muted-foreground);
}
.rb-tw-drawer__x:hover { background: var(--muted); color: var(--foreground); }
.rb-tw-drawer__tabs {
  gap: 4px;
  padding: 10px 12px;
  margin: 8px 6px 2px;
  border-radius: 11px;
  background: var(--muted);
  border: 1px solid var(--as-border-soft);
}
.rb-tw-tab {
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm, 8px);
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 800;
}
.rb-tw-tab:hover { color: var(--primary); }
.rb-tw-tab.is-active {
  background: var(--surface);
  border-color: transparent;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.rb-tw-row { border-bottom: 1px solid var(--as-divider); }
.rb-tw-row__icon {
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  color: var(--primary);
}
.rb-tw-row__title { font-weight: 700; color: var(--foreground); }
.rb-tw-row__desc { color: var(--text-faint); }
.rb-tw-seg__opt {
  min-height: 36px;
  border-radius: 999px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 12.5px;
  font-weight: 700;
}
.rb-tw-seg__opt:hover { border-color: var(--primary); color: var(--primary); }
.rb-tw-seg__opt.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 800;
}
.rb-tw-color__pick {
  width: 42px;
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  border-color: var(--as-input-border);
  background: var(--as-input);
}
.rb-tw-color__hex {
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  border-color: var(--as-input-border);
  background: var(--as-input);
  color: var(--foreground);
  font-family: var(--font-mono);
}
.rb-tw-color__hex:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.rb-tw-drawer__foot {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.rb-tw-btn {
  min-height: 40px;
  border-radius: var(--radius, 10px);
  font-weight: 800;
  border-color: var(--border);
}
.rb-tw-btn--ghost { background: var(--surface); color: var(--muted-foreground); }
.rb-tw-btn--ghost:hover { color: var(--danger); border-color: var(--danger); }
.rb-tw-btn--primary {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.rb-tw-btn--primary:hover {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  filter: none;
}

/* ===========================================================================
   MOBILE NAV DRAWER  (macros/layout/mobile_nav)
   =========================================================================== */
[data-component="mobile-nav"] {
  border-top: 1px solid var(--as-mast-line);
  background: var(--as-mast-bar);
  color: var(--as-mast-text-active);
}
[data-component="mobile-nav"] nav { padding: 10px 12px 14px; gap: 3px; }
[data-component="mobile-nav"] form { margin-bottom: 8px; }
[data-component="mobile-nav"] input[type="text"] {
  height: 40px;
  border-radius: var(--radius, 10px);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  color: var(--as-mast-text-active);
  font-weight: 600;
}
[data-component="mobile-nav"] input[type="text"]::placeholder { color: rgba(255, 255, 255, .68); }
[data-component="mobile-nav"] input[type="text"]:focus {
  outline: none;
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .2);
  box-shadow: none;
}
[data-component="mobile-nav"] .rb-s7-0886 { color: rgba(255, 255, 255, .7); }
[data-component="mobile-nav"] .rb-s7-0645 { border-top-color: var(--as-mast-line); }
[data-component="mobile-nav"] a {
  min-height: 40px;
  border-radius: var(--radius-sm, 8px);
  color: var(--as-mast-text);
  font-weight: 700;
  font-size: 13.5px;
}
[data-component="mobile-nav"] a:hover,
[data-component="mobile-nav"] a:focus-visible {
  background: rgba(255, 255, 255, .14);
  color: var(--as-mast-text-active);
}
[data-component="mobile-nav"] a i { color: rgba(255, 255, 255, .72); }

/* ===========================================================================
   DARK-MODE DELTAS
   Most colour rides the tokens; only translucency, gradients and shadows
   need a different treatment in the dark palette.
   =========================================================================== */
html[data-theme="dark"] .big-input:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .as-input:focus,
html[data-theme="dark"] .ax-input-wrap input:focus,
html[data-theme="dark"] .axm-input-wrap input:focus,
html[data-theme="dark"] .rb-recipient-picker__field:focus-within,
html[data-theme="dark"] .convo-search:focus-within,
html[data-theme="dark"] .big-search:focus-within {
  background: var(--as-input);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--primary) 26%, transparent);
}
html[data-theme="dark"] .ax-btn--primary,
html[data-theme="dark"] .axm-btn,
html[data-theme="dark"] .rb-tw-btn--primary {
  background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px rgba(0, 0, 0, .38);
}
html[data-theme="dark"] .ax-btn--primary:hover,
html[data-theme="dark"] .axm-btn:hover,
html[data-theme="dark"] .rb-tw-btn--primary:hover {
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
}
html[data-theme="dark"] dialog.axm-dialog::backdrop { background: rgba(0, 0, 0, .7); }
html[data-theme="dark"] .rb-tw-drawer__backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .ax-btn--oauth,
html[data-theme="dark"] .as-sso { background: var(--as-surface-3); }
html[data-theme="dark"] .bubble { box-shadow: none; }
html[data-theme="dark"] .rb-sr:hover { box-shadow: var(--shadow-md); }
html[data-theme="dark"] .rb-sr__icon--member,
html[data-theme="dark"] .rb-sr__badge--member { background: var(--as-surface-3); }
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .rb-s7-1111,
html[data-theme="dark"] .rb-s7-1105,
html[data-theme="dark"] .rb-s7-0418,
html[data-theme="dark"] .rb-s7-0460 { background: var(--surface-2); }
html[data-theme="dark"] [data-component="mobile-nav"] input[type="text"] {
  background: rgba(255, 255, 255, .08);
}

/* ===========================================================================
   RESPONSIVE — 960 is the collapse, 768 and 560 are phone tuning
   =========================================================================== */
@media (max-width: 960px) {
  /* Conversations become one column: the rail is a full-width list until a
     thread is open, then the reader takes over. */
  .messages-layout {
    grid-template-columns: minmax(0, 1fr);
    height: clamp(420px, calc(100vh - 150px), 900px);
    border-radius: var(--radius, 10px);
  }
  .convo-list { border-right: 0; border-bottom: 1px solid var(--border); }
  .messages-layout:has(#conv-messages) .convo-list { display: none; }
  .convo-body { padding: 16px 14px; }
  .bubble-row { max-width: 92%; }
  .rb-s7-0879 { width: min(320px, 92vw); }

  /* The auth page card is the whole shell below the collapse; the brand
     panel that will sit beside it is hidden by the split-modal layer. */
  .ax-page { padding: 14px 0 34px; }
  .ax-card { padding: 24px 20px 22px; }
  .axm-card { padding: 24px 20px 20px; }
  .ax-card-head h1 { font-size: 22px; }
  .axm-card-head h1,
  .axm-card-title { font-size: 21px; }

  /* Help article + its index stack. */
  .rb-s7-0683 { grid-template-columns: minmax(0, 1fr); }

  /* Core hides the drawer from 768px up with `display:none !important`, but
     the hamburger appears at 960 — reopen the 768-960 band only while Alpine
     has NOT written its inline `display: none`, so the closed state still
     wins. The permanent fix is a 960-aware class on the wrapper. */
  [data-component="mobile-nav"].md\:hidden:not([style*="display:none"]):not([style*="display: none"]) {
    display: block !important;
  }
}

@media (max-width: 768px) {
  .convo-view-head { padding: 10px 12px; }
  .convo-head { padding: 13px 13px 8px; }
  .convo-search { margin: 0 13px 9px; }
  .big-search { padding: 10px 14px; }
  .big-search input { font-size: 15px; }
  .big-search kbd { display: none; }
  .search-filters { gap: 6px; }
  .about-row { padding: 13px 14px; }
  .rb-tw-drawer__panel { width: min(420px, 100vw); }
  .as-table-scroll,
  .acc-table-scroll { margin-inline: -4px; }
}

@media (max-width: 560px) {
  /* Tap targets: nothing interactive falls under 36px on a phone. */
  .icon-btn { width: 40px; height: 40px; }
  .chip { padding: 9px 14px; }
  .page-num { min-width: 38px; height: 38px; }
  .bubble-action { min-width: 30px; height: 30px; }
  .bubble-actions { display: flex; position: static; margin-top: 6px; box-shadow: none; background: transparent; border: 0; padding: 0; }
  .bubble-row.me .bubble-actions { justify-content: flex-end; }

  .bubble-row { max-width: 100%; }
  .convo-body { padding: 14px 10px; gap: 8px; }
  .convo-view-head .hstack { gap: 8px; }
  .ax-card { padding: 20px 15px 18px; }
  .axm-card { padding: 20px 15px 18px; }
  .ax-card-head h1 { font-size: 20px; }
  .ax-back { position: static; align-self: flex-start; padding: 4px 6px; }
  .rb-tw-drawer__head,
  .rb-tw-drawer__foot { padding: 12px 14px; }
  .rb-tw-drawer__body { padding: 4px 14px 16px; }
  .rb-tw-row__control { padding-left: 0; }
  .rb-tw-color__hex { width: 100%; }
  .field-label { font-size: 11px; }
}


/* ===========================================================================
   ASLITIUM · 10 — home-only furniture: info blocks + page title card
   =========================================================================== */

.as-infoblocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: var(--as-gap);
}

.as-info {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  color: var(--foreground);
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.as-info:hover {
  color: var(--foreground);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.as-info__tile {
  width: 54px; height: 54px; flex: 0 0 54px;
  border-radius: var(--radius-lg, 12px);
  display: grid; place-items: center;
  color: var(--primary-foreground, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.as-info__tile svg { width: 24px; height: 24px; }
.as-info__tile--cobalt { background: linear-gradient(135deg, var(--as-primary-2), var(--as-info-cobalt)); }
.as-info__tile--sky    { background: linear-gradient(135deg, var(--as-mod), var(--as-info-sky)); }
.as-info__tile--gold   { background: linear-gradient(135deg, var(--as-gold), var(--as-info-gold)); }

.as-info__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.as-info__body b { font-size: 15px; font-weight: 800; }
.as-info__body span { font-size: 13px; line-height: 1.55; color: var(--muted-foreground); }
.as-info:hover .as-info__body b { color: var(--primary); }

/* page title card */
.as-pagetitle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.as-pagetitle h1 {
  margin: 0;
  font: 700 24px/1.2 var(--font-sans, system-ui, sans-serif);
  letter-spacing: -.2px;
}
.as-pagetitle .btn { flex: 0 0 auto; }

@media (max-width: 960px) {
  .as-infoblocks { grid-template-columns: 1fr; gap: 10px; }
  .as-info { padding: 14px 16px; }
  .as-info__tile { width: 46px; height: 46px; flex-basis: 46px; }
  .as-info__tile svg { width: 20px; height: 20px; }
  .as-pagetitle { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .as-pagetitle h1 { font-size: 21px; }
}


/* ===========================================================================
   ASLITIUM · 11 — split auth modal (.axm-*) + postbit @handle chip
   The master auth dialog already ships the split structure: .axm-hero is the
   brand panel, .axm-card the form. Aslitium gives it the cobalt treatment and
   collapses the brand panel below 960px.
   =========================================================================== */

.axm-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(780px, calc(100vw - 32px));
  width: 100%;
  color: var(--foreground);
}
.axm-dialog::backdrop {
  background: rgba(5, 14, 33, .62);
  backdrop-filter: blur(4px);
}

.axm-shell {
  position: relative;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  background: var(--surface);
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.axm-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  display: grid; place-items: center;
}
.axm-close:hover { color: var(--foreground); border-color: var(--border-strong); }

/* ── brand panel ──────────────────────────────────────────────────────── */
.axm-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 22px;
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(165deg, var(--as-mast) 0%, var(--as-mast-deep) 80%);
  color: #fff;
}
.axm-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px);
}
.axm-hero::after {
  content: "A";
  position: absolute; right: -30px; bottom: -64px;
  font: italic 700 230px/1 var(--font-sans, system-ui, sans-serif);
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.axm-hero > * { position: relative; z-index: 1; }

.axm-brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 800; font-size: 15px; }
.axm-brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0, 10, 30, .25);
  overflow: hidden;
}
.axm-brand-mark img { width: 24px; height: 24px; object-fit: contain; }
.axm-brand-mark i { color: var(--as-mast); font-size: 18px; }

.axm-hero h2 {
  margin: 0 0 8px;
  font: 600 23.5px/1.32 var(--font-sans, system-ui, sans-serif);
  color: #fff;
}
.axm-hero p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

.axm-features { margin: 19px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.axm-features li {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .88);
}
.axm-features i {
  width: 27px; height: 27px; flex: 0 0 27px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  font-size: 12px;
}
.axm-hero-foot {
  margin-top: auto; padding-top: 24px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
  color: rgba(255, 255, 255, .52);
  text-transform: uppercase;
}

/* ── form side ────────────────────────────────────────────────────────── */
.axm-card { padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.axm-card-head { margin-right: 44px; }
.axm-card-title { margin: 0 0 4px; font: 700 24px/1.25 var(--font-sans, system-ui, sans-serif); color: var(--foreground); }
.axm-card-head p { margin: 0; font-size: 13px; color: var(--muted-foreground); }

.axm-form { display: flex; flex-direction: column; gap: 13px; }
.axm-field { display: flex; flex-direction: column; gap: 6px; }
.axm-field label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted-foreground);
}
.axm-input-wrap { position: relative; display: flex; align-items: center; }
.axm-input-wrap > i {
  position: absolute; left: 13px;
  color: var(--text-faint); font-size: 14px; pointer-events: none;
}
.axm-input-wrap input,
.axm-form input[type="text"],
.axm-form input[type="email"],
.axm-form input[type="password"] {
  width: 100%; height: 44px;
  padding: 0 40px 0 38px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--as-input-border);
  background: var(--as-input);
  color: var(--foreground);
  font: 600 14px var(--font-sans);
  transition: border-color .15s, box-shadow .15s;
}
.axm-input-wrap input::placeholder { color: var(--text-faint); font-weight: 500; }
.axm-input-wrap input:focus,
.axm-form input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}
.axm-input-wrap button,
.axm-reveal {
  position: absolute; right: 9px;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm, 8px);
  display: grid; place-items: center;
  color: var(--text-faint);
}
.axm-input-wrap button:hover, .axm-reveal:hover { color: var(--muted-foreground); background: var(--muted); }

.axm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px;
}
.axm-row label { display: flex; align-items: center; gap: 7px; color: var(--muted-foreground); font-weight: 600; }
.axm-row a { color: var(--link-color); font-weight: 700; }
.axm-form input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--primary); }

.axm-submit, .axm-form .btn-primary {
  height: 46px;
  border-radius: var(--radius, 10px);
  font-size: 14px;
  width: 100%;
}

.axm-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px;
  color: var(--text-faint);
  text-transform: uppercase;
}
.axm-divider::before, .axm-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--as-divider);
}

.axm-alt { text-align: center; font-size: 13px; color: var(--muted-foreground); }
.axm-alt a { color: var(--link-color); font-weight: 800; }

/* social / SSO buttons the board already renders */
.axm-card .ax-btn--oauth, .axm-oauth a, .axm-social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; width: 100%;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--foreground);
  font-size: 13px; font-weight: 700;
}
.axm-card .ax-btn--oauth:hover, .axm-oauth a:hover, .axm-social a:hover {
  border-color: var(--border-strong); background: var(--muted);
}

/* honeypot stays invisible */
.ax-hp { position: absolute !important; left: -9999px !important; }

/* ===========================================================================
   Full-page auth (/login, /register) — same cobalt brand panel as the modal.
   Markup: .ax-page > .ax-shell > .ax-hero + .ax-card
   =========================================================================== */

.ax-page { background: var(--background); }

.ax-shell {
  border-radius: var(--radius-xl, 14px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.ax-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--as-mast) 0%, var(--as-mast-deep) 85%);
  color: #fff;
}
.ax-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 16px);
  pointer-events: none;
}
.ax-hero::after {
  content: "A";
  position: absolute; right: -34px; bottom: -80px;
  font: italic 700 260px/1 var(--font-sans, system-ui, sans-serif);
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.ax-hero > * { position: relative; z-index: 1; }

/* /register scopes its own hero background one level deeper, which outranks the
   rule above — restate it so both auth pages carry the same cobalt panel. */
.ax-page--register .ax-hero {
  background: linear-gradient(165deg, var(--as-mast) 0%, var(--as-mast-deep) 85%);
}

/* modal field rows + custom registration fields inherit the same form rhythm */
.axm-field-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.axm-custom-fields, .ax-custom-fields { display: grid; gap: 12px; padding-top: 2px; }

.ax-hero .ax-brand, .ax-hero .ax-brand-name { color: #fff; font-weight: 800; }
.ax-brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 11px;
  background: #fff;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 10, 30, .25);
}
.ax-brand-mark img, .ax-brand-mark svg { width: 24px; height: 24px; object-fit: contain; }

/* Core colours headings via `#main-content h1,h2,h3` — an ID selector, so a
   class-only rule loses and the title renders dark on the cobalt panel in light
   mode. Matching through #main-content is what makes this stick. */
#main-content .ax-hero :is(h1, h2, h3),
#main-content .ax-hero .ax-hero-title,
#main-content .axm-hero :is(h1, h2, h3),
.ax-hero :is(h1, h2, h3),
.ax-hero .ax-hero-title,
.ax-hero-body :is(h1, h2, h3) {
  font-weight: 600;
  color: #fff;
  letter-spacing: -.2px;
}
.ax-hero :is(p, span, li), .ax-hero-lead { color: rgba(255, 255, 255, .82); }
.ax-hero .ax-features li { color: rgba(255, 255, 255, .88); font-weight: 600; }
.ax-hero .ax-features i, .ax-hero .ax-features svg {
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm, 8px);
}
.ax-hero-foot { color: rgba(255, 255, 255, .52); letter-spacing: 1.6px; text-transform: uppercase; font-size: 10.5px; font-weight: 800; }

.ax-card-head h1, .ax-card-head h2, .ax-card-title {
  font-weight: 700;
  letter-spacing: -.2px;
}
.ax-btn--primary { height: 46px; border-radius: var(--radius, 10px); font-size: 14px; }

@media (max-width: 960px) {
  .ax-hero { display: none; }
  .ax-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ── postbit @handle copy chip ────────────────────────────────────────── */
.as-pb-handle {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--link-color);
  font-size: 12px; font-weight: 700;
}
.as-pb-handle:hover { border-color: var(--border-strong); background: var(--surface-2); }
.as-pb-handle svg { width: 13px; height: 13px; flex: 0 0 13px; }
.as-pb-handle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pb-handle[data-as-state="done"] { color: var(--success); border-color: var(--success); }

@media (max-width: 960px) {
  .axm-shell { grid-template-columns: minmax(0, 1fr); }
  .axm-hero { display: none; }
  .axm-card { padding: 22px 18px 18px; }
  .axm-card-title { font-size: 21px; }
  .as-pb-handle { display: none; }
}


/* ===========================================================================
   ASLITIUM · 12 — audit pass: fixes found by walking every surface at
   1400px and 390px.
   =========================================================================== */

/* ── postbit: the rail is 240px, so the avatar takes the reference size ── */
.rb-pb-ava { display: block; position: relative; }
.rb-pb-author .rb-pb-avatar,
.rb-pb-author .rb-pb-ava .rb-avatar,
.rb-pb-author .rb-pb-ava img {
  width: 116px; height: 116px;
  border-radius: var(--radius-lg, 12px);
  font-size: 40px;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border);
  margin-inline: auto;
}
.rb-pb-author .rb-pb-username { font-size: 15.5px; font-weight: 800; margin-top: 11px; }
.rb-pb-author .rb-pb-role { font-size: 12px; color: var(--text-faint); }

@media (max-width: 960px) {
  /* horizontal strip on phones — small avatar, name beside it */
  .rb-pb-author .rb-pb-avatar,
  .rb-pb-author .rb-pb-ava .rb-avatar,
  .rb-pb-author .rb-pb-ava img {
    width: 52px; height: 52px; font-size: 20px; box-shadow: none; margin: 0;
  }
  .rb-pb-author .rb-pb-username { margin-top: 0; }
}

/* ── masthead search: the field is the pill, the input is invisible ─────── */
/* The core form reset targets input with a :not() chain that outranks a plain
   .rb-search input, so it repainted the field's own dark box on the cobalt bar.
   Matching that shape (and adding one class) wins without !important. */
.rb-search input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  height: 100%;
  padding: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
}
.rb-search input:focus:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.rb-search input::placeholder { color: rgba(255, 255, 255, .72); font-weight: 500; }

/* ── thread header card (rb-th) ────────────────────────────────────────── */
article.rb-th, article.rb-th--card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}

.rb-th__top {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted-foreground);
  min-width: 0;
}
.rb-th__author {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 0;
  color: var(--muted-foreground);
}
.rb-th__author-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rb-th__author-label { color: var(--text-faint); }
.rb-th__author-name { color: var(--foreground); font-weight: 800; }
.rb-th__author-time { font-size: 12px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 5px; }
.rb-th__top .rb-avatar, .rb-th__top img { border-radius: var(--as-avatar-radius, 10px); }

/* Watch / Save sit on the right as pills */
.rb-th__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rb-th__actions a, .rb-th__actions button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12.5px; font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.rb-th__actions a:hover, .rb-th__actions button:hover {
  color: var(--primary); border-color: var(--border-strong);
}
.rb-th__actions .is-active, .rb-th__actions [aria-pressed="true"] {
  background: var(--primary-soft); color: var(--primary); border-color: transparent;
}

@media (max-width: 560px) {
  .rb-th__actions { margin-left: 0; width: 100%; }
  .rb-th__actions a, .rb-th__actions button { flex: 1 1 auto; justify-content: center; }
}

.rb-th__title {
  margin: 2px 0 0;
  font: 700 25px/1.25 var(--font-sans, system-ui, sans-serif);
  letter-spacing: -.2px;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

.rb-th__stats {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted-foreground);
}
.rb-th__stats > * { display: inline-flex; align-items: center; gap: 6px; }
.rb-th__stats b, .rb-th__stats strong { color: var(--foreground); font-variant-numeric: tabular-nums; }

.rb-th__participants {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--as-divider);
  font-size: 12.5px; color: var(--text-faint);
}
.rb-th__participants img, .rb-th__participants .rb-avatar {
  width: 26px; height: 26px; border-radius: var(--as-avatar-radius, 10px);
}

@media (max-width: 960px) {
  article.rb-th, article.rb-th--card { padding: 16px; }
  .rb-th__title { font-size: 21px; }
}

/* ── masthead: never hard-cut the board name ────────────────────────────── */
.rb-logo-link { overflow: hidden; }
.rb-logo-word { max-width: 100%; }
.rb-logo-word,
.rb-logo-word > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 960px) {
  /* the identity chip keeps its avatar even when the name is hidden */
  .rb-user { padding: 3px; }
  .rb-user .rb-avatar, .rb-user img, .rb-user .rb-avatar-letter {
    width: 30px; height: 30px; border-radius: var(--as-avatar-radius, 10px);
    display: grid; place-items: center; font-size: 13px;
  }
}

/* ── forum nodes: cobalt-soft icon tile (was a bare grey square) ───────── */
.rb-forum-node .rb-node-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: var(--radius, 10px);
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
}
.rb-forum-node .rb-node-icon svg { width: 21px; height: 21px; }
.rb-forum-node .rb-node-icon img { width: 26px; height: 26px; border-radius: 6px; }

@media (max-width: 960px) {
  .rb-forum-node .rb-node-icon { width: 40px; height: 40px; flex-basis: 40px; }
}

/* ── category eyebrow: hairline rule after the title, calmer on phones ─── */
.rb-category > .rb-category-header::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
  margin-left: 4px;
  order: 90;
}
.rb-category > .rb-category-header .rb-chevron { order: 95; }

@media (max-width: 768px) {
  .rb-category > .rb-category-header .desc { display: none; }
  .rb-category > .rb-category-header::after { display: none; }
}

/* ── pages the theme does not override get the same card furniture ─────── */
nav.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600;
  color: var(--muted-foreground);
}
nav.crumbs a:hover { color: var(--link-color); }

/* The error page centres its own hero, so it opts out of the title card. */
.as-error h1.page-title,
.as-error h1.page-title + .page-subtitle {
  background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 8px;
  text-align: center;
}
.as-error { text-align: center; padding: 48px 0 40px; }
.as-error .hstack { display: flex; justify-content: center; gap: 10px; }

/* account pages carry their own breadcrumb element */
nav.acc-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  font-size: 13px; font-weight: 600;
  color: var(--muted-foreground);
}
nav.acc-breadcrumb a:hover { color: var(--link-color); }

h1.page-title {
  margin: 0 0 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  font: 700 25px/1.2 var(--font-sans, system-ui, sans-serif);
  letter-spacing: -.2px;
}
/* a subtitle line rendered right after the title joins the same card */
h1.page-title + .page-sub,
h1.page-title + p {
  margin: -14px 0 14px;
  padding: 0 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  font-size: 13.5px;
  color: var(--muted-foreground);
}

@media (max-width: 960px) {
  h1.page-title { font-size: 21px; padding: 14px 16px; }
}

/* ── home: mark-forums-read sits with the page title, not adrift ───────── */
.rb-markread-row { display: flex; justify-content: flex-end; margin: -6px 0 14px; }

@media (max-width: 960px) {
  .rb-markread-row { justify-content: stretch; }
  .rb-markread-row .btn { width: 100%; }
}

/* ── featured carousel must not spill past the viewport on phones ──────── */
.rb-fc, .rb-fc-wrap { max-width: 100%; overflow: hidden; }
@media (max-width: 768px) {
  .rb-fc-track { gap: 10px; }
  .rb-fc-card { flex: 0 0 88%; min-width: 0; }
  .rb-fc-prev, .rb-fc-next { display: none; }
}

/* ── auth pages must not spill sideways on phones ──────────────────────── */
@media (max-width: 960px) {
  .ax-page { padding-inline: 14px; }
  .ax-shell {
    grid-template-columns: minmax(0, 1fr);
    width: 100%; max-width: 100%; min-width: 0;
  }
  .ax-card, .ax-form, .axm-card { min-width: 0; max-width: 100%; }
  .ax-form input, .axm-form input { max-width: 100%; }
}

/* The guest buttons carry their label as a bare text node (no span to hide), so
   collapsing them to icons means zeroing the font size and restoring it on the
   icon itself. Otherwise the pair pushes the masthead past the viewport. */
@media (max-width: 560px) {
  .rb-header-actions { gap: 6px; min-width: 0; }
  .rb-header-actions .rb-nav-link,
  .rb-header-actions .btn-primary {
    width: 38px; padding: 0; justify-content: center; font-size: 0; gap: 0;
  }
  .rb-header-actions .rb-nav-link i,
  .rb-header-actions .btn-primary i,
  .rb-header-actions .rb-nav-link svg,
  .rb-header-actions .btn-primary svg { font-size: 14px; width: 15px; height: 15px; }
  .rb-logo-word { font-size: 14px; }
}

/* ── no horizontal overflow anywhere ───────────────────────────────────── */
/* .rbt-content is a flex column: without min-width:0 a wide child (the auth
   shell, a table, a code block) sets the column's width and the page scrolls
   sideways instead of the child shrinking. */
.rbt-content > * { min-width: 0; max-width: 100%; }
.ax-page { width: 100%; min-width: 0; }

/* The scrolling notice lays its ticker out at full text width; clip it to the
   notice instead of letting it stretch the document. */
.rax-notice, .rax-notice__body, .rax-notice__marquee { overflow: hidden; max-width: 100%; min-width: 0; }
.rax-notice__ticker { max-width: none; }

/* the footer's style/language selects must shrink with the bar */
.rb-footer-select { max-width: 100%; min-width: 0; flex: 0 1 auto; }
.as-footbar__controls { flex-wrap: wrap; min-width: 0; max-width: 100%; }

@media (max-width: 560px) {
  .rb-footer-select { flex: 1 1 140px; }
}

/* ── help index: give the rows room to breathe ─────────────────────────── */
.rb-help-row, .help-index-item, .rb-help-item {
  padding: 14px 16px;
  gap: 12px;
}


/* ===========================================================================
   ASLITIUM · 13 — utility classes the inherited templates still emit.
   These were defined by the theme this one was cloned from; dropping that
   stylesheet left the markup referencing them with no rule, so they are
   re-stated here in Aslitium's palette. The !important flags mirror the
   originals: each of these fights a core rule that already carries one.
   =========================================================================== */

/* state / layout helpers */
.kx-none { display: none; }
.kx-nowrap { white-space: nowrap; }

/* avatar letter fallback (36px tiles in lists) */
.kx-av36-fallback {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border-radius: var(--as-avatar-radius, 10px);
}

/* help pages — filter chips + side nav */
.kx-help-chip {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  border-radius: 999px;
}
.kx-help-chip.is-active {
  background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;
}
.kx-help-nav { color: var(--foreground) !important; border-radius: var(--radius-sm, 8px); }
.kx-help-nav.is-active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}

/* pagination pills */
.kx-pgn {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  color: var(--foreground) !important;
  border-radius: var(--radius-sm, 8px);
}
.kx-pgn:hover { border-color: var(--border-strong); }
.kx-pgn.is-active {
  background: var(--primary) !important;
  border-color: transparent;
  color: var(--primary-foreground, #fff) !important;
}

/* post wrapper + accepted-answer state */
.kx-post {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.kx-post-accepted {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 1px var(--success) !important;
}

/* profile tab strip */
.kx-ptab, .kx-ptab-warn {
  color: var(--muted-foreground) !important;
  background: transparent !important;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.kx-ptab:hover, .kx-ptab-warn:hover { color: var(--foreground) !important; }
.kx-ptab.is-active {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  border-bottom-color: var(--primary);
}
.kx-ptab-warn.is-active {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
  border-bottom-color: var(--danger);
}


/* ===========================================================================
   ASLITIUM · 20 — chrome: the page shell (layouts/main) and the masthead
   (partials/header).

   Semantic homes for the generated atoms those two templates used to carry
   (kx-uNN / rb-s7-NNNN). The old rules stay in keep.css on purpose: the master
   templates this theme does not override still render with the old names.

   Atoms that were provably inert on Aslitium — every declaration already
   superseded by a later component rule on the same element — were dropped from
   the markup instead of renamed, so they are not repeated here:
     kx-u24      (z-index:50)   ← .rb-header                as-02
     kx-u25      (logo flexbox) ← .rb-logo-link             as-02
     kx-u6       (z-index:60)   ← .rb-dropdown-panel        as-02 (z-index:130)
     rb-s7-0067  (drawer skin)  ← [data-component=mobile-nav] as-09
     rb-s7-0703  (cover wash)   ← #rb-uc-cover-gradient     as-07
   =========================================================================== */

/* ── page shell ────────────────────────────────────────────────────────── */

.as-shell__main { line-height: var(--rb-content-line-height, 1.7); }

/* dismiss button on a flash banner — a bare glyph pushed to the far end */
.as-flash__close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  margin-left: auto;
  font-size: 1.1rem;
}

/* scroll-depth bar pinned to the very top; rb-layout.js drives the width */
.as-shell__reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, white));
  width: 0;
  transition: width .1s linear;
  pointer-events: none;
}

/* back-to-top pill; JS flips display to flex once the page has scrolled */
.as-back-to-top {
  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: var(--primary-foreground);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  transition: all .3s ease;
  font-size: 1rem;
}

/* ── image lightbox ────────────────────────────────────────────────────── */

.as-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  justify-content: center;
  align-items: center;
}

/* sits on the fixed black scrim, so it stays light in both themes */
.as-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10001;
  opacity: .7;
}

.as-lightbox__image {
  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, .5);
}

/* ── user hover-card (#rb-user-card) ───────────────────────────────────── */
/* The card's skin lives in as-07; these are the structural atoms the markup
   carried inline. Where as-07 addresses the same element by id it still wins —
   these rules keep the single-class weight they had. */

.as-usercard__identity {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* initial shown when the member has no avatar */
.as-usercard__avatar-letter {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--primary);
}

.as-usercard__names {
  min-width: 0;
  flex: 1;
  padding-bottom: 2px;
}

.as-usercard__name {
  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;
}

/* revealed by rb-usercard.js once a join date is known */
.as-usercard__joined {
  display: none;
  padding: 6px 16px 0;
  font-size: .62rem;
  color: var(--muted-foreground);
  text-align: center;
}

.as-usercard__msg-icon { font-size: .7rem; }
.as-usercard__profile-icon { font-size: .65rem; }

/* ── masthead ──────────────────────────────────────────────────────────── */

/* the <symbol> library at the top of the header: 0×0, out of flow, never painted */
.as-icon-sprite { position: absolute; }

/* caret on a nav item that owns a dropdown. `.rb-nav-item i` (as-02) is the
   more specific rule and keeps owning the glyph size; what belongs to this
   atom is the nudge and the dimmed opacity — and the opacity only lands
   because it outranks that rule. */
.as-nav__caret {
  margin-left: 2px;
  opacity: .6 !important;
}

/* style-tweaks trigger: a <button> that must not read as one. The translucent
   plate from `.rb-nav-right .rb-tw-trigger` (as-02) is deliberately overridden
   here — hence the !important, which is what defeats it. */
.as-nav__tweaks-trigger {
  background: none !important;
  border: 0;
  cursor: pointer;
  font: inherit;
}


/* ===========================================================================
   ASLITIUM · 21 — footer / sidebar group, semantic rename layer.

   partials/sidebar and macros/layout/mobile_nav carried generated atom class
   names (rb-s7-NNNN) left over from the old de-inlining tool. The markup now
   uses Aslitium names; the rules move here unchanged in effect, with the two
   literal colours in the drawer swapped for the masthead tokens.

   The old atoms stay declared in keep.css because the Master templates this
   theme does not override still emit them.
   =========================================================================== */

/* ── content column widget zones (partials/sidebar) ───────────────────────
   was .rb-s7-0822 / .rb-s7-0870 */
.as-content__zone-above { margin-bottom: 1rem; }
.as-content__zone-below { margin-top: 1rem; }

/* Inside the content column the shell already spaces its children with a gap,
   so the zones drop the inherited margins and stack on the same rhythm. */
.rbt-content > .as-content__zone-above,
.rbt-content > .as-content__zone-below {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--as-gap);
}

/* ── mobile nav drawer (macros/layout/mobile_nav) ─────────────────────────
   was .rb-s7-0886 / .rb-s7-0658 / .rb-s7-0645 / .rb-s7-0899 */
.as-mobilenav__search-icon {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.as-mobilenav__search-input {
  background: var(--muted);
  border: 1px solid var(--border);
  color: var(--foreground);
}
.as-mobilenav__divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.as-mobilenav__link-icon { width: 20px; }

/* The drawer sits on the dark masthead bar, so inside it the neutral tokens
   give way to the masthead pair (the layer that skins the drawer sets the
   input and the link icons the same way). */
[data-component="mobile-nav"] .as-mobilenav__search-icon { color: var(--as-mast-text); }
[data-component="mobile-nav"] .as-mobilenav__divider { border-top-color: var(--as-mast-line); }


/* ==========================================================================
   as-22-forum — semantic names for the forum group
   forum/index, forum/show, macros/layout/forum_node_row, macros/thread/thread_row
   Rules carried over from the inherited kx-uNN / rb-s7-NNNN atoms and from the
   Aslitium design layers that keyed on them. The old atoms stay in keep.css for
   the master templates this theme does not override.
   ========================================================================== */

/* ── forum/index · discuss sidebar + list ────────────────────────────────── */
.as-img-cover { object-fit: cover; }

.as-sidebar__widgets {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
body[data-forum-view="flat"] .fl-sidebar .as-sidebar__widgets { display: none !important; }

.as-discuss__node-tag {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.as-discuss__empty {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--muted-foreground);
}
.as-discuss__empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.3;
}

/* ── forum/index · board with no forums at all ──────────────────────────── */
.as-forum-table--empty { padding: 48px 22px; }
.rb-forum-table.as-forum-table--empty {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.as-forum-empty__icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
  opacity: .4 !important;
}
.rb-forum-table .as-forum-empty__icon { color: var(--primary); }

.as-forum-empty__title {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-secondary) !important;
}
/* the atom pins a colour token this theme does not define, with !important */
.rb-forum-table .as-forum-empty__title {
  color: var(--foreground) !important;
  font-size: 18px;
}

.as-forum-empty__desc { font-size: .8rem; }
.rb-forum-table .as-forum-empty__desc { color: var(--text-faint); }

/* ── forum_node_row · category header ───────────────────────────────────── */
.as-category__toggle {
  cursor: pointer;
  user-select: none;
}

.as-category__icon-img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}
.rb-category-header .as-category__icon-img {
  order: 1;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
html[data-theme="dark"] .rb-category-header .as-category__icon-img { box-shadow: 0 0 0 3px var(--as-border-soft); }

/* ── forum_node_row · forum row ─────────────────────────────────────────── */
.as-node__lock {
  font-size: 12px;
  color: var(--text-faint) !important;
}

.as-subforums__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-faint) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.as-lastpost__row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.as-lastpost__title-link {
  color: inherit !important;
  display: block;
}

/* empty forum — cobalt plus mark plus a quiet invitation */
.as-lastpost--empty {
  color: var(--text-faint) !important;
  font-weight: 600;
  font-style: italic;
}
.rb-lastpost .rb-lp-title.as-lastpost--empty {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.45;
  white-space: normal;
}
.rb-lastpost .rb-lp-title.as-lastpost--empty::before {
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* ── forum/show · page head card ────────────────────────────────────────── */
.as-forum-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
/* Serif h1 + description on the left, Watch / New-thread on the right. The
   template prints the primary action before the watch toggle, so flex order
   restores the mockup's reading order without touching the markup. */
.as-forum-head {
  align-items: center;
  gap: 12px;
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.as-forum-head > .kx-min0 { flex: 1 1 260px; order: 1; }
.as-forum-head > button { order: 2; }
.as-forum-head > .btn-primary { order: 3; }
.as-forum-head > .btn,
.as-forum-head > button.btn { flex: none; }

.as-forum-head__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary) !important;
  line-height: 1.2;
}
.as-forum-head .as-forum-head__title {
  margin: 0 0 5px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.2px;
}

.as-forum-head__desc {
  font-size: 13.5px;
  color: var(--text-secondary) !important;
  margin-top: 4px;
}
.as-forum-head .as-forum-head__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

/* watch toggle in its "on" state — the template also flips inline colours */
.as-forum-head > button.btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* ── forum/show · child-forum block ─────────────────────────────────────── */
.as-childforums__table { margin-bottom: 22px; }
.as-childforums__head {
  grid-template-columns: 1fr;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.as-childforums__head-icon { margin-right: 7px; }

/* ── forum/show · filter / sort strip ───────────────────────────────────── */
.as-forum-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* the atom's own gap:6px never applied — .rb-sortbar sets gap:8px from a later
   layer — so only the layout declaration is carried over here */
.as-forum-toolbar__sort { display: flex; }
.as-forum-toolbar__prefixes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── forum/show · pagination gap ────────────────────────────────────────── */
/* the atom's own border:0 never applied — .rb-page sets a border from a later
   layer — so only the !important background is carried over here */
.as-pagination__gap { background: none !important; }
.rb-pagination .as-pagination__gap { color: var(--text-faint); }

/* ── forum/show · empty thread list ─────────────────────────────────────── */
.as-threadlist--empty {
  padding: 48px 22px;
  text-align: center;
}
.as-threadlist-empty__icon {
  font-size: 2.4rem;
  color: var(--text-faint) !important;
  opacity: .4 !important;
  margin-bottom: 12px;
}
.as-threadlist-empty__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-secondary) !important;
  margin-bottom: 4px;
}
.rb-threadlist.as-threadlist--empty .as-threadlist-empty__title {
  font-size: 18px;
  font-weight: 700;
}
.as-threadlist-empty__desc {
  font-size: .8rem;
  color: var(--text-faint) !important;
  margin-bottom: 16px;
}
.rb-threadlist.as-threadlist--empty .btn { margin-top: 4px; }

/* ── thread_row · title flags + article snippet ─────────────────────────── */
.as-thread-flag--pinned {
  font-size: 11px;
  color: var(--primary) !important;
  margin-right: 6px;
}
.as-thread-flag--locked {
  font-size: 11px;
  color: var(--text-faint) !important;
  margin-right: 6px;
}
.as-thread-flag--solved {
  font-size: 12px;
  color: var(--success) !important;
  margin-right: 6px;
}
.as-thread-flag--poll {
  font-size: 11px;
  color: var(--info) !important;
  margin-right: 6px;
}
.as-thread__snippet {
  margin-top: 2px;
  color: var(--text-faint) !important;
}

/* ── responsive deltas ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .as-forum-head {
    align-items: flex-start;
    padding: 16px 16px;
    margin-bottom: 12px;
  }
  .as-forum-head .as-forum-head__title { font-size: 21px; }
}

@media (max-width: 560px) {
  .as-forum-head { padding: 14px 14px; }
  .as-forum-head .as-forum-head__title { font-size: 19px; }
  .as-forum-head > .btn,
  .as-forum-head > button.btn { flex: 1 1 auto; }
}


/* ===========================================================================
   ASLITIUM · 23 — thread view, postbit rail and inline moderation bar
   Semantic homes for the generated atoms (kx-uNN / rb-s7-NNNN) that
   thread/show, macros/post/postbit and partials/inline_mod_bar used to carry.
   Declarations are copied 1:1; the only edits are colour literals swapped for
   the token they equal — the dead hex fallbacks inside var(--success ...),
   var(--warning ...), var(--danger ...) were dropped (all three tokens are
   defined), and the white gradient stop became var(--primary-foreground).
   The old atom names stay in keep.css — the Master templates still use them.

   Cascade note: the atoms lived at the TOP of the sheet (keep.css) and lost to
   the semantic .rb-pb-* / .qna-vote-col rules in as-06. This layer loads LAST,
   so the three carry-overs that would have flipped that order are wrapped in
   :where() to keep their original, lower weight.
   =========================================================================== */

/* ── reading progress bar ─────────────────────────────────────────────── */
.as-reading-progress {
  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%, var(--primary-foreground)));
  box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 50%, transparent);
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* ── thread state banners ─────────────────────────────────────────────── */
.as-state-banner__note { opacity: .7; font-weight: 400; }

/* ── per-post status strips the card opens with ───────────────────────── */
.as-post__state-strip--moderated {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
}
.as-post__state-strip--deleted {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
}
.as-post__state-strip--accepted {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
  border-bottom: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}
/* The atoms carry only colour, so the row layout is supplied here. */
.post-wrapper > .as-post__state-strip--moderated,
.post-wrapper > .as-post__state-strip--deleted,
.post-wrapper > .as-post__state-strip--accepted {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
}

/* ── article-thread OP card (the rich branch) ─────────────────────────── */
.as-article-post__head {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 20%, transparent);
}
.post-wrapper > .as-article-post__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--as-divider);
}
.post-wrapper > .as-article-post__head .rb-pbm-badges .userBanner {
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.as-article-post__body {
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.8;
}
.as-article-post__permalink {
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
  position: relative;
}

/* ── post head ────────────────────────────────────────────────────────── */
.as-op-badge {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.as-post__permalink {
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
}
.as-post__edited { font-size: 11px; }

/* ── signature block ──────────────────────────────────────────────────── */
.as-post__signature {
  border-top: 1px dashed var(--border);
  color: var(--muted-foreground);
  padding-top: 8px;
}
.post-body .as-post__signature {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ── Q&A vote column ──────────────────────────────────────────────────── */
/* :where() — the semantic .qna-vote-col rules in as-06 must keep winning on
   background and border-right, as they did when this lived in keep.css. */
:where(.as-qna-vote-col) {
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  min-width: 56px;
}
.as-vote-caret { font-size: 1.4rem; }

/* ── inline glyph sizes ───────────────────────────────────────────────── */
.as-icon-sm { font-size: 0.8rem; }
.as-icon-xs { font-size: 0.65rem; }
.as-icon-2xs { font-size: 0.6rem; }
.as-icon-3xs { font-size: 0.55rem; }

/* ── "similar threads" card under the OP ──────────────────────────────── */
.as-similar,
.post-wrapper + .as-similar {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.as-similar__head {
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}
.as-similar > .as-similar__head { border-bottom: 1px solid var(--as-divider); }
.as-similar__list { border-color: var(--border); }
.as-similar__row { cursor: pointer; }
.as-similar__author {
  text-decoration: none;
  color: var(--muted-foreground);
}

/* ── postbit rail ─────────────────────────────────────────────────────── */
/* :where() — as-06 owns .rb-pb-badges / .rb-pb-trophies, including the ≤960
   rail collapse that hides the trophies and re-flows the badges. Raising these
   above it would resurrect both on mobile. */
:where(.as-postbit__badges) {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
:where(.as-postbit__trophies) {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.as-postbit__custom {
  margin-top: 12px;
  width: 100%;
  text-align: left;
}

/* ── inline moderation bar ────────────────────────────────────────────── */
.as-modbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 11px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
}
.as-modbar > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  max-width: var(--container, 1240px);
  margin-inline: auto;
}
.as-modbar > div > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.as-modbar .btn {
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 800;
  color: var(--muted-foreground);
}
.as-modbar .btn:hover { color: var(--foreground); border-color: var(--border-strong, var(--border)); }
.as-modbar .btn-primary {
  border-color: transparent;
  color: var(--primary-foreground);
}

.as-modbar__btn { font-size: 0.75rem; }
.as-modbar__btn-approve {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  font-size: 0.75rem;
}
.as-modbar__btn-warn {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  font-size: 0.75rem;
}
.as-modbar__btn-danger {
  background: color-mix(in srgb, var(--destructive) 15%, transparent);
  color: var(--destructive);
  font-size: 0.75rem;
}
/* !important is load-bearing: it is what lifts the restore button above the
   generic `.as-modbar .btn` treatment. */
.as-modbar__btn-restore {
  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
  color: var(--primary) !important;
  font-size: 0.75rem;
}

.as-modbar__select-link {
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.as-modbar__clear-link {
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.as-modbar__pipe { color: var(--border); }
.as-modbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 4px;
}

/* ── moderation bar modals ────────────────────────────────────────────── */
.as-modbar__overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .55);
}
.as-modbar__dialog {
  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);
}
.as-modbar__dialog-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--foreground);
}
.as-modbar__field { margin-bottom: 12px; }
.as-modbar__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--muted-foreground);
}
.as-modbar__textarea {
  width: 100%;
  resize: none;
}
.as-modbar__select {
  width: 100%;
  margin-bottom: 12px;
}
.as-modbar__warning {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  border: 1px solid var(--destructive);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.as-modbar__warning-text {
  font-size: 0.8rem;
  color: var(--destructive);
  margin: 0;
}
.as-modbar__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── dark-mode delta ──────────────────────────────────────────────────── */
html[data-theme="dark"] .as-modbar { box-shadow: 0 -6px 24px rgba(0, 0, 0, .5); }

/* ── ≤768: phone tuning ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .as-modbar { padding: 9px 12px; }
  .as-modbar > div { gap: 8px; }
  .as-modbar .btn { min-height: 36px; }
}


/* ===========================================================================
   ASLITIUM · 24 — profile/show semantics
   Named replacements for the generated atoms (kx-uNN / rb-s7-NNNN) that the
   old de-inlining tool left in profile/show. Declarations are carried over
   1:1; hardcoded colours are re-expressed through the Aslitium token set.
   The originals stay in keep.css — the Master templates still use them.
   =========================================================================== */

/* ── identity card + page shell ────────────────────────────────────────── */
.as-profile__breadcrumb { margin: 14px 0 10px; }

.as-profile__bio {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary) !important;
  line-height: 1.55;
}

.as-profile__last-seen {
  margin-left: auto;
  color: var(--text-faint) !important;
  font-size: 12.5px;
}

.as-profile__website-link {
  color: inherit !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* follower / visitor thumbnails in the aside */
.as-profile__facepile { display: flex; flex-wrap: wrap; gap: 7px; }

.as-profile__panes { padding: 20px 22px; }

/* avatar upload overlay */
.as-profile__avatar-form { z-index: 3; }
.as-profile__avatar-overlay { border-radius: var(--rb-avatar-border-radius, 9999px); }
.as-profile__avatar-caption { font-size: .6rem; font-weight: 500; }

/* warn/ban buttons that ride along the action row */
.as-profile__mod-tools { display: inline-flex; gap: .4rem; margin-left: .4rem; }

/* wall composer */
.as-profile__composer { margin-top: 14px; }
.as-profile__composer-submit { display: flex; justify-content: flex-end; margin-top: 8px; }

/* the small stat card above the views / warnings panes */
.as-profile-stat-card { margin-bottom: 12px; }
.as-profile-stat-card__row { justify-content: space-between; }

/* ── activity rows (threads / posts / warnings panes) ──────────────────── */
.as-activity__body { flex: 1; }
.as-activity__excerpt { margin-top: 4px; font-size: 13px; }

/* ── following / followers / visitors grids ────────────────────────────── */
.as-follow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.as-follow-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.as-follow-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.as-follow-card__text { min-width: 0; }
.as-follow-card__name { font-weight: 600; }
.as-follow-card__handle { font-size: .75rem; }

/* ── shared colour utility ─────────────────────────────────────────────── */
.as-text-danger { color: var(--danger); }
/* a danger-tinted ground for the warning rows' leading tile */
.activity-icon.as-text-danger {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ===========================================================================
   Compact (non-rich) profile layout — the branch used when the active theme
   does not advertise the rich profile.
   =========================================================================== */
.as-ptab-bar { border-bottom: 2px solid var(--border); }
.as-ptab__icon { font-size: .75rem; }

.as-ptab__count {
  background: var(--danger);
  color: var(--primary-foreground);
  font-size: .6rem;
  padding: 1px 6px;
  border-radius: var(--rb-border-radius-full, 9999px);
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.as-wall-composer__input {
  min-height: 100px;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-top: 0;
  padding: 12px;
  border-radius: 0 0 8px 8px;
}

/* leading icon tiles on the compact post / trophy / warning rows */
.as-post-tile__icon { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.as-trophy-tile__icon { background: color-mix(in srgb, var(--warning) 15%, transparent); }
.as-warnings-summary__icon { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.as-warnings-summary__count { font-size: .7rem; color: var(--muted-foreground); }

/* ── warnings table ────────────────────────────────────────────────────── */
.as-warnings-table {
  width: 100%;
  font-size: .8rem;
  border-collapse: collapse;
}

.as-warnings-table__head {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
}

.as-warnings-table__th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--muted-foreground);
}

.as-warnings-table__th--center {
  padding: 10px 14px;
  text-align: center;
  font-weight: 600;
  color: var(--muted-foreground);
}

.as-warnings-table__th--right {
  padding: 10px 14px;
  text-align: right;
  font-weight: 600;
  color: var(--muted-foreground);
}

.as-warnings-table__row {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}

.as-warnings-table__td { padding: 10px 14px; }
.as-warnings-table__td--center { padding: 10px 14px; text-align: center; }

.as-warnings-table__td--expiry {
  padding: 10px 14px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: .75rem;
}

.as-warnings-table__td--date {
  padding: 10px 14px;
  text-align: right;
  color: var(--muted-foreground);
  font-size: .75rem;
}

/* status pills inside the table */
.as-warn-pill {
  padding: 3px 10px;
  border-radius: var(--rb-border-radius-full, 9999px);
  font-size: .65rem;
  font-weight: 600;
}

.as-warn-pill--points {
  font-size: .7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.as-warn-pill--expired {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}

/* "active" keeps the cobalt ground the theme recolour pass gave it */
.as-warn-pill--active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--warning);
}

/* ===========================================================================
   Warn member modal (#profileWarnModal)
   =========================================================================== */
.as-warn-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}

.as-warn-modal__panel {
  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, .5);
  padding: 24px;
}

.as-warn-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.as-warn-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 8px;
}

.as-warn-modal__close {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 1.2rem;
}

.as-warn-modal__field { margin-bottom: 12px; }
.as-warn-modal__notes { margin-bottom: 16px; }

.as-warn-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.as-warn-modal__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}

.as-warn-modal__user {
  font-weight: 600;
  color: var(--foreground);
  font-size: .9rem;
}

.as-warn-modal__input { font-size: .85rem; }
.as-warn-modal__textarea { font-size: .8rem; }

.as-warn-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* black ink is the fixed pairing for the amber fill in both themes */
.as-warn-modal__submit {
  background: var(--warning);
  color: black;
  font-weight: 600;
}

.as-warn-modal__submit-icon { margin-right: 4px; }

/* ===========================================================================
   Ban member modal (#banModal)
   =========================================================================== */
.as-ban-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}

.as-ban-modal__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.as-ban-modal__head {
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 55%, black));
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.as-ban-modal__head-icon {
  color: rgba(255, 255, 255, .9);
  font-size: 1.25rem;
}

.as-ban-modal__title {
  color: var(--primary-foreground);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.as-ban-modal__body { padding: 1.5rem; }
.as-ban-modal__field { margin-bottom: 1rem; }
.as-ban-modal__duration { margin-bottom: 1.25rem; }

.as-ban-modal__label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-bottom: .35rem;
}

.as-ban-modal__textarea {
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .85rem;
  color: var(--foreground);
  resize: vertical;
  font-family: inherit;
}

.as-ban-modal__duration-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.as-ban-modal__duration-btn {
  padding: .4rem .75rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  cursor: pointer;
  transition: all .2s;
}

.as-ban-modal__custom { display: none; margin-top: .5rem; }

.as-ban-modal__date {
  width: 100%;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .75rem;
  font-size: .85rem;
  color: var(--foreground);
}

.as-ban-modal__actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

.as-ban-modal__cancel {
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  cursor: pointer;
}

.as-ban-modal__submit {
  padding: .5rem 1rem;
  border-radius: var(--rb-border-radius-large, 6px);
  font-size: .85rem;
  font-weight: 600;
  background: var(--danger);
  border: none;
  color: var(--primary-foreground);
  cursor: pointer;
  transition: opacity .2s;
}

.as-ban-modal__submit-icon { margin-right: .35rem; }


/* ===========================================================================
   ASLITIUM · 25 — the smaller pages: conversations, help, tags, 404, 2FA.

   Every rule here replaces a generated atom (rb-s7-NNNN / kx-*) that the
   Aslitium markup used to carry. The atoms themselves stay defined in
   keep.css and in the earlier layers because the Master templates — the
   pages this theme does not override — still emit them.

   Declarations that the earlier layers already override for these exact
   elements are deliberately NOT restated here: this layer loads last, so
   re-asserting them would flip the cascade and change the rendering.
   =========================================================================== */


/* ===========================================================================
   Shared utilities
   =========================================================================== */

.as-text-xs { font-size: 0.75rem; }

/* Oversized, washed-out glyph used as an empty-state mascot. */
.as-icon-faded { color: var(--muted-foreground); opacity: 0.3; }


/* ===========================================================================
   CONVERSATIONS · new message  (conversation/create)
   =========================================================================== */

.as-convo-compose__card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: none;
}
.as-convo-compose__card > .field + .field { margin-top: 0; }

/* .hstack already supplies the gap. */
.as-convo-compose__actions { justify-content: flex-end; }

.as-convo-compose__notice {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
}


/* ===========================================================================
   CONVERSATIONS · thread view  (conversation/show)
   =========================================================================== */

/* ── sidebar list ─────────────────────────────────────────────────────── */
.as-convo__inbox-link {
  font-size: 22px;
  margin: 0;
  text-decoration: none;
  font-weight: 700;
  color: var(--foreground);
}
.as-convo__search-form { flex: 1; display: flex; }
.as-convo__row-date { font-size: 11px; }

/* ── conversation header ──────────────────────────────────────────────── */
.as-convo__peer-name { font-weight: 600; }
.convo-view-head .as-convo__peer-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* last-seen / presence line under the peer name */
.as-convo__presence { font-size: 11.5px; margin-top: 2px; color: var(--text-faint); }
.as-convo__presence--online { color: var(--as-online); }
.as-convo__presence-dot {
  font-size: 7px;
  vertical-align: 1px;
  margin-right: 4px;
  color: var(--as-online);
}
.as-convo__presence-dot--off { color: var(--text-faint); }

/* ── in-thread search bar ─────────────────────────────────────────────── */
.as-convo__searchbar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--as-divider);
  background: var(--surface-2);
}
.as-convo__search-input {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--as-input-border);
  background: var(--as-input);
  color: var(--foreground);
  font-size: 13px;
  outline: none;
}
.as-convo__search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px var(--primary-soft);
}

/* ── message stream ───────────────────────────────────────────────────── */
.as-convo__empty {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  color: var(--muted-foreground);
}
.as-convo__empty i { color: var(--primary); }
html[data-theme="dark"] .as-convo__empty { background: var(--surface-2); }

.as-convo__empty-ico { font-size: 2rem; opacity: 0.3; }
.as-convo__empty-text { font-size: 0.8rem; margin-top: 0.5rem; }

.as-convo__older { text-align: center; margin-bottom: 0.75rem; }

/* ── composer ─────────────────────────────────────────────────────────── */
.as-convo__composer { display: block; padding: 8px 12px; }
.as-convo__composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ── details rail (fixed panel) ───────────────────────────────────────── */
.as-convo__details {
  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(--surface);
  z-index: 50;
  box-shadow: -4px 0 16px -8px rgba(0, 0, 0, .12);
}
.as-convo__details.hidden { display: none; }

.as-convo__details-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--foreground);
}
.as-convo__details-count { font-size: 11px; margin-bottom: 6px; }

.as-convo__participants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.as-convo__participant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.as-convo__participant:hover { background: var(--surface-2); }
.as-convo__participant .rb-avatar,
.as-convo__participant img { border-radius: var(--as-avatar-radius, 10px); }
.as-convo__participant-name { font-size: 13px; }

/* .btn already paints the border. */
.as-convo__leave { width: 100%; color: var(--danger); }

/* ── plain-layout fallback branch ─────────────────────────────────────── */
.as-convo-basic__shell {
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: calc(100vh - 200px);
}
.as-convo-basic__head {
  height: 64px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.as-convo-basic__body { background: var(--background); }
.as-convo-basic__older-link {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.as-convo-basic__day-rule { background: var(--border); }
.as-convo-basic__composer { border-top: 1px solid var(--border); background: var(--surface); }
.as-convo-basic__details { border-left: 1px solid var(--border); background: var(--surface); }
.as-convo-basic__section-title {
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.as-convo-basic__leave { color: var(--danger); border: 1px solid var(--border); }
.as-convo-basic__leave-ico { width: 16px; }

@media (max-width: 960px) {
  .as-convo__details { width: min(320px, 92vw); }
}

@media (max-width: 768px) {
  .convo-view-head .as-convo__peer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44vw;
  }
  .convo-view-head > .hstack:first-child > div:has(> .mono:not(.faint)) > .as-convo__row-date {
    display: none;
  }
}


/* ===========================================================================
   HELP · index  (help/index)
   =========================================================================== */

.as-help__empty {
  padding: 48px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  color: var(--muted-foreground);
}
.as-help__empty i { color: var(--primary); }
html[data-theme="dark"] .as-help__empty { background: var(--surface-2); }

.as-help__empty-ico { font-size: 32px; opacity: 0.4; margin-bottom: 12px; }
.as-help__empty-text { font-weight: 600; }

/* .about-row already supplies the box model. */
.as-help__card { text-decoration: none; }
.as-help__card-title { font-weight: 600; }
.about-row .as-help__card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--foreground);
}
.as-help__card-excerpt { font-size: 12px; margin-top: 2px; }


/* ===========================================================================
   HELP · article  (help/show)
   =========================================================================== */

.as-help__layout { grid-template-columns: 1fr 260px; }
.as-help__article-card { padding: 24px; }

/* Help article body — generous measure. */
.as-help__article {
  font-size: 14px;
  line-height: 1.7;
  color: var(--foreground);
}
.as-help__article h2,
.as-help__article h3 {
  font-weight: 700;
  margin: 22px 0 8px;
}
.as-help__article h2 { font-size: 20px; }
.as-help__article h3 { font-size: 16.5px; }
.as-help__article p { margin: 0 0 12px; }
.as-help__article a { color: var(--link-color, var(--primary)); text-decoration: underline; }
.as-help__article ul,
.as-help__article ol { padding-left: 22px; margin: 0 0 12px; }
.as-help__article li { margin-bottom: 5px; }
.as-help__article blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-style: italic;
  color: var(--foreground);
}
.as-help__article code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}
.as-help__article pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  padding: 13px 15px;
  overflow-x: auto;
}
.as-help__article img { border-radius: var(--radius, 10px); }

/* Tables inside help content keep the same paper. */
.as-help__article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 14px 0;
}
.as-help__article th {
  background: var(--surface-2);
  text-align: left;
  font-weight: 800;
}
.as-help__article th,
.as-help__article td { border: 1px solid var(--border); padding: 8px 11px; }

/* side index */
.as-help__nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 7px 10px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
}
.as-help__nav-link i {
  width: 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}
.as-help__nav-link:hover { background: var(--surface-2); color: var(--foreground); }
.as-help__nav-link.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}
.as-help__nav-link.is-active i { color: var(--primary); }
.as-help__nav-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* plain-layout fallback branch: side nav + mobile chips */
.as-help-basic__nav-link {
  color: var(--foreground) !important;
  border-radius: var(--radius-sm, 8px);
}
.as-help-basic__nav-link.is-active {
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.as-help-basic__chip {
  background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  border-radius: 999px;
}
.as-help-basic__chip.is-active {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

@media (max-width: 960px) {
  .as-help__layout { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   TAGS · one tag  (tags/show)
   =========================================================================== */

.as-tagpage__hero-tag {
  font-size: 18px;
  padding: 4px 10px;
  vertical-align: middle;
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-soft);
}
/* .tag re-states font-size and padding, so out-weigh it. */
.tag.as-tagpage__hero-tag { font-size: 18px; padding: 4px 10px; }

.as-tagpage__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px;
  gap: 8px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg, 12px);
  color: var(--muted-foreground);
}
.as-tagpage__empty i { color: var(--primary); }
.as-tagpage__empty h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--foreground);
}
.as-tagpage__empty p { color: var(--text-faint); }
html[data-theme="dark"] .as-tagpage__empty { background: var(--surface-2); }

.as-tagpage__empty-ico { font-size: 32px; opacity: .4; color: var(--text-faint); }
.as-tagpage__empty-text {
  font-weight: 600;
  font-size: 14px;
  color: var(--foreground);
  margin: 0;
}

.as-tagpage__cloud { gap: 8px; }
.as-tagpage__cloud-tag { font-size: 13px; padding: 6px 12px; }
.tag.as-tagpage__cloud-tag { font-size: 13px; padding: 6px 12px; }
.as-tagpage__cloud-count { margin-left: 6px; }

/* plain-layout fallback branch */
.as-tagpage-basic__hero-tag {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}
.as-tagpage-basic__cloud-tag { background: var(--muted); color: var(--foreground); }
.as-tagpage-basic__page-link {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  color: var(--foreground) !important;
  border-radius: var(--radius-sm, 8px);
}
.as-tagpage-basic__page-link:hover { border-color: var(--border-strong); }
.as-tagpage-basic__page-link.is-active {
  background: var(--primary) !important;
  border-color: transparent;
  color: var(--primary-foreground) !important;
}


/* ===========================================================================
   404 / error pages  (errors/404)
   .as-error itself lives in as-12-audit.css and already centres the block
   and owns its padding, so only the pieces it does not cover appear here.
   =========================================================================== */

.as-error--404 .page-subtitle { max-width: 460px; margin-inline: auto; }

.as-error__code {
  font-size: 120px;
  color: var(--primary);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: .18;
  font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .as-error__code { opacity: .3; }

.as-error__title { margin-top: 24px; }
.as-error__actions { justify-content: center; margin-top: 24px; }

/* plain-layout fallback branch */
.as-error-basic__shell { min-height: 60vh; }
.as-error-basic__badge { background: color-mix(in srgb, var(--warning) 10%, transparent); }
.as-error-basic__badge-ico { color: var(--warning); opacity: 0.7; }
.as-error-basic__code { color: var(--foreground); opacity: 0.2; }
/* .btn already paints the border. */
.as-error-basic__back-btn { background: var(--muted); color: var(--foreground); }


/* ===========================================================================
   TWO-FACTOR CHALLENGE  (auth/tfa_challenge)
   =========================================================================== */

.as-tfa { max-width: 420px; margin: 80px auto 0; }
.as-tfa .card { padding: 30px; }

.as-tfa__card { padding: 32px; }

.as-tfa__title {
  font-size: 22px;
  margin-bottom: 4px;
  text-align: center;
  font-weight: 700;
  color: var(--foreground);
}
.as-tfa__title i { color: var(--primary); margin-right: 8px; }

.as-tfa__subtitle {
  font-size: 13px;
  margin-bottom: 24px;
  text-align: center;
  color: var(--muted-foreground);
}

/* .card already paints the border; only the left rail is repainted. */
.as-tfa__error {
  padding: 10px 12px;
  margin-bottom: 16px;
  color: var(--danger);
  font-size: 13px;
}
.card.as-tfa__error {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  border-left: 3px solid var(--danger);
  font-weight: 600;
}

.as-tfa__form { gap: 16px; }

/* .big-input already sets the font-size. */
.as-tfa__code {
  height: 48px;
  text-align: center;
  letter-spacing: 0.4em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--as-input);
}

.as-tfa__backup {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--as-divider);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

.as-tfa__foot { text-align: center; margin-top: 16px; font-size: 12px; }
.as-tfa__back-link { color: var(--muted-foreground); font-weight: 700; }
.as-tfa__back-link:hover { color: var(--primary); }

/* plain-layout fallback branch */
.as-tfa-basic__shell { width: 100%; max-width: var(--rb-auth-form-max-width, 420px); }
.as-tfa-basic__logo { background: var(--primary); }
.as-tfa-basic__alert {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.as-tfa-basic__panel {
  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);
}
.as-tfa-basic__shield { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.as-tfa-basic__shield-ico { font-size: 1.5rem; color: var(--primary); }
.as-tfa-basic__code {
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  letter-spacing: 0.5em;
}
.as-tfa-basic__submit { height: 44px; }


/* ===========================================================================
   ASLITIUM · 26 — semantic names for the classes inherited from the theme
   this one was cloned from. The old names stay defined in keep.css because
   the Master templates still emit them on pages Aslitium does not override.
   =========================================================================== */

.rbt-content-shell.as-shell--sidebar-left{grid-template-columns: var(--rb-sidebar-w, 316px) minmax(0, 1fr);}
.rbt-content-shell.as-shell--sidebar-left .rbt-content{order: 2;}
.rbt-content-shell.as-shell--sidebar-left .rbt-widget-sidebar{order: 1;}
.as-usermenu{width: 320px; z-index: 130;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);}
.as-usermenu__banner{position: relative;
  padding: 16px;
  background: linear-gradient(120deg, var(--as-mast-deep), var(--as-mast));
  color: #fff;}
.as-usermenu__logout{position: absolute; top: 10px; right: 10px;}
.as-usermenu__logout button{width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; display: grid; place-items: center; font-size: 12px;}
.as-usermenu__logout button:hover{background: rgba(255, 255, 255, .25);}
.as-usermenu__identity{display: flex; align-items: center; gap: 12px; min-width: 0;}
.as-usermenu__avatar img, .as-usermenu__avatar .rb-avatar{width: 52px; height: 52px; border-radius: var(--as-avatar-radius, 10px);}
.as-usermenu__identity-text{min-width: 0;}
.as-usermenu__name{font-size: 15px; font-weight: 800; color: #fff; display: block;}
.as-usermenu__name .rb-username{color: #fff;}
.as-usermenu__role{font-size: 12px; color: rgba(255, 255, 255, .78); margin-top: 1px;}
.as-usermenu__lastvisit{font-size: 11px; color: rgba(255, 255, 255, .6); margin-top: 4px;}
.as-usermenu__tabs{display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; border-bottom: 1px solid var(--as-divider);}
.as-usermenu__tab{text-align: center; padding: 8px 6px; border-radius: var(--radius-sm, 8px);
  font-size: 12.5px; font-weight: 700; color: var(--muted-foreground); background: var(--surface-2);}
.as-usermenu__tab:hover{color: var(--primary); background: var(--primary-soft);}
.as-usermenu__list{padding: 6px; display: flex; flex-direction: column;}
.as-usermenu__item{display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  font-size: 13.5px; font-weight: 600; color: var(--foreground);}
.as-usermenu__item:hover{background: var(--muted); color: var(--primary);}
.as-usermenu__item i{width: 16px; text-align: center; color: var(--text-faint);}
.as-usermenu__item:hover i{color: var(--primary);}
.as-usermenu__actions{display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-top: 1px solid var(--as-divider);}
.as-usermenu__action{display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm, 8px);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--muted-foreground);}
.as-usermenu__action b{color: var(--foreground); font-variant-numeric: tabular-nums;}
.as-usermenu__action:hover{border-color: var(--border-strong); color: var(--foreground);}
.as-usermenu__action--primary{background: var(--primary-soft); border-color: transparent; color: var(--primary);}
.as-usermenu__action--primary b{color: var(--primary);}
.rb-dropdown-panel .border-b, .rb-dropdown-panel .border-t, .as-border-divider{border-color: var(--as-divider);}
.as-text-fg{color: var(--foreground);}
.as-text-muted{color: var(--muted-foreground);}
.as-text-primary{color: var(--primary);}
.as-text-inherit{color: inherit;}
.rb-forum-table .as-text-faint{display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted-foreground);}
.as-flex-none{flex: none;}
.as-min-w0{min-width: 0;}
a.as-text-inherit,
a.as-text-inherit:hover{color: inherit;}
.rb-breadcrumb a:hover,
.rb-breadcrumb a.as-text-inherit:hover{color: var(--link-color, var(--primary));}
.kx-u10 > .as-min-w0{flex: 1 1 260px; order: 1;}
.rb-sortpill,
.thread-prefix-filter .as-prefix-chip--all{display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted-foreground);
  transition: background .15s, color .15s, border-color .15s;}
.rb-sortpill:hover,
.thread-prefix-filter .as-prefix-chip--all:hover{color: var(--foreground);
  border-color: var(--border-strong);}
.rb-sortpill:focus-visible,
.thread-prefix-filter .as-prefix-chip--all:focus-visible,
.thread-prefix-chip:focus-visible{outline: 2px solid var(--ring);
  outline-offset: 2px;}
.rb-sortpill.is-active,
.thread-prefix-filter .as-prefix-chip--all.is-active{background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  border-color: transparent;
  color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px rgba(0, 71, 171, .20);}
.rb-sortpill.is-active:hover,
.thread-prefix-filter .as-prefix-chip--all.is-active:hover{color: var(--primary-foreground);}
html[data-theme="dark"] .rb-sortpill.is-active,
html[data-theme="dark"] .thread-prefix-filter .as-prefix-chip--all.is-active{background: linear-gradient(180deg, var(--primary), var(--as-primary-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 10px rgba(0, 0, 0, .35);}
.as-prefix-chip{opacity: .88;}
.as-prefix-chip:hover{opacity: 1;}
.rb-th-title > a:hover,
.rb-th-title > a.as-text-inherit:hover{color: var(--link-color, var(--primary));}
.rb-th-last .au a:hover,
.rb-th-last .au a.as-text-inherit:hover{color: var(--link-color, var(--primary));}
.post-wrapper.as-post--accepted{box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--success);}
.rb-pb-online-dot,
.as-postbit__dot{position: absolute;
  right: 6px;
  bottom: 6px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 3px solid var(--surface);}
.as-status-dot--on{background: var(--as-online);}
.as-status-dot--off{background: var(--text-faint);}
.as-trophy-icon--sm{width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.15em;}
.as-block{display: block;}
.as-pointer{cursor: pointer;}
.as-signature--on{color: var(--primary);}
.as-vote--off{color: var(--text-faint); background: transparent;}
.as-vote--off:hover{background: var(--muted); color: var(--foreground);}
.as-vote--up-on{background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success);}
.as-vote--down-on{background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger);}
.as-score--positive{color: var(--success);}
.as-score--negative{color: var(--danger);}
.as-score--zero{color: var(--muted-foreground);}
.as-accept--off{color: var(--text-faint); background: transparent;}
.as-accept--off:hover{background: var(--muted); color: var(--success);}
.as-accept--on{background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success);}
.as-delete--soft{color: var(--warn);}
.as-delete--hard{color: var(--danger);}
.as-delete-btn--soft{background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn);}
.as-delete-btn--hard{background: var(--danger); color: var(--primary-foreground, #fff);}
.rb-id-actions .btn.as-block-btn{color: var(--danger);}
.rb-id-actions .btn.as-block-btn.is-blocked{color: var(--success);}
.as-stat__dot{width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--text-faint);}
.as-stat__dot.is-on{background: var(--as-online);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-online) 24%, transparent);}
.as-stat__label{font-weight: 700; color: var(--muted-foreground);}
.as-stat__label.is-on{color: var(--as-online);}
.as-viewcount{font-weight: 700; color: var(--text-faint);}
.as-overflow-hidden{overflow: hidden;}
.as-trophy-icon{width: 100%; height: 100%; object-fit: contain;}
.as-hidden{display: none;}
.as-nowrap{white-space: nowrap;}
.as-avatar-36__fallback{display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  border-radius: var(--as-avatar-radius, 10px);}
.as-help-chip{background: var(--muted) !important;
  color: var(--muted-foreground) !important;
  border-radius: 999px;}
.as-help-chip.is-active{background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;}
.as-help-nav{color: var(--foreground) !important; border-radius: var(--radius-sm, 8px);}
.as-help-nav.is-active{background: var(--primary-soft) !important;
  color: var(--primary) !important;}
.as-post{background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);}
.as-post--accepted{border-color: var(--success) !important;
  box-shadow: 0 0 0 1px var(--success) !important;}
.as-profile-tab, .as-profile-tab--warn{color: var(--muted-foreground) !important;
  background: transparent !important;
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;}
.as-profile-tab:hover, .as-profile-tab--warn:hover{color: var(--foreground) !important;}
.as-profile-tab.is-active{color: var(--primary) !important;
  background: var(--primary-soft) !important;
  border-bottom-color: var(--primary);}
.as-profile-tab--warn.is-active{color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
  border-bottom-color: var(--danger);}
.as-forum-head > .as-min-w0{flex: 1 1 260px; order: 1;}
@media (max-width: 960px) {
  .rbt-content-shell,
  .rbt-content-shell.rb-with-sidebar,
  .rbt-content-shell.as-shell--sidebar-left{grid-template-columns: minmax(0, 1fr);}
  .rbt-content-shell.as-shell--sidebar-left .rbt-content,
  .rbt-content-shell.as-shell--sidebar-left .rbt-widget-sidebar{order: 0;}
  .as-usermenu{width: min(320px, calc(100vw - 28px));}
  .rb-pb-online-dot,
  .as-postbit__dot{right: -1px; bottom: -1px; width: 13px; height: 13px; border-width: 2px;}
}

@media (max-width: 768px) {
  .rb-sortpill,
  .thread-prefix-filter .as-prefix-chip--all{min-height: 36px;
    padding: 7px 13px;}
}

/* ── avatar seed palette ────────────────────────────────────────────────────
   Sixteen distinguishable colours; the index is chosen server-side by
   AvatarColor. Declared as tokens so a board can restyle them and so no
   rule carries a raw literal. */
:root {
  --as-av-0: #f59e0b;
  --as-av-1: #ef4444;
  --as-av-2: #ec4899;
  --as-av-3: #a855f7;
  --as-av-4: #ff5722;
  --as-av-5: #3b82f6;
  --as-av-6: #0ea5e9;
  --as-av-7: #06b6d4;
  --as-av-8: #10b981;
  --as-av-9: #84cc16;
  --as-av-10: #eab308;
  --as-av-11: #f97316;
  --as-av-12: #dc2626;
  --as-av-13: #db2777;
  --as-av-14: #9333ea;
  --as-av-15: #f24b18;
}

.as-av-0 { background: var(--as-av-0) !important; color: #fff !important; }
.as-av-1 { background: var(--as-av-1) !important; color: #fff !important; }
.as-av-2 { background: var(--as-av-2) !important; color: #fff !important; }
.as-av-3 { background: var(--as-av-3) !important; color: #fff !important; }
.as-av-4 { background: var(--as-av-4) !important; color: #fff !important; }
.as-av-5 { background: var(--as-av-5) !important; color: #fff !important; }
.as-av-6 { background: var(--as-av-6) !important; color: #fff !important; }
.as-av-7 { background: var(--as-av-7) !important; color: #fff !important; }
.as-av-8 { background: var(--as-av-8) !important; color: #fff !important; }
.as-av-9 { background: var(--as-av-9) !important; color: #fff !important; }
.as-av-10 { background: var(--as-av-10) !important; color: #fff !important; }
.as-av-11 { background: var(--as-av-11) !important; color: #fff !important; }
.as-av-12 { background: var(--as-av-12) !important; color: #fff !important; }
.as-av-13 { background: var(--as-av-13) !important; color: #fff !important; }
.as-av-14 { background: var(--as-av-14) !important; color: #fff !important; }
.as-av-15 { background: var(--as-av-15) !important; color: #fff !important; }


/* ===========================================================================
   ASLITIUM · 27 — classes the markup emits that no stylesheet defined.
   Found by walking every public surface and diffing emitted classes against
   the full stylesheet pool (core bundle + theme + add-ons).
   =========================================================================== */

/* ── masthead actions: one height for every control ────────────────────────
   The identity chip grew to 48px from its own content (30px avatar + two text
   lines) while the conversation and notification buttons sat at 36px, so the
   row read as misaligned. Everything in the topbar — menu, search, buttons,
   chip — now shares --as-action-h. */
:root { --as-action-h: 38px; }

/* menu button (was a nine-dot grid, which read as a launcher rather than a menu) */
.rb-apps.as-menu {
  width: auto;
  height: var(--as-action-h);
  min-height: var(--as-action-h);
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: var(--radius-sm, 8px);
  box-sizing: border-box;
}
.as-menu__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.as-menu__label svg { width: 16px; height: 16px; }

/* the search field joins the same height and softens the shortcut badge, which
   was a near-black block against the translucent field */
.rb-search {
  height: var(--as-action-h);
  border-radius: var(--radius-sm, 8px);
  padding: 0 6px 0 12px;
  gap: 8px;
}
.rb-search > svg { width: 15px; height: 15px; }
.rb-search input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { font-size: 13px; }
.as-kbd {
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
}

@media (max-width: 960px) {
  .rb-apps.as-menu { display: none; }
  .rb-search { padding: 0; }
}

.rb-header-actions { align-items: center; }

.rb-header-actions .rb-icon-btn,
.rb-header-actions .rb-nav-link,
.rb-header-actions .btn-primary,
.rb-user {
  height: var(--as-action-h);
  min-height: var(--as-action-h);
  border-radius: var(--radius-sm, 8px);
  box-sizing: border-box;
}

.rb-user { padding: 0 10px 0 3px; gap: 8px; }
/* foundation/theme-tokens.css hand-writes .rb-avatar.w-10/.h-10 at 2.5rem so a
   Tailwind purge cannot strip avatar sizing; matching those utilities is what
   lets the chip's avatar shrink to fit the 36px control height. */
.rb-user .rb-avatar.w-10,
.rb-user .rb-avatar.h-10,
.rb-header-actions .rb-user .rb-avatar,
.rb-header-actions .rb-user img,
.rb-header-actions .rb-user .rb-avatar-letter {
  width: 28px; height: 28px;
  border-radius: calc(var(--as-avatar-radius, 10px) - 2px);
  font-size: 12px;
}
.rb-user-meta { line-height: 1.1; gap: 0; }
.rb-user-meta small { font-size: 9.5px; letter-spacing: .2px; }
.rb-user-meta b { font-size: 12.5px; }

@media (max-width: 960px) {
  /* the label is hidden on phones, so the chip becomes a square like the rest */
  .rb-user { width: var(--as-action-h); padding: 0; justify-content: center; }
}

/* ── page shell ────────────────────────────────────────────────────────────
   forum/index and forum/show wrap their content in .as-shell__body; the shell
   grid lives on the ancestor, so this element only has to fill its column and
   let long tables/code shrink instead of widening the page. */
.as-shell__body {
  display: flex;
  flex-direction: column;
  gap: var(--as-gap);
  min-width: 0;
  width: 100%;
}

/* the content column inside the two-column shell */
.as-shell__content { min-width: 0; }

/* sidebar side is a state marker on the shell — right is the default layout,
   stated here so the class is not inert and can be targeted by add-ons */
.as-shell--sidebar-right { grid-template-columns: minmax(0, 1fr) var(--rb-sidebar-w, 316px); }

@media (max-width: 960px) {
  .as-shell--sidebar-right { grid-template-columns: minmax(0, 1fr); }
}

/* ── forum table: no chrome of its own ─────────────────────────────────────
   The node rows already carry the card treatment, so the wrapper's own surface
   and border stacked a second frame around them. The wrapper is now a plain
   container. */
.rb-forum-table {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* ── stat strip: full width, centred like every other band ─────────────────
   It sits directly in the flex column body, where `margin-inline:auto` with no
   width made it shrink to its content (854px instead of the 1240px container). */
.as-statstrip {
  width: 100%;
  box-sizing: border-box;
}

/* ── 36px avatar tile (profile lists: followers, visitors, feed) ───────────
   The markup pairs it with core's .avatar, whose size and 11px radius would
   otherwise win on source order, so this matches with the same weight. */
.avatar.as-avatar-36,
.as-avatar-36 {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--as-avatar-radius, 10px);
  overflow: hidden;
  font-size: 13px;
}
.as-avatar-36 img { width: 100%; height: 100%; object-fit: cover; }

/* ── user-card popover: the rank line under the name ──────────────────────── */
.rb-uc-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── LatestThreads add-on: table wrapper + tab arrows ──────────────────────
   The add-on ships these classes without rules; give them the theme's own
   scroll + control treatment so the widget matches Aslitium. */
.rb-lt-tablewrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rb-lt-tabnav--left,
.rb-lt-tabnav--right {
  display: grid;
  place-items: center;
  width: 26px;
  min-height: 26px;
  flex: 0 0 26px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--rb-lt-widget-border, var(--border));
  background: var(--rb-lt-widget-bg, var(--surface));
  color: var(--muted-foreground);
}
.rb-lt-tabnav--left:hover,
.rb-lt-tabnav--right:hover {
  color: var(--primary);
  border-color: var(--border-strong);
}


/* ===========================================================================
   ASLITIUM · 28 — reported defects
   =========================================================================== */

/* ── in-content <footer> must not inherit the site footer's navy ────────────
   Core ships `footer, .rax-footer, [data-component="footer"] { background:
   var(--rb-footer-bg) }`, so every <footer> inside page content (profile wall
   actions, conversation composer, the tweaks drawer) rendered as a dark navy
   slab in light mode. Only the page footer keeps that treatment. */
#main-content footer:not(.rb-footer),
.rb-tw-drawer footer,
.as-convo__composer {
  background: transparent;
  color: inherit;
}

.rb-pp-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--as-divider);
}
.rb-pp-action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 12.5px; font-weight: 700;
}
.rb-pp-action:hover { color: var(--primary); border-color: var(--border-strong); }
.rb-pp-action--meta { background: var(--surface-2); cursor: default; }

/* the composer keeps its card edge, just not the navy fill */
.as-convo__composer {
  border-top: 1px solid var(--as-divider);
  padding-top: 12px;
}

/* ── nav dropdown opens under its own trigger ───────────────────────────────
   .rb-nav-dd-menu is absolutely positioned but its wrapper had no positioning
   context, so the panel anchored to the page instead of the item. */
.rb-nav-dd { position: relative; display: flex; }
.rb-nav-dd-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  z-index: 140;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 28px));
  margin-top: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
}
.rb-nav-dd-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  pointer-events: auto;
}
/* the last items in the bar would push their panel off-screen */
.rb-nav-list > .rb-nav-dd:nth-last-child(-n+2) .rb-nav-dd-menu { left: auto; right: 0; }

/* the nav + launcher panels animate with CSS, not x-transition — the Alpine
   transition waits on a rAF that a boosted swap can leave hanging, and the
   panel then never leaves display:none even though its state is open */
@keyframes as-dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.rb-nav-dd-menu, .as-launcher__panel { animation: as-dd-in .14s ease; }
@media (prefers-reduced-motion: reduce) {
  .rb-nav-dd-menu, .as-launcher__panel { animation: none; }
}

/* ── profile: sidebar widgets are their own column cards ────────────────────
   They used to render inside .rb-id-card, so the identity card swallowed them. */
.as-profile__side {
  display: flex;
  flex-direction: column;
  gap: var(--as-gap);
  min-width: 0;
}
.as-profile__widgets {
  display: flex;
  flex-direction: column;
  gap: var(--as-gap);
  min-width: 0;
}
.as-profile__widgets > * { width: 100%; }

@media (max-width: 960px) {
  .as-profile__side { width: 100%; }
}

/* ── apps launcher ──────────────────────────────────────────────────────────
   Replaces the plain vertical link list: a 3×3 dot trigger sized like the rest
   of the masthead controls, opening a tile grid (icon over label) instead of
   another dropdown menu. */
.as-launcher { position: relative; display: flex; align-items: center; flex: 0 0 auto; }

.as-launcher__trigger {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.as-launcher__trigger:hover,
.as-launcher__trigger.is-open { background: rgba(255, 255, 255, .18); }

.as-launcher__dots {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 3px;
}
.as-launcher__dots i {
  width: 3px; height: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .9);
  display: block;
}

.as-launcher__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 140;
  width: 300px;
  max-width: calc(100vw - 28px);
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
}
.as-launcher__head {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-faint);
  padding: 2px 4px 10px;
}
.as-launcher__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.as-launcher__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px;
  padding: 12px 6px 10px;
  min-height: 84px;
  border-radius: var(--radius, 10px);
  border: 1px solid transparent;
  color: var(--foreground);
  text-align: center;
}
.as-launcher__tile:hover {
  background: var(--primary-soft);
  border-color: var(--border);
  color: var(--primary);
}
.as-launcher__tile-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
}
.as-launcher__tile-icon svg { width: 17px; height: 17px; }
.as-launcher__tile:hover .as-launcher__tile-icon { background: var(--surface); }
.as-launcher__tile-label {
  font-size: 11.5px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

@media (max-width: 560px) {
  .as-launcher__panel { width: min(300px, calc(100vw - 28px)); }
  .as-launcher__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── discuss ("flat") forum layout ──────────────────────────────────────────
   The discuss branch ships its OWN left sidebar and renders the sidebar widgets
   inside it, so the shell's right widget column was a second, duplicate column:
   it squeezed the feed to 924px and pushed it far down the page. In this mode
   the shell becomes a single column and the discuss layout owns the width. */
body[data-forum-view="flat"] .rbt-content-shell,
body[data-forum-view="flat"] .rbt-content-shell.rb-with-sidebar,
body[data-forum-view="flat"] .as-shell {
  grid-template-columns: minmax(0, 1fr);
}
body[data-forum-view="flat"] .rbt-widget-sidebar { display: none; }

.fl-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--as-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* core hard-sizes the rail to 240px, which left a 24px dead strip inside the
   264px grid track — the column read as misaligned with the panel beside it */
.fl-sidebar { min-width: 0; width: auto; }
.fl-sidebar-inner {
  position: sticky;
  top: calc(var(--as-topbar-h) + 12px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  /* a board with deep category trees overflows the panel; core already scrolls
     it, but its scrollbar is a heavy light bar over Aslitium's surfaces */
  max-height: calc(100vh - var(--as-topbar-h) - 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong, var(--border)) transparent;
}
.fl-sidebar-inner::-webkit-scrollbar { width: 8px; }
.fl-sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.fl-sidebar-inner::-webkit-scrollbar-thumb {
  background: var(--border-strong, var(--border));
  border: 2px solid var(--surface);
  border-radius: 999px;
}
.fl-sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* the panel core wraps the discuss column in has no padding of its own, so the
   rail, the sort bar and the rows all sat hard against its border */
.fl-main {
  padding: 14px;
  gap: 14px;
}
.fl-main > .fl-thread:first-of-type { border-top: 0; }

.fl-start-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(180deg, var(--as-primary-2), var(--primary));
  color: var(--primary-foreground, #fff);
  font-size: 13.5px; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.fl-start-btn:hover { background: linear-gradient(180deg, var(--primary), var(--as-primary-deep)); color: var(--primary-foreground, #fff); }

.fl-cat-header {
  font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-faint);
  padding: 12px 6px 4px;
}

.fl-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  padding-left: calc(10px + var(--fl-indent, 0px));
  border-radius: var(--radius-sm, 8px);
  font-size: 13.5px; font-weight: 700;
  color: var(--foreground);
  min-width: 0;
}
.fl-nav-item:hover { background: var(--muted); color: var(--primary); }
.fl-nav-item.active { background: var(--primary-soft); color: var(--primary); }
.fl-nav-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-nav-icon { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px; display: grid; place-items: center; }
.fl-nav-fa { width: 18px; text-align: center; font-size: 13px; color: var(--fl-cat-color, var(--primary)); }
.fl-cat-dot { background: var(--fl-cat-color, var(--primary)); width: 10px; height: 10px; border-radius: 3px; }
.fl-nav-child { font-weight: 600; color: var(--muted-foreground); }

.fl-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 960px) {
  .fl-layout { grid-template-columns: minmax(0, 1fr); }
  .fl-sidebar-inner { position: static; max-height: none; overflow-y: visible; }
  .fl-main { padding: 12px; }
}

/* ── postbit custom fields ──────────────────────────────────────────────────
   partials/custom_fields_display marks its rows up with Tailwind utilities
   (grid, grid-cols-3, gap-2, text-xs, px-2 …). Most of those are purged from
   the shipped build, so the block arrived unstyled — and when a member has no
   visible field the wrapper still rendered, leaving a gap in the rail. */
.rb-pb-custom:empty { display: none; }
.rb-pb-custom {
  width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--as-divider);
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  text-align: left;
}
.rb-pb-custom .about-row,
.rb-pb-custom [class*="grid-cols-"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}
/* label column */
.rb-pb-custom .about-row > :first-child,
.rb-pb-custom .col-span-1 {
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* value column — long values must ellipsis inside the 240px rail, not overflow */
.rb-pb-custom .about-row > :last-child,
.rb-pb-custom .col-span-2 {
  color: var(--foreground);
  font-weight: 700;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rb-pb-custom a { color: var(--link-color, var(--primary)); }
.rb-pb-custom .rb-cf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10.5px; font-weight: 800;
}
.rb-pb-custom .mono { font-family: var(--font-mono); font-size: 11px; }
.rb-pb-custom .faint, .rb-pb-custom .opacity-70 { color: var(--text-faint); }

@media (max-width: 960px) {
  /* the rail is a horizontal strip on phones; fields would crowd it */
  .rb-pb-custom { display: none; }
}


/* ===========================================================================
   ASLITIUM · 29 — panels that hang off the masthead, and profile-post spacing
   =========================================================================== */

/* ── masthead panels must not inherit the bar's white text ──────────────────
   .rb-header / .rb-nav set color:#fff for the cobalt bars. The dropdowns they
   open render on a white surface, so every label inherited white-on-white and
   was unreadable in light mode. Each panel re-establishes page colours; only
   the cobalt identity banner keeps white type. */
.as-usermenu,
.as-launcher__panel,
.rb-nav-dd-menu,
.rb-dropdown-panel,
.rb-apps-menu {
  color: var(--foreground);
}

/* the panels live inside .rb-header, whose `a { color:#fff }` outranks a bare
   class here — these selectors match the anchor itself so page colours win. */
.as-usermenu a.as-usermenu__item,
.as-usermenu a.as-usermenu__tab,
.as-usermenu a.as-usermenu__action,
.as-launcher__panel a.as-launcher__tile,
.as-launcher__panel a.as-launcher__tile .as-launcher__tile-label,
.rb-nav-dd-menu a.rb-nav-dd-link,
.rb-dropdown-panel a,
.as-usermenu__item,
.as-usermenu__tab,
.as-usermenu__action,
.as-launcher__tile,
.as-launcher__tile-label,
.rb-nav-dd-link {
  color: var(--foreground);
}
.as-usermenu a.as-usermenu__item:hover,
.as-launcher__panel a.as-launcher__tile:hover,
.rb-nav-dd-menu a.rb-nav-dd-link:hover,
.rb-dropdown-panel a:hover,
.as-usermenu__item:hover,
.rb-nav-dd-link:hover { color: var(--primary); }

.as-usermenu__item i,
.as-usermenu__item svg,
.rb-nav-dd-link i,
.rb-nav-dd-link svg { color: var(--text-faint); }
.as-usermenu__item:hover i,
.as-usermenu__item:hover svg { color: var(--primary); }

/* the identity banner is cobalt, so its own type stays white */
.as-usermenu__banner,
.as-usermenu__banner .as-usermenu__name,
.as-usermenu__banner .as-usermenu__role,
.as-usermenu__banner .rb-username,
.as-usermenu__banner a { color: #fff; }
.as-usermenu__banner .as-usermenu__role,
.as-usermenu__banner .as-usermenu__lastvisit { color: rgba(255, 255, 255, .78); }

/* segmented tabs inside the menu read as controls, not masthead text */
.as-usermenu__tabs { background: var(--surface-2); border-bottom: 1px solid var(--as-divider); }
.as-usermenu__tab { color: var(--muted-foreground); font-weight: 700; }
.as-usermenu__tab.is-active,
.as-usermenu__tab[aria-selected="true"] { color: var(--primary); background: var(--surface); }

/* footer actions in the menu */
.as-usermenu__actions { border-top: 1px solid var(--as-divider); }
.as-usermenu__action { color: var(--muted-foreground); }
.as-usermenu__action:hover { color: var(--primary); }
.as-usermenu__action--primary { color: var(--primary); font-weight: 800; }

/* launcher header + tiles */
.as-launcher__head { color: var(--text-faint); }
.as-launcher__tile:hover .as-launcher__tile-label { color: var(--primary); }

/* ── profile post card: the avatar was flush against the card edge ───────── */
.rb-pp-card {
  padding: 15px 16px 12px;
  gap: 12px;
}
.rb-pp-avatar {
  flex: 0 0 38px;
  border-radius: var(--as-avatar-radius, 10px);
}
.rb-pp-body { min-width: 0; }

@media (max-width: 560px) {
  .rb-pp-card { padding: 13px 12px 10px; gap: 10px; }
}

/* Core paints every header link white via `body > header a:not(.rb-nav-active)`
   (specificity 0-1-3). Panels that open from the bar sit on a white surface, so
   they must beat that — matching through .rb-header adds the class weight. */
.rb-header .as-usermenu a,
.rb-header .as-launcher__panel a,
.rb-header .rb-nav-dd-menu a,
.rb-header .rb-dropdown-panel a,
.rb-nav .as-usermenu a,
.rb-nav .rb-nav-dd-menu a,
.rb-nav .rb-dropdown-panel a {
  color: var(--foreground);
}
.rb-header .as-usermenu a:hover,
.rb-header .as-launcher__panel a:hover,
.rb-header .rb-nav-dd-menu a:hover,
.rb-header .rb-dropdown-panel a:hover,
.rb-nav .rb-nav-dd-menu a:hover { color: var(--primary); }

/* accent utilities inside those panels keep their intent */
.rb-header .rb-dropdown-panel a.as-text-primary,
.rb-header .as-usermenu a.as-text-primary,
.rb-nav .rb-dropdown-panel a.as-text-primary { color: var(--primary); }
.rb-header .rb-dropdown-panel .as-text-muted,
.rb-header .as-usermenu .as-text-muted { color: var(--muted-foreground); }
.rb-header .rb-dropdown-panel .as-text-faint,
.rb-header .as-usermenu .as-text-faint { color: var(--text-faint); }

/* the identity banner keeps white type even under the rules above */
.rb-header .as-usermenu__banner a,
.rb-header .as-usermenu__banner .rb-username { color: #fff; }

/* panel surfaces + dividers so they read as cards, not bar extensions */
.rb-header .rb-dropdown-panel,
.rb-nav .rb-dropdown-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg);
}
.rb-header .rb-dropdown-panel__head {
  border-bottom: 1px solid var(--as-divider);
  color: var(--foreground);
  font-weight: 800;
}

/* ── narrow phones: the masthead row must fit, not spill ────────────────────
   At 390px the control run (hamburger + logo + search + messages + alerts +
   identity) measured 401px and pushed the page 10px wide. Everything shrinks a
   notch below 430px instead of overflowing. */
@media (max-width: 430px) {
  .rb-header-inner { gap: 6px; padding-inline: 10px; }
  .rb-logo, .rb-logo-link { gap: 7px; min-width: 0; }
  .rb-logo-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .rb-logo-mark svg { width: 17px; height: 17px; }
  .as-logo-mark { font-size: 18px; }
  .rb-logo-word { font-size: 12px; letter-spacing: 0; flex: 1 1 auto; }
  .rb-logo { flex: 1 1 auto; }

  .rb-header-actions { gap: 4px; }
  .rb-header-actions .rb-icon-btn,
  .rb-header-actions .rb-nav-link,
  .rb-header-actions .btn-primary,
  .rb-user,
  .as-launcher__trigger {
    width: 32px; height: 32px; min-height: 32px; flex: 0 0 32px;
  }
  .rb-header-actions .rb-icon-btn svg { width: 15px; height: 15px; }
  .rb-user .rb-avatar,
  .rb-user img,
  .rb-user .rb-avatar-letter { width: 26px; height: 26px; }
  .rb-search { flex: 0 0 32px; width: 32px; height: 32px; }
}

/* keep the bar itself from ever becoming the scroll driver — without undoing
   the 1240px container cap on the inner rows (the header must line up with the
   footer and the content column) */
.rb-header, .rb-nav { max-width: 100%; min-width: 0; }
.rb-header-inner, .rb-nav-inner {
  max-width: min(100%, var(--container, 1240px));
  min-width: 0;
}
.rb-header-actions { min-width: 0; }

/* ── filter/action rows must wrap on phones ─────────────────────────────────
   .hstack is a nowrap flex utility; on /members its six filter chips measured
   765px inside a 362px column and dragged the whole page to 779px. */
@media (max-width: 768px) {
  #main-content .hstack { flex-wrap: wrap; row-gap: 8px; }
  #main-content .hstack > * { min-width: 0; }
}

/* ── touch targets the core rule misses ─────────────────────────────────────
   Core sizes `.btn` to 44px on coarse pointers, but these controls are bare
   <button> elements without that class, so they stayed at 21–28px on phones. */
@media (hover: none) and (pointer: coarse) {
  .rb-footer-theme button,
  .rb-th__participants-more,
  .bbcode-quote__expand,
  .rb-tabs-scroll-btn,
  .rb-bmlb__del,
  .rb-bmit__btn,
  .as-launcher__trigger {
    min-height: 34px;
    min-width: 34px;
  }
  .rb-footer-theme { gap: 4px; }
}

/* long unbroken strings (pasted URLs in search snippets) must wrap, not clip */
.rb-sr__snippet,
.rb-sr__title,
.as-search__snippet {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── page-title card actions ────────────────────────────────────────────────
   "Mark forums read" moved into the title card; the pair needs to sit on one
   row, right-aligned, and share a height. */
.as-pagetitle__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.as-pagetitle__actions .btn { min-height: 32px; }

@media (max-width: 560px) {
  .as-pagetitle { flex-direction: column; align-items: stretch; gap: 10px; }
  .as-pagetitle__actions { justify-content: stretch; }
  .as-pagetitle__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ===========================================================================
   ASLITIUM · 30 — reported polish round: tab strips, page-header seam,
   members spacing, auth width, masthead search
   =========================================================================== */

/* ── tab strips scroll inside their row instead of widening the page ────────
   /notifications renders 16 tabs in one nowrap flex; they measured 1391px in a
   1240px column and dragged the whole page to 1468px. */
.rb-tabs {
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.rb-tabs > * { flex: 0 0 auto; white-space: nowrap; }
.hstack.rb-toolbar-row { min-width: 0; max-width: 100%; }
.hstack.rb-toolbar-row > .rb-tabs { flex: 1 1 auto; }
/* the block wrapper between the row and the strip is the one that refused to
   shrink (flex item, min-width:auto) — it kept the page 300px too wide */
.rb-tabs-wrap {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
}

/* ── page-title card + subtitle read as ONE card ────────────────────────────
   The title kept all four corners rounded while the subtitle strip joined
   underneath with squared top corners — a visible seam. When a subtitle
   follows, the title gives up its bottom corners and the pair shares one
   border. */
h1.page-title:has(+ .page-subtitle),
h1.page-title:has(+ .page-sub),
h1.page-title:has(+ p) {
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 10px;
}
h1.page-title + .page-subtitle,
h1.page-title + .page-sub,
h1.page-title + p {
  margin: 0 0 14px;
  padding: 0 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  font-size: 13.5px;
  color: var(--muted-foreground);
}

/* ── page-header breathes before the content below it ───────────────────────
   Master templates wrap the title + filter tabs in .page-header with no bottom
   margin; on /members the card grid sat flush against the tab row. */
.page-header { margin-bottom: 16px; }
.page-header .hstack { margin-top: 10px; }
.page-header .chip { margin-bottom: 2px; }

/* ── masthead search stays one native pill in light mode ────────────────────
   The Vite bundle forces `[data-theme=light] input[type=text] { background:#fff
   !important; border-color:#d1d5db !important }`, which painted an opaque white
   box inside the translucent cobalt pill. Matching with !important is required
   to beat it; the scope is only the masthead field. */
html[data-theme="light"] .rb-search input[type="text"],
html[data-theme="light"] .rb-search input[type="search"],
html[data-theme="light"] .rb-search input {
  background: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="light"] .rb-search input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] .rb-search input::placeholder { color: rgba(255, 255, 255, .72) !important; }

/* ── full-page auth aligns with the header container ────────────────────────
   Core caps .ax-shell at 1100px, so the card floated narrower than the header
   content and read as misaligned. The shell now spans the content column. */
.ax-page { padding: 24px 0; }
.ax-shell { max-width: 100%; }


/* ===========================================================================
   ASLITIUM · 31 — "who is viewing this thread" panel
   partials/thread/thread_viewers is a core partial no theme overrides and the
   core bundle carries no rules for it, so it arrived as bare text under the
   last post. Same card language as the rest of the thread page.
   =========================================================================== */

.rb-thread-viewers {
  margin: 16px 0 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
}

.rb-thread-viewers__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--as-surface-3, var(--surface)), var(--muted));
  border-bottom: 1px solid var(--border);
}

.rb-thread-viewers__eye {
  color: var(--primary);
  font-size: 12px;
}

.rb-thread-viewers__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--foreground);
}

.rb-thread-viewers__counts {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
}

.rb-thread-viewers__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.7;
}

/* the row carries per-member username colouring inline, so only the shape and
   the hover treatment belong here */
.rb-thread-viewers__user {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 1px 2px;
  border-radius: 4px;
}
.rb-thread-viewers__user:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  background: var(--primary-soft, var(--muted));
}

.rb-thread-viewers__sep { color: var(--text-faint, var(--muted-foreground)); }

.rb-thread-viewers__foot {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--muted);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
}

/* the head already prints the same three numbers */
.rb-thread-viewers__head + .rb-thread-viewers__foot,
.rb-thread-viewers__body + .rb-thread-viewers__foot { display: none; }

@media (max-width: 768px) {
  .rb-thread-viewers__head { padding: 9px 12px; }
  .rb-thread-viewers__body { padding: 10px 12px; font-size: 13px; }
  .rb-thread-viewers__counts { width: 100%; }
}


/* ===========================================================================
   ASLITIUM · 32 — community surfaces the theme never dressed:
   /notifications · /clubs · /events · /trending · /feed · /tags
   Core ships bare skeletons for these (and trending/feed ship none at all),
   so they read as a different product next to the themed pages. Everything
   below reuses the card language the rest of Aslitium speaks: --surface on
   --border with the large radius, 800-weight headings, chip filters, flat
   cobalt actions.
   =========================================================================== */

/* ── shared: page head used by clubs + events (rf-page-head / ev-page-head) ── */
.rf-page-head,
.ev-page-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  margin: 0 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.rf-page-head h1, .ev-page-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.2px;
  display: flex; align-items: center; gap: 10px;
}
.rf-page-head h1 i, .ev-page-head h1 i, .ev-page-head__icon { color: var(--primary); }
.rf-page-head p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; }
.rf-page-head__tools, .rf-page-head-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}

/* the clubs/events primary + ghost actions */
.rf-btn, .ev-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--foreground);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rf-btn:hover, .ev-btn:hover { border-color: var(--primary); color: var(--primary); }
.rf-btn-primary, .ev-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}
.rf-btn-primary:hover, .ev-btn--primary:hover {
  background: var(--as-primary-deep, var(--primary));
  border-color: var(--as-primary-deep, var(--primary));
  color: var(--primary-foreground, #fff);
}
.ev-btn--ghost { background: transparent; }

/* inline search input in the clubs head */
.rf-search-inline {
  min-height: 36px; padding: 0 12px; min-width: 200px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--as-input-border, var(--border));
  background: var(--as-input, var(--surface));
  color: var(--foreground);
  font-size: 13px;
}
.rf-search-inline:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(0, 71, 171, .14));
}

/* category chips + sort */
.rf-club-filters { margin: 0 0 16px; gap: 10px; }
.rf-club-cats { gap: 6px; }
.rf-club-cats a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.rf-club-cats a:hover { border-color: var(--primary); color: var(--primary); }
.rf-club-cats a.is-active, .rf-club-cats a[aria-current] {
  background: var(--primary-soft, var(--muted));
  border-color: var(--primary);
  color: var(--primary);
}
.rf-club-sort select {
  min-height: 34px; padding: 0 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--as-input-border, var(--border));
  background: var(--as-input, var(--surface));
  color: var(--foreground);
  font-size: 13px; font-weight: 600;
}

/* section eyebrows above each grid */
.rf-club-section-head {
  margin: 20px 0 10px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-faint, var(--muted-foreground));
}

/* club cards — surface card, cover image kept, cobalt hover */
.rf-club-grid { gap: 14px; }
.rf-club-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rf-club-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md, var(--shadow-sm));
}
.rf-club-card__body { padding: 13px 14px; }
.rf-club-card__heading { font-weight: 800; color: var(--foreground); }
.rf-club-card__desc { color: var(--muted-foreground); font-size: 13px; }
.rf-club-card__stats { color: var(--text-faint, var(--muted-foreground)); font-size: 12px; }
.rf-club-card__type {
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--primary-soft, var(--muted));
  color: var(--primary);
}

/* empty states on both pages */
.rf-empty {
  padding: 34px 20px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.rf-empty i { font-size: 22px; color: var(--primary); margin-bottom: 8px; }
.rf-empty h3 { margin: 6px 0 4px; font-size: 16px; font-weight: 800; }
.rf-empty p { margin: 0; color: var(--muted-foreground); font-size: 13.5px; }

/* ── events: cards + create/edit form ─────────────────────────────────────── */
.ev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.ev-card__title { font-weight: 800; }
.ev-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.ev-form__col--side .ev-card { position: sticky; top: calc(var(--as-topbar-h) + 12px); }
.ev-field { margin-bottom: 12px; }
.ev-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.ev-field input, .ev-field select, .ev-field textarea {
  width: 100%; min-height: 38px; padding: 8px 11px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--as-input-border, var(--border));
  background: var(--as-input, var(--surface));
  color: var(--foreground); font-size: 13.5px;
}
.ev-form__actions { display: flex; gap: 10px; margin-top: 14px; }
@media (max-width: 960px) {
  .ev-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ev-form__col--side .ev-card { position: static; }
}

/* ── trending + feed: the shared trend list ───────────────────────────────── */
.trend-list {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: 14px;
}
.trend-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--as-divider, var(--border));
  color: var(--foreground);
  text-decoration: none;
  transition: background .12s ease;
  min-width: 0;
}
.trend-row:last-child { border-bottom: 0; }
.trend-row:hover { background: var(--muted); }
.trend-rank-lg {
  flex: 0 0 34px;
  font-size: 15px; font-weight: 800;
  color: var(--text-faint, var(--muted-foreground));
  text-align: center;
}
.trend-row:nth-child(-n+3) .trend-rank-lg { color: var(--primary); }
.trend-title {
  font-weight: 700; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.trend-row:hover .trend-title { color: var(--primary); }
.trend-node, .trend-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px; color: var(--muted-foreground);
}
.trend-node i { color: var(--primary); font-size: 11px; }
.rb-trend-bar { border-radius: 999px; background: var(--primary-soft, var(--muted)); }

/* period pills above the list */
.rb-period-tab {
  display: inline-flex; align-items: center;
  min-height: 32px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.rb-period-tab:hover { border-color: var(--primary); color: var(--primary); }
.rb-period-tab.active, .rb-period-tab.is-active, .rb-period-tab[aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground, #fff);
}

/* feed filter row — checkboxes on a quiet strip above the list */
.rb-feed-filters {
  flex-wrap: wrap; gap: 14px;
  padding: 10px 14px;
  margin: 12px 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.rb-feed-filter { gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); cursor: pointer; }
.rb-feed-filter input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; }
.rb-feed-filters .btn, .rb-feed-filters button[type="submit"] { margin-left: auto; }

/* ── notifications ─────────────────────────────────────────────────────────
   The tab strip sat on a bare line with a fat scrollbar; the rows come from
   core with no theme dressing. The strip becomes a card shelf and the rows
   pick up the divider + hover language of the thread lists. */
.rb-toolbar-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  padding: 6px 8px;
  margin: 0 0 14px;
}
.rb-toolbar-row .rb-tabs, .rb-tabs-wrap .rb-tabs {
  scrollbar-width: none;
  border-bottom: 0;
}
.rb-toolbar-row .rb-tabs::-webkit-scrollbar { display: none; }
.rb-toolbar-row .tab, .rb-tabs .tab {
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
}
.notification-item-wrap { border-bottom: 1px solid var(--as-divider, var(--border)); }
.notification-item-wrap:last-child { border-bottom: 0; }
.notification-item { transition: background .12s ease; }
.notification-item:hover { background: var(--muted); }
.notification-item.unread { background: var(--primary-soft, var(--muted)); }
.notification-item__actions { display: inline-flex; gap: 6px; }
.notification-item__action {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.notification-item__action:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--primary);
}

/* ── tags: the chips were flush against their block (and the cloud too) ───── */
.tag-search { margin-bottom: 14px; }
.tag-search input {
  min-height: 38px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--as-input-border, var(--border));
  background: var(--as-input, var(--surface));
  color: var(--foreground);
}
.tag-list {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
}
.tag-list .tag, a.tag {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--background, var(--muted));
  color: var(--foreground);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
}
.tag-list .tag:hover, a.tag:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft, var(--muted));
}
.tag-cloud-section { padding: 16px; }
.tag-cloud-section .rb-tagcloud { line-height: 2.1; }

/* ── the tab-strip scroll arrows (profile, notifications) ──────────────────
   Core drops the buttons after the strip in flow, so they landed under the
   tabs at the left edge. They belong on the strip itself. */
.rb-tabs-wrap { position: relative; }
.rb-tabs-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted-foreground);
  box-shadow: var(--shadow-md, var(--shadow-sm));
  display: grid; place-items: center;
  cursor: pointer;
}
.rb-tabs-scroll-btn:hover { color: var(--primary); border-color: var(--primary); }
.rb-tabs-scroll-btn.rb-left { left: 2px; }
.rb-tabs-scroll-btn.rb-right { right: 2px; }
/* touch strips scroll with the finger — the floating arrows only cover the
   first and last tab there */
@media (hover: none) and (pointer: coarse) {
  .rb-tabs-scroll-btn { display: none; }
}

/* ── inline post editor: the action row wraps on phones ────────────────────
   "Save changes" + "Cancel" + the silent-edit label shared one line and the
   buttons slid out of the composer on narrow screens. */
@media (max-width: 640px) {
  .rb-inline-edit > .flex.justify-between,
  .rb-inline-edit .flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .rb-inline-edit .flex.items-center.gap-2 {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .rb-inline-edit .btn { min-height: 38px; }
}

/* ── the launcher stays off phones (base rule lands after as-28's flex) ───── */
@media (max-width: 960px) {
  .as-launcher { display: none; }
}

/* ── the Vite admin bundle ships GLOBAL input rules with !important
   (border:1px solid var(--color-border-dark)!important …), which paints these
   public inputs with an invisible white-alpha border on light surfaces. Same
   fight the header search already won — counter with equally scoped
   !important, nothing wider. */
.ev-field input,
.ev-field select,
.ev-field textarea,
.rf-search-inline,
.tag-search input {
  border: 1px solid var(--as-input-border, var(--border)) !important;
  background: var(--as-input, var(--surface)) !important;
  color: var(--foreground) !important;
  height: auto !important;
  min-height: 38px !important;
  padding: 8px 11px !important;
  border-radius: var(--radius-sm, 8px) !important;
  display: block !important;
}
.rf-search-inline, .tag-search input { display: inline-flex !important; padding: 0 12px !important; }
.ev-field input:focus,
.ev-field select:focus,
.ev-field textarea:focus,
.rf-search-inline:focus,
.tag-search input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(0, 71, 171, .14)) !important;
  outline: none !important;
}

/* a guest sees the identity card's action row with nothing in it — core still
   emits the wrapper, so it rendered as a blank strip between bio and status */
.rb-id-actions:not(:has(a)):not(:has(button)) { display: none; }

/* ── small strays the audit flagged ───────────────────────────────────────── */
.rb-s7-empty-cta { justify-content: center; gap: 10px; flex-wrap: wrap; }
.rb-bmlb__chipwrap { display: inline-flex; align-items: center; }
.rb-bmlb__chip { text-decoration: none; }
.rb-staff__members { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rb-dropdown-panel__list { min-width: 0; }