/* ==========================================================================
   css/apps/stream-pings.css
   Split from app.html (build 2026.10.08.9-beta), original lines 8180-8227.
   Rules are in their ORIGINAL order; load order is defined in index.html.
   ========================================================================== */
/* Stream Pings app */
.sp-wrap { max-width:680px; margin:0 auto; padding:26px 22px 60px; }
.sp-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.sp-head-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); flex-shrink:0; }
.sp-title { font-size:20px; font-weight:800; color:var(--text-primary); }
.sp-sub { font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.sp-add { display:flex; gap:8px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.sp-plat { display:flex; gap:2px; background:var(--bg-void); border:1px solid var(--border); border-radius:9px; padding:2px; }
.sp-plat-btn { display:flex; align-items:center; gap:6px; border:none; background:none; color:var(--text-muted); border-radius:7px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; }
.sp-plat-btn.on { background:var(--accent); color:#fff; }
.sp-input { flex:1; min-width:180px; background:var(--bg-surface); border:1.5px solid var(--border); color:var(--text-primary); padding:9px 13px; border-radius:9px; font-size:13px; outline:none; }
.sp-input:focus { border-color:var(--accent); }
.sp-add-btn { background:var(--accent); color:#fff; border:none; border-radius:9px; padding:9px 20px; font-size:13px; font-weight:700; cursor:pointer; }
.sp-add-btn:disabled { opacity:.6; cursor:default; }
.sp-list { display:flex; flex-direction:column; gap:8px; }
.sp-empty { font-size:13px; color:var(--text-muted); text-align:center; padding:30px 0; }
.sp-row { display:flex; align-items:center; gap:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:11px; padding:11px 14px; }
.sp-row.live { border-color:color-mix(in srgb,#da373c 55%,var(--border)); background:color-mix(in srgb,#da373c 6%,var(--bg-surface)); }
.sp-row-ico { flex-shrink:0; display:flex; }
.sp-row-info { flex:1; min-width:0; }
.sp-row-name { font-size:14px; font-weight:700; color:var(--text-primary); text-decoration:none; }
.sp-row-name:hover { text-decoration:underline; }
.sp-row-plat { font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.sp-status { font-size:11.5px; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.sp-status.on { color:#ff4141; }
.sp-del { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:5px; border-radius:7px; display:flex; flex-shrink:0; }
.sp-del:hover { background:var(--bg-hover); color:var(--red,#ed4245); }
/* Redesigned Stream Pings: left rail of streamer cubes, right stream-preview bubble. */
.sp-grid { display:flex; gap:16px; align-items:flex-start; }
.sp-cubes { display:flex; flex-direction:column; gap:8px; width:210px; flex-shrink:0; max-height:64vh; overflow-y:auto; }
.sp-cube { display:flex; align-items:center; gap:10px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:8px 10px; cursor:pointer; transition:border-color .12s,background .12s; }
.sp-cube:hover { background:var(--bg-hover); }
.sp-cube.sel { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--bg-surface)); }
.sp-cube.live { border-color:color-mix(in srgb,#da373c 45%,var(--border)); }
.sp-cube-av { width:40px; height:40px; border-radius:50%; position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:15px; overflow:visible; }
.sp-cube-av.live { box-shadow:0 0 0 2px var(--bg-surface), 0 0 0 4px #ff3b3b; }
.sp-cube-badge { position:absolute; bottom:-3px; right:-3px; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-surface); }
.sp-cube-name { font-size:13px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-cube-sub { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-top:1px; }
.sp-preview { flex:1; min-width:0; background:var(--bg-surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.sp-preview-media { width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#0c0d15,#151726); position:relative; display:flex; align-items:center; justify-content:center; }
.sp-preview-media img { width:100%; height:100%; object-fit:cover; display:block; }
.sp-live-pill { position:absolute; top:10px; left:10px; background:#e01e1e; color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em; padding:3px 9px; border-radius:6px; display:flex; align-items:center; gap:5px; }
.sp-yt-live, .sp-off { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); text-decoration:none; }
.sp-preview-body { padding:14px 16px 16px; }
.sp-watch-btn { display:block; text-align:center; margin-top:14px; background:var(--accent); color:#fff; text-decoration:none; border-radius:10px; padding:11px; font-size:14px; font-weight:700; }
.sp-watch-btn.off { background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border); }
@media (max-width:640px){ .sp-grid { flex-direction:column; } .sp-cubes { width:100%; flex-direction:row; overflow-x:auto; max-height:none; } .sp-cube { min-width:170px; } }