/* ============================================================================
   RsFw · assets/css/rsfw-streams.css
   Components for the upgraded streams.php page:
     · tab bar (Live Now / All Streamers)
     · live stream cards (preview + watch)
     · streamer cards (cosmetics-aware avatar + platform links)
     · embed modal
   Pairs with rsfw-pages.css (pg-hero / pg-stats / pg-empty / pg-btn / pg-chip).
   ========================================================================== */

/* ------------------------------------------------------------------- tabs */
.st-tabs{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:.1rem;
}
.st-tab{
  appearance:none; cursor:pointer; font:inherit; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; font-size:.76rem; color:var(--text-secondary,#9ca3af);
  background:transparent; border:0; border-bottom:2px solid transparent;
  padding:.7rem 1rem; display:inline-flex; align-items:center; gap:.5rem; transition:.16s;
}
.st-tab:hover{ color:#e8e8ef; }
.st-tab.active{ color:#fff; border-bottom-color:#8b5cf6; }
.st-tab .cnt{
  font-size:.68rem; font-weight:800; padding:1px 8px; border-radius:50px;
  background:rgba(139,92,246,.16); color:#c4b5fd; border:1px solid rgba(139,92,246,.3);
}
.st-tab.active .cnt{ background:rgba(139,92,246,.28); color:#fff; }
.st-tab .dot{ width:7px; height:7px; border-radius:50%; background:#6b7280; }
.st-tab .dot.on{ background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.7); animation:st-pulse 1.8s infinite; }
@keyframes st-pulse{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.6); }
  70%{ box-shadow:0 0 0 7px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* --------------------------------------------------------------- live cards */
.st-live-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(3,minmax(0,1fr)); }
.st-live-card{
  background:linear-gradient(180deg,#181824,#14141d); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden; transition:.18s; position:relative; display:flex; flex-direction:column;
}
.st-live-card:hover{ border-color:rgba(239,68,68,.45); transform:translateY(-3px); box-shadow:0 18px 38px rgba(0,0,0,.42); }
.st-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b0b12;
  background-image:linear-gradient(135deg,#1a1a2e,#0d0d18);
}
.st-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }
.st-thumb .fallback{
  position:absolute; inset:0; display:grid; place-items:center; color:rgba(196,181,253,.35); font-size:2.4rem;
}
.st-live-badge{
  position:absolute; top:.6rem; left:.6rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; background:#e10600; color:#fff; box-shadow:0 4px 14px rgba(225,6,0,.5);
}
.st-live-badge .d{ width:6px; height:6px; border-radius:50%; background:#fff; animation:st-pulse 1.6s infinite; }
.st-viewers{
  position:absolute; top:.6rem; right:.6rem; z-index:2; font-size:.66rem; font-weight:800;
  padding:4px 8px; border-radius:6px; background:rgba(0,0,0,.66); color:#fff; backdrop-filter:blur(4px);
}
.st-plat-tag{
  position:absolute; bottom:.6rem; right:.6rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem;
  font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 9px; border-radius:6px; color:#fff; backdrop-filter:blur(4px);
}
.st-live-body{ padding:.95rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.st-live-title{
  font-size:.98rem; font-weight:800; color:#fff; line-height:1.35; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.st-live-host{ display:flex; align-items:center; gap:.55rem; margin-top:auto; }
.st-live-host .nm{ font-weight:700; color:#e8e8ef; font-size:.85rem; }
.st-live-host .rk{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.st-watch{
  margin-top:.35rem; width:100%; justify-content:center;
  display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .9rem; border-radius:10px;
  font-size:.76rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; color:#fff; background:linear-gradient(135deg,#8b5cf6,#7c3aed); transition:.16s; cursor:pointer;
}
.st-watch:hover{ background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.st-watch.ghost{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#e8e8ef; }
.st-watch.ghost:hover{ border-color:#8b5cf6; background:rgba(139,92,246,.14); }

/* ------------------------------------------------------------ streamer cards */
.st-grid{ display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
.st-card{
  background:linear-gradient(180deg,#181824,#14141d); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1.15rem 1rem; text-align:center; transition:.18s; position:relative; overflow:hidden;
}
.st-card:hover{ border-color:rgba(139,92,246,.42); transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.38); }
.st-card.live{ border-color:rgba(239,68,68,.4); }
.st-av-wrap{ position:relative; width:84px; height:84px; margin:0 auto .7rem; }
.st-av-wrap .rsfw-av, .st-av-wrap img{
  width:84px; height:84px; border-radius:50%; object-fit:cover; display:block;
  border:2px solid rgba(139,92,246,.35);
}
.st-online{
  position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%;
  background:#10b981; border:3px solid #14141d;
}
.st-online.off{ background:#4b5563; }
.st-live-dot{
  position:absolute; top:-2px; left:-2px; font-size:.56rem; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:50px; background:#e10600; color:#fff;
  border:2px solid #14141d; box-shadow:0 3px 10px rgba(225,6,0,.5);
}
.st-name{ font-size:.98rem; font-weight:800; color:#fff; text-decoration:none; display:inline-block; }
.st-name:hover{ color:#c4b5fd; }
.st-rank{ font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-top:2px; }
.st-plats{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:.8rem; }
.st-plat{
  display:inline-flex; align-items:center; gap:.35rem; padding:.34rem .62rem; border-radius:8px;
  font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); transition:.15s;
}
.st-plat:hover{ transform:translateY(-1px); filter:brightness(1.12); }
.st-plat.twitch{ background:#9146ff; border-color:#9146ff; }
.st-plat.youtube{ background:#ff0000; border-color:#ff0000; }
.st-plat.kick{ background:#53fc18; border-color:#53fc18; color:#0b1a06; }
.st-plat.none{ opacity:.55; cursor:default; }
.st-plat.none:hover{ transform:none; filter:none; }

/* ------------------------------------------------------------------ modal */
.st-modal{
  position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(6,6,12,.82); backdrop-filter:blur(6px); padding:1.2rem;
}
.st-modal.open{ display:flex; }
.st-modal-inner{
  width:min(1100px,96vw); background:#101018; border:1px solid rgba(139,92,246,.3);
  border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.st-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(139,92,246,.06);
}
.st-modal-title{ font-weight:800; color:#fff; font-size:.95rem; }
.st-modal-actions{ display:flex; align-items:center; gap:.7rem; }
.st-modal-ext{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:700;
  color:#c4b5fd; text-decoration:none;
}
.st-modal-ext:hover{ color:#fff; }
.st-modal-close{
  appearance:none; cursor:pointer; width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#e8e8ef; display:grid; place-items:center; transition:.15s;
}
.st-modal-close:hover{ background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.4); color:#fff; }
.st-modal-frame{ width:100%; aspect-ratio:16/9; border:0; display:block; background:#000; }

/* ------------------------------------------------------------------- misc */
.st-note{
  display:flex; align-items:center; gap:.6rem; margin-top:1.2rem; padding:.7rem 1rem;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.02);
  color:var(--text-secondary,#9ca3af); font-size:.78rem;
}
.st-note i{ color:#a78bfa; }
.st-note .live-refresh{ margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; }

/* --------------------------------------------------------------- responsive */
@media (max-width:1100px){ .st-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px){
  .st-live-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .st-live-grid,.st-grid{ grid-template-columns:1fr; }
  .st-tabs{ gap:.15rem; }
  .st-tab{ padding:.6rem .65rem; font-size:.7rem; }
  .st-modal{ padding:.5rem; }
}

/* ============================================================ STREAM CENTER
   Components for streaming.php (member /streaming center).                */
.st-me{
  position:relative; margin:1.4rem 0 .4rem; border:1px solid var(--border,rgba(139,92,246,.2));
  border-radius:18px; background:linear-gradient(180deg,rgba(26,26,46,.92),rgba(18,18,30,.92));
  overflow:hidden;
}
.st-me.is-live{ border-color:rgba(239,68,68,.45); box-shadow:0 0 0 1px rgba(239,68,68,.12),0 18px 50px -30px rgba(239,68,68,.5); }
.st-me::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 200px at 12% -20%,rgba(139,92,246,.16),transparent 70%);
}
.st-me-head{
  display:flex; align-items:center; gap:.7rem; padding:1.05rem 1.35rem;
  border-bottom:1px solid var(--border,rgba(139,92,246,.2)); position:relative;
}
.st-me-head h2{ margin:0; font-family:'Orbitron',sans-serif; font-size:1.02rem; color:#fff; display:flex; align-items:center; gap:.55rem; }
.st-me-head h2 i{ color:#a78bfa; }
.st-me-status{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:.34rem .7rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text-secondary,#9ca3af);
}
.st-me-status .d{ width:8px; height:8px; border-radius:50%; background:#6b7280; }
.st-me-status.live{ color:#fecaca; border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.12); }
.st-me-status.live .d{ background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.18); animation:stPulse 1.6s infinite; }
@keyframes stPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.st-me-body{
  display:grid; grid-template-columns:minmax(220px,1fr) minmax(280px,1.3fr) minmax(200px,.9fr);
  gap:1.4rem; padding:1.35rem; position:relative;
}
.st-me-profile{ display:flex; gap:.9rem; align-items:flex-start; }
.st-me-av{ position:relative; flex:0 0 auto; }
.st-me-av img{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:2px solid rgba(139,92,246,.35); }
.st-me-av .st-online{ position:absolute; right:4px; bottom:4px; }
.st-me-id{ min-width:0; }
.st-me-name{ font-family:'Orbitron',sans-serif; font-size:1.05rem; color:#fff; margin-bottom:.2rem; }
.st-me-rank{ font-size:.76rem; font-weight:600; margin-bottom:.4rem; }
.st-me-rank i{ margin-right:.25rem; }
.st-me-profile-link{ font-size:.74rem; color:#a78bfa; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.st-me-profile-link:hover{ color:#c4b5fd; }

.st-me-channels{ display:flex; flex-direction:column; gap:.5rem; }
.st-me-sub{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted,#6b7280); font-weight:700; margin-bottom:.15rem; }
.st-me-sub i{ margin-right:.35rem; }
.st-ch-row{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); transition:.15s;
}
.st-ch-row.on{ border-color:rgba(139,92,246,.28); }
.st-ch-row:hover{ background:rgba(255,255,255,.045); }
.st-ch-ic{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  font-size:.95rem; border:1px solid rgba(255,255,255,.12);
}
.st-ch-info{ min-width:0; flex:1; }
.st-ch-name{ font-size:.84rem; color:#f1f0f5; font-weight:600; }
.st-ch-url{ font-size:.7rem; color:var(--text-muted,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-ch-btn{
  flex:0 0 auto; font-size:.72rem; font-weight:600; padding:.4rem .7rem; border-radius:9px; text-decoration:none;
  border:1px solid rgba(139,92,246,.4); background:rgba(139,92,246,.14); color:#ddd6fe; transition:.15s; white-space:nowrap;
}
.st-ch-btn:hover{ background:rgba(139,92,246,.26); color:#fff; }
.st-ch-btn.ghost{ border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--text-secondary,#9ca3af); }
.st-ch-btn.ghost:hover{ color:#fff; border-color:rgba(255,255,255,.3); }

.st-me-actions{ display:flex; flex-direction:column; gap:.55rem; }
.st-me-actions .st-watch{ width:100%; justify-content:center; }

.st-me-live{ border-top:1px solid var(--border,rgba(139,92,246,.2)); padding:1.1rem 1.35rem 1.35rem; }
.st-me-live-head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.st-me-live-title{ font-size:.86rem; color:#f1f0f5; font-weight:600; }
.st-me-frame{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#000; }
.st-me-frame iframe{ width:100%; aspect-ratio:16/9; border:0; display:block; }

.st-me-nudge{
  display:flex; align-items:center; gap:.85rem; padding:1rem 1.35rem; border-top:1px solid var(--border,rgba(139,92,246,.2));
  background:rgba(245,158,11,.06);
}
.st-me-nudge > i{ color:#f59e0b; font-size:1.2rem; }
.st-me-nudge strong{ display:block; color:#fff; font-size:.86rem; }
.st-me-nudge span{ font-size:.76rem; color:var(--text-secondary,#9ca3af); }
.st-me-nudge span a{ color:#c4b5fd; }
.st-me-nudge .st-ch-btn{ margin-left:auto; }

.st-you{
  display:inline-block; margin-left:.4rem; font-size:.6rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.12rem .4rem; border-radius:6px; background:rgba(139,92,246,.2); color:#ddd6fe; vertical-align:middle;
}
.st-live-card.is-me, .st-card.is-me{ border-color:rgba(139,92,246,.5); box-shadow:0 0 0 1px rgba(139,92,246,.2); }

@media (max-width:991px){
  .st-me-body{ grid-template-columns:1fr 1fr; }
  .st-me-actions{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; }
  .st-me-actions .st-watch{ width:auto; flex:1 1 160px; }
}
@media (max-width:640px){
  .st-me-body{ grid-template-columns:1fr; }
  .st-me-nudge{ flex-wrap:wrap; }
  .st-me-nudge .st-ch-btn{ margin-left:0; }
}