.ra-panel {
    --ra-accent: #34d399;
    margin: 0 0 22px;
    padding: 13px 14px 15px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .19);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(16, 24, 43, .96), rgba(10, 16, 31, .96));
    color: #e5edf6;
}
.ra-panel[data-recent-activity="store"] { --ra-accent: #fb923c; }
.ra-panel[data-recent-activity="images"] { --ra-accent: #22d3ee; }
.ra-panel[data-recent-activity="images"] { width: min(1240px, calc(100% - 2rem)); margin-left: auto; margin-right: auto; }
.ra-panel[data-recent-activity="social"] { --ra-accent: #60a5fa; }
.ra-panel[data-recent-activity="boost"] { --ra-accent: #a78bfa; }
.ra-panel[data-recent-activity="api_wallet"] { --ra-accent: #fb923c; }
.ra-panel[data-recent-activity="api_slip"] { --ra-accent: #34d399; }
.ra-panel[data-recent-activity="api_member"], .ra-panel[data-recent-activity="api_boost"] { --ra-accent: #818cf8; }
.ra-panel[data-recent-activity="api_social"] { --ra-accent: #60a5fa; }
.ra-panel[data-recent-activity="api_shop"] { --ra-accent: #fb923c; }
.ra-head { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 13px; }
.ra-head strong { color: #f8fafc !important; font-weight: 700; }
.ra-head small { color: #94a3b8 !important; font-size: 11px; }
.ra-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ra-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--ra-accent) 45%, transparent); }
.ra-viewport { overflow: hidden; padding: 4px 0; margin: -4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
.ra-track { display: flex; align-items: stretch; gap: 10px; width: max-content; max-width: none; }
.ra-chip { display: inline-flex; align-items: center; flex: none; gap: 10px; min-height: 57px; padding: 6px 14px 6px 6px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 999px; background: rgba(255, 255, 255, .045); }
.ra-chip-text { min-width: 180px; padding: 8px 16px; border-radius: 15px; }
.ra-chip img { display: block; flex: none; width: auto; height: auto; max-width: 104px; max-height: 44px; object-fit: contain; border-radius: 7px; }
.ra-chip img.ra-site-icon { width: 34px; height: 34px; max-width: 34px; max-height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.ra-chip img.ra-user-avatar { width: 38px; height: 38px; max-width: 38px; max-height: 38px; object-fit: cover; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ra-chip-body { display: block; flex: none; min-width: 0; } /* ไม่ให้ข้อความหดจนล้นการ์ด (รูป SVG ไม่มีขนาดในตัว ทำให้การ์ดคำนวณกว้างไม่พอ) */
.ra-chip-user { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ra-accent) !important; font-size: 10px; font-weight: 700; line-height: 1.4; }
.ra-chip-domain { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1 !important; font-size: 11px; line-height: 1.4; text-decoration: none; }
.ra-chip-domain:hover, .ra-chip-domain:focus-visible { color: #fff !important; text-decoration: underline; }
.ra-chip-title { display: block; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f8fafc !important; font-size: 12px; font-weight: 700; line-height: 1.4; }
.ra-chip-meta { display: block; white-space: nowrap; color: #94a3b8 !important; font-size: 11px; line-height: 1.4; }
.ra-chip-meta b { color: var(--ra-accent) !important; font-weight: 600; }
.ra-empty { color: #94a3b8 !important; font-size: 12px; padding: 7px 3px; }
@media (max-width: 575.98px) {
    .ra-panel { margin-bottom: 17px; padding: 11px 10px 12px; border-radius: 15px; }
    .ra-head { margin-bottom: 8px; }
    .ra-head small { display: none; }
    .ra-chip { min-height: 53px; gap: 8px; padding: 5px 11px 5px 5px; }
    .ra-chip-text { min-width: 160px; padding: 7px 12px; }
    .ra-chip img { max-width: 78px; max-height: 40px; }
    .ra-chip img.ra-site-icon { width: 30px; height: 30px; max-width: 30px; max-height: 30px; }
    .ra-chip img.ra-user-avatar { width: 34px; height: 34px; max-width: 34px; max-height: 34px; }
    .ra-chip-title { max-width: 175px; font-size: 11px; }
    .ra-chip-domain, .ra-chip-user { max-width: 175px; }
    .ra-chip-meta { font-size: 10px; }
}

/* แถบเลื่อนอัตโนมัติ (assets/js/recent_activity.js) ใช้ทั้งแถบรายการล่าสุดและแถบขายล่าสุดของหน้าแอป */
.ra-marquee { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ra-marquee > * { will-change: transform; }
.ra-marquee img { -webkit-user-drag: none; }
.ra-marquee.ra-dragging { cursor: grabbing; }
.ra-marquee.ra-static { cursor: auto; -webkit-mask-image: none; mask-image: none; }
.ra-head { flex-wrap: wrap; }
.ra-ctrl { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 576px) { .ra-count + .ra-ctrl { margin-left: 10px; } }
.ra-ctrl[hidden] { display: none; }
.ra-ctrl-btn { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 1px solid rgba(148, 163, 184, .22); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #cbd5e1 !important; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.ra-ctrl-btn:hover, .ra-ctrl-btn:focus-visible { background: color-mix(in srgb, var(--ra-accent, #a78bfa) 22%, transparent); border-color: var(--ra-accent, #a78bfa); color: #fff !important; outline: none; }
.ra-ctrl-speed { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; margin: 0; border: 1px solid rgba(148, 163, 184, .22); border-radius: 999px; background: rgba(255, 255, 255, .05); cursor: pointer; }
.ra-ctrl-speed span { min-width: 30px; color: #cbd5e1 !important; font-size: 11px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ra-ctrl-speed input { -webkit-appearance: none; appearance: none; width: 84px; height: 4px; margin: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ra-accent, #a78bfa) var(--ra-fill, 30%), rgba(148, 163, 184, .28) var(--ra-fill, 30%)); cursor: pointer; touch-action: none; }
.ra-ctrl-speed input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid #0b1220; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ra-accent, #a78bfa); }
.ra-ctrl-speed input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #0b1220; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ra-accent, #a78bfa); }
.ra-ctrl-speed input:focus-visible { outline: 2px solid var(--ra-accent, #a78bfa); outline-offset: 4px; }
@media (max-width: 575.98px) {
    .ra-ctrl-btn { min-width: 30px; height: 30px; }
    .ra-ctrl-speed { height: 30px; }
    .ra-ctrl-speed input { width: 96px; }
}