/* STREAMFLIX VISUAL ADD-ON: GRAFICOS E BORDAS PERSONALIZADAS */
.sf-visual-hero,
.sf-visual-board,
.sf-function-border {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(26,26,46,.98), rgba(22,33,62,.94));
  box-shadow: 0 16px 46px rgba(0,0,0,.42);
}
.sf-visual-hero {
  padding: 22px;
  margin-bottom: 20px;
  min-height: 126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sf-visual-hero:before,
.sf-visual-board:before,
.sf-function-border:before,
.data-table-container:before,
.settings-section:before,
.generator-panel:before,
.pc-card:before,
.tmdb-card:before,
.ai-card:before,
.xt-addon-card:before,
.r2conv-card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #46d369, #2196f3, #ffa500, #e50914);
  opacity: .95;
}
.sf-page-dashboard .sf-visual-hero:before { background: linear-gradient(90deg, #46d369, #2196f3); }
.sf-page-content .sf-visual-hero:before { background: linear-gradient(90deg, #e50914, #ffa500); }
.sf-page-categories .sf-visual-hero:before { background: linear-gradient(90deg, #2196f3, #46d369); }
.sf-page-m3u .sf-visual-hero:before,
.sf-page-xtream-addon .sf-visual-hero:before { background: linear-gradient(90deg, #46d369, #e50914); }
.sf-page-ai-monitor-delete .sf-visual-hero:before { background: linear-gradient(90deg, #46d369, #ffa500, #e50914); }
.sf-page-download-pc .sf-visual-hero:before { background: linear-gradient(90deg, #2196f3, #46d369, #e50914); }
.sf-page-settings .sf-visual-hero:before { background: linear-gradient(90deg, #ffa500, #2196f3); }
.sf-visual-hero h2 { font-size: clamp(22px, 3vw, 34px); font-weight: 900; margin: 0 0 8px; }
.sf-visual-hero p { color: var(--text-secondary,#b3b3b3); line-height: 1.45; margin: 0; max-width: 820px; }
.sf-visual-hero i { font-size: 58px; color: var(--primary,#e50914); opacity: .44; filter: drop-shadow(0 0 24px rgba(229,9,20,.35)); }
.sf-visual-badge { display:inline-flex; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:12px; font-weight:900; letter-spacing:.8px; margin-bottom:10px; }
.sf-visual-board { padding: 18px; margin-bottom: 20px; }
.sf-visual-board h3 { margin-bottom: 14px; }
.sf-visual-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.sf-mini-stat { position:relative; padding:16px; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); min-height:94px; overflow:hidden; }
.sf-mini-stat:before { content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--sf-color,#2196f3); }
.sf-mini-stat strong { display:block; font-size:30px; font-weight:900; color:#fff; }
.sf-mini-stat span { display:block; color:var(--text-muted,#808080); font-size:12px; font-weight:800; margin-top:3px; }
.sf-mini-stat small { display:block; color:var(--text-secondary,#b3b3b3); margin-top:8px; font-size:11px; }
.sf-mini-stat.ok { --sf-color:#46d369; }
.sf-mini-stat.warn { --sf-color:#ffa500; }
.sf-mini-stat.fail { --sf-color:#e50914; }
.sf-mini-stat.info { --sf-color:#2196f3; }
.sf-visual-bars { display:grid; gap:10px; margin-top:14px; }
.sf-bar-row { display:grid; grid-template-columns: 120px 1fr 54px; gap:10px; align-items:center; color:var(--text-secondary,#b3b3b3); font-size:13px; }
.sf-bar-track { height:11px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.sf-bar-fill { height:100%; width:0%; border-radius:99px; background:var(--sf-bar,#2196f3); box-shadow:0 0 18px color-mix(in srgb, var(--sf-bar,#2196f3) 45%, transparent); transition: width .35s ease; }
.sf-border-green { border-color: rgba(70,211,105,.38)!important; box-shadow:0 0 0 1px rgba(70,211,105,.08),0 14px 42px rgba(70,211,105,.08)!important; }
.sf-border-red { border-color: rgba(229,9,20,.38)!important; box-shadow:0 0 0 1px rgba(229,9,20,.08),0 14px 42px rgba(229,9,20,.08)!important; }
.sf-border-blue { border-color: rgba(33,150,243,.38)!important; box-shadow:0 0 0 1px rgba(33,150,243,.08),0 14px 42px rgba(33,150,243,.08)!important; }
.sf-border-orange { border-color: rgba(255,165,0,.38)!important; box-shadow:0 0 0 1px rgba(255,165,0,.08),0 14px 42px rgba(255,165,0,.08)!important; }
.data-table-container,
.settings-section,
.generator-panel,
.pc-card,
.tmdb-card,
.ai-card,
.xt-addon-card,
.r2conv-card { position:relative; overflow:hidden; }
.btn { position:relative; overflow:hidden; border-top:2px solid rgba(255,255,255,.22)!important; }
.btn-primary { border-top-color: rgba(255,255,255,.55)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.btn-success { border-top-color: rgba(255,255,255,.65)!important; box-shadow: 0 0 18px rgba(70,211,105,.16); }
.btn-danger { border-top-color: rgba(255,255,255,.52)!important; box-shadow: 0 0 18px rgba(229,9,20,.18); }
.btn-warning { border-top-color: rgba(255,255,255,.58)!important; box-shadow: 0 0 18px rgba(255,165,0,.14); }
.btn-info { border-top-color: rgba(255,255,255,.56)!important; box-shadow: 0 0 18px rgba(33,150,243,.14); }
.sf-soft-glow { animation: sfSoftGlow 2.4s ease-in-out infinite; }
@keyframes sfSoftGlow { 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.08); } }
@media (max-width:800px){ .sf-visual-hero{align-items:flex-start}.sf-visual-hero i{display:none}.sf-bar-row{grid-template-columns: 90px 1fr 42px} }