/* APPROVED FOKISEN UI — DASHBOARD + LIVE STUDIO */
:root{
  --f-bg:#071018;--f-card:#0d1923;--f-card2:#101f2b;
  --f-line:#223847;--f-blue:#3192ff;--f-blue2:#72bdff;
  --f-text:#f4f7fb;--f-muted:#8799aa;--f-green:#31df82;--f-red:#ff4655;
}

/* ================= DASHBOARD ================= */
#overview{
  background:radial-gradient(900px 280px at 62% -80px,rgba(49,146,255,.10),transparent 70%),var(--f-bg)!important;
  padding:18px!important;
}
#overview .dashboard-v2-heading{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin-bottom:14px!important
}
#overview .dashboard-v2-title{display:flex!important;gap:12px!important;align-items:flex-start!important}
#overview .dashboard-page-number{
  color:var(--f-blue)!important;font-size:10px!important;font-weight:900!important;
  border:1px solid #28537a!important;background:#0c2235!important;border-radius:6px!important;padding:5px 7px!important
}
#overview .eyebrow{color:var(--f-blue2)!important;font-size:8px!important;letter-spacing:.18em!important;font-weight:900!important}
#overview h2{color:var(--f-text)!important;font-size:29px!important;margin:3px 0 4px!important}
#overview p{color:var(--f-muted)!important}
#overview .dashboard-date{
  border:1px solid var(--f-line)!important;background:#0d1923!important;
  color:#b9c7d2!important;border-radius:8px!important;padding:9px 12px!important;font-size:10px!important
}

#overview .dashboard-v2-card{
  border:1px solid var(--f-line)!important;border-radius:10px!important;
  background:linear-gradient(180deg,#0e1b26,#0a151e)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.14)!important;overflow:hidden!important
}
#overview .dashboard-v2-hero{
  display:grid!important;grid-template-columns:1.15fr 1.15fr .78fr!important;
  gap:10px!important;align-items:stretch!important
}
#overview .dashboard-card-head{
  min-height:40px!important;padding:9px 11px!important;border-bottom:1px solid #1b2e3b!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important
}
#overview .dashboard-card-head strong{font-size:11px!important;color:#edf3f7!important}
#overview .dashboard-live-pill{
  border:1px solid #7c2c36!important;background:#32141a!important;color:#ff7a84!important;
  border-radius:999px!important;padding:4px 7px!important;font-size:7px!important;font-weight:900!important
}
#overview .dashboard-health-pill{
  color:#5fe49a!important;background:#0d2a1e!important;border:1px solid #1d7446!important;
  border-radius:999px!important;padding:4px 7px!important;font-size:7px!important
}
#overview .dashboard-feature-art,
#overview .dashboard-program-stage{
  min-height:190px!important;background:
  radial-gradient(circle at 50% 30%,rgba(49,146,255,.13),transparent 48%),#03070b!important
}
#overview .dashboard-feature-art img{max-width:150px!important;opacity:.8!important}
#overview .dashboard-feature-copy{
  background:linear-gradient(transparent,rgba(2,7,11,.94))!important;padding:48px 12px 11px!important
}
#overview .dashboard-feature-copy span{color:#55adff!important;font-size:8px!important;font-weight:900!important}
#overview .dashboard-feature-copy strong{font-size:17px!important;color:white!important}
#overview .dashboard-feature-copy small{color:#a3b3c0!important}
#overview .dashboard-watch-button{
  width:calc(100% - 20px)!important;margin:8px 10px!important;
  border:1px solid #357fc0!important;background:#0c2b45!important;color:#7ec3ff!important;
  border-radius:7px!important;padding:8px!important;font-weight:900!important
}
#overview .dashboard-signal-strip,
#overview .dashboard-program-strip{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  border-top:1px solid #1b2d39!important;background:#09131b!important
}
#overview .dashboard-signal-strip>div,
#overview .dashboard-program-strip>div{
  padding:8px!important;border-right:1px solid #1b2d39!important
}
#overview .dashboard-signal-strip span,
#overview .dashboard-program-strip span{
  display:block!important;color:#708597!important;font-size:7px!important;text-transform:uppercase!important
}
#overview .dashboard-signal-strip strong,
#overview .dashboard-program-strip strong{
  display:block!important;color:#dbe4eb!important;font-size:10px!important;margin-top:3px!important
}
#overview .dashboard-program-stage video{width:100%!important;height:190px!important;object-fit:cover!important}
#overview .dashboard-program-fallback{
  background:radial-gradient(circle at 50% 50%,rgba(49,146,255,.09),transparent 55%),#03070b!important
}
#overview .dashboard-program-corner{
  border:1px solid #b1303d!important;background:#3d1319!important;color:#ff858e!important;
  border-radius:5px!important;padding:3px 6px!important;font-size:7px!important
}
#overview .dashboard-output-url{
  padding:8px 10px!important;background:#09131b!important;border-top:1px solid #1c2e3a!important
}
#overview .dashboard-output-url code{color:#91aabc!important;font-size:8px!important}
#overview .dashboard-overview-list button{
  min-height:43px!important;border:0!important;border-bottom:1px solid #1b2c38!important;
  background:transparent!important;color:#d4dee6!important;padding:8px 10px!important
}
#overview .dashboard-overview-list button:hover{background:#10202b!important}
#overview .dashboard-overview-list b{color:#68b6ff!important}
#overview .dashboard-overview-list strong{color:#fff!important}

#overview .dashboard-v2-bottom{
  display:grid!important;grid-template-columns:1.25fr 1fr .82fr!important;
  gap:10px!important;margin-top:10px!important
}
#overview .dashboard-quick-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important;padding:9px!important
}
#overview .dashboard-quick-grid button{
  min-height:76px!important;border:1px solid #263f50!important;border-radius:8px!important;
  background:#0f1d27!important;color:#dfe7ed!important;padding:9px!important;text-align:left!important
}
#overview .dashboard-quick-grid button:hover{border-color:#347db7!important;background:#10283c!important}
#overview .dashboard-quick-grid button>span{color:#65b5ff!important;font-size:16px!important}
#overview .dashboard-quick-grid strong{font-size:10px!important}
#overview .dashboard-quick-grid small{font-size:7px!important;color:#8195a6!important}
#overview .dashboard-activity-list,
#overview .dashboard-health-list{padding:8px 10px!important}
#overview .dashboard-server-link{
  margin:8px 10px 10px!important;width:calc(100% - 20px)!important;
  border:1px solid #2b5f89!important;background:#0c263b!important;color:#70bbff!important;border-radius:7px!important
}

/* ================= LIVE STUDIO ================= */
#livestudio{
  background:radial-gradient(900px 280px at 65% -80px,rgba(49,146,255,.10),transparent 70%),var(--f-bg)!important;
  padding:16px!important
}
#livestudio .studio-v2-page{max-width:1700px!important;margin:auto!important}
#livestudio .panel{
  border:1px solid var(--f-line)!important;border-radius:9px!important;
  background:linear-gradient(180deg,#0e1b26,#0a151e)!important;
  box-shadow:none!important
}
#livestudio .studio-v2-header{
  display:grid!important;grid-template-columns:1.25fr 1.3fr auto!important;
  gap:14px!important;align-items:center!important;padding:12px 14px!important;margin-bottom:9px!important
}
#livestudio .studio-v2-title-line{display:flex!important;gap:10px!important;align-items:center!important}
#livestudio .studio-v2-page-number{
  color:var(--f-blue)!important;border:1px solid #28557d!important;background:#0c2236!important;
  border-radius:6px!important;padding:5px 7px!important;font-size:9px!important;font-weight:900!important
}
#livestudio .studio-v2-title-line h2{font-size:25px!important;color:white!important;margin:0!important}
#livestudio .studio-v2-title-line p{font-size:9px!important;color:#8fa1b1!important;margin:3px 0 0!important}
#livestudio .studio-v2-channel-line{margin-top:8px!important}
#livestudio .studio-v2-channel-line span{color:#6f8799!important;font-size:7px!important;text-transform:uppercase!important}
#livestudio .studio-v2-channel-line strong{color:#eaf0f5!important;font-size:10px!important;margin-left:6px!important}
#livestudio .studio-v2-channel-line small{color:#7790a3!important;margin-left:8px!important}

#livestudio .studio-v2-header-metrics{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:7px!important
}
#livestudio .studio-v2-head-stat{
  min-height:55px!important;border:1px solid #243d4d!important;background:#0b1720!important;
  border-radius:7px!important;padding:8px 9px!important
}
#livestudio .studio-v2-head-stat span{display:block!important;color:#708698!important;font-size:7px!important}
#livestudio .studio-v2-head-stat strong{display:block!important;color:#fff!important;font-size:11px!important;margin-top:4px!important}
#livestudio .studio-v2-head-stat small{color:#8196a8!important;font-size:7px!important}
#livestudio .studio-status-offline{color:#ff6975!important}

#livestudio .studio-v2-header-actions{display:flex!important;gap:7px!important}
#livestudio .studio-v2-header-actions button{min-height:38px!important}
#livestudio #studioGoLive{
  background:linear-gradient(180deg,#38d982,#1ea45d)!important;border:1px solid #50e798!important;
  color:#03150d!important;font-weight:1000!important;border-radius:7px!important
}

#livestudio .studio-v2-channel-selector{
  display:grid!important;grid-template-columns:190px 1fr!important;gap:10px!important;
  align-items:center!important;padding:9px 11px!important;margin-bottom:9px!important
}
#livestudio .studio-v2-channel-selector-title strong{font-size:10px!important;color:white!important}
#livestudio .studio-v2-channel-selector-title span{display:block!important;color:#7890a2!important;font-size:7px!important}
#livestudio .studio-v2-channel-list{display:flex!important;gap:6px!important;overflow-x:auto!important}

#livestudio .studio-v2-production-grid{
  display:grid!important;grid-template-columns:300px minmax(0,1fr) 260px!important;
  gap:9px!important;align-items:start!important
}
#livestudio .studio-v2-sources-panel{padding:9px!important}
#livestudio .studio-v2-panel-head{
  min-height:34px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
  border-bottom:1px solid #1c2f3c!important;margin:-9px -9px 8px!important;padding:7px 9px!important
}
#livestudio .studio-v2-panel-head span{display:block!important;color:#69b7ff!important;font-size:7px!important;font-weight:900!important}
#livestudio .studio-v2-panel-head strong{font-size:9px!important;color:#dce5ec!important}
#livestudio .studio-source-wall{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important
}
#livestudio .studio-v2-source-card{
  border:1px solid #263e4e!important;border-radius:7px!important;background:#0b1720!important;overflow:hidden!important
}
#livestudio .studio-source-tile{
  width:100%!important;border:0!important;background:#09141c!important;color:white!important;padding:0!important
}
#livestudio .studio-source-tile.active{
  outline:2px solid var(--f-blue)!important;outline-offset:-2px!important;background:#0d2740!important
}
#livestudio .studio-v2-source-top{padding:5px 6px!important}
#livestudio .studio-v2-source-top b{
  color:#66b6ff!important;background:#0b2b46!important;border-radius:4px!important;padding:2px 4px!important
}
#livestudio .studio-v2-source-top strong{font-size:8px!important}
#livestudio .studio-v2-source-top i{font-size:6px!important;color:#5ee295!important}
#livestudio .studio-v2-source-thumb{aspect-ratio:16/9!important;background:#020508!important}
#livestudio .studio-v2-source-thumb video{width:100%!important;height:100%!important;object-fit:cover!important}
#livestudio .studio-v2-source-controls{padding:5px!important}
#livestudio .studio-v2-source-controls select,
#livestudio .studio-v2-source-controls input{font-size:7px!important;min-height:27px!important}

#livestudio .studio-v2-monitor-grid{
  display:grid!important;grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)!important;
  gap:7px!important;align-items:stretch!important
}
#livestudio .studio-v2-monitor{overflow:hidden!important}
#livestudio .studio-v2-monitor-head{
  min-height:34px!important;padding:7px 9px!important;background:#09151e!important;
  border-bottom:1px solid #1d313e!important
}
#livestudio .studio-v2-monitor-head span{font-size:8px!important;color:#8ea0b0!important}
#livestudio .preview-monitor .studio-v2-monitor-head{border-top:3px solid #38a0ff!important}
#livestudio .program-v2-monitor .studio-v2-monitor-head{border-top:3px solid #ff4655!important}
#livestudio .studio-v2-video-stage{
  aspect-ratio:16/9!important;min-height:0!important;background:#020508!important
}
#livestudio .studio-v2-video-stage video,
#livestudio .studio-v2-video-stage canvas{width:100%!important;height:100%!important;object-fit:contain!important}

#livestudio .studio-v2-transition-rail{
  display:flex!important;flex-direction:column!important;gap:5px!important;
  align-items:stretch!important;justify-content:center!important
}
#livestudio .studio-v2-transition-rail button,
#livestudio .studio-v2-transition-rail select{
  min-height:32px!important;font-size:7px!important;border-radius:6px!important
}
#livestudio #studioTakeScene{
  background:linear-gradient(180deg,#369eff,#217ccc)!important;border:1px solid #55adff!important;
  color:white!important;font-weight:1000!important
}
#livestudio #studioCutTake{border-color:#2f6e9f!important;color:#77bdff!important}
#livestudio #studioFadeTake{border-color:#725493!important;color:#d9b7ff!important}
#livestudio #studioAutoTake{border-color:#2d7652!important;color:#70e7a5!important}

#livestudio .studio-v2-tools-row{
  display:grid!important;grid-template-columns:1.2fr .8fr!important;gap:8px!important;margin-top:8px!important
}
#livestudio .studio-v2-graphics-panel,
#livestudio .studio-v2-ticker-panel,
#livestudio .studio-v2-audio-panel,
#livestudio .studio-v2-record-panel,
#livestudio .studio-v2-program-info-panel{padding:9px!important}
#livestudio input,#livestudio textarea,#livestudio select{
  background:#0b1822!important;border:1px solid #294454!important;color:#e8eef3!important;border-radius:6px!important
}
#livestudio .studio-v2-right-rail{display:grid!important;gap:8px!important}
#livestudio .studio-v2-record-head{border-bottom:1px solid #203442!important;padding-bottom:7px!important;margin-bottom:7px!important}
#livestudio #studioEndLive{
  width:100%!important;margin-top:6px!important;background:#321319!important;border-color:#7e2a34!important;color:#ff7781!important
}
#livestudio .studio-v2-bottom-grid{
  display:grid!important;grid-template-columns:1.05fr 1fr .8fr!important;gap:8px!important;margin-top:8px!important
}
#livestudio .studio-v2-shortcut-grid{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important
}
#livestudio .studio-v2-shortcut-grid button{
  min-height:43px!important;border:1px solid #284354!important;background:#0f1d28!important;color:#cbd7e0!important;border-radius:7px!important
}
#livestudio #studioProControlRoom{display:none!important}
#livestudio .studio-v2-advanced-drawer{
  margin-top:8px!important;border:1px solid #233b4b!important;border-radius:8px!important;background:#09151e!important;padding:9px!important
}

@media(max-width:1250px){
  #overview .dashboard-v2-hero{grid-template-columns:1fr 1fr!important}
  #overview .dashboard-overview-card{grid-column:1/-1!important}
  #overview .dashboard-v2-bottom{grid-template-columns:1fr 1fr!important}
  #overview .dashboard-health-card{grid-column:1/-1!important}
  #livestudio .studio-v2-production-grid{grid-template-columns:260px minmax(0,1fr)!important}
  #livestudio .studio-v2-right-rail{grid-column:1/-1!important;grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:850px){
  #overview .dashboard-v2-hero,#overview .dashboard-v2-bottom{grid-template-columns:1fr!important}
  #overview .dashboard-quick-grid{grid-template-columns:1fr 1fr!important}
  #livestudio .studio-v2-header{grid-template-columns:1fr!important}
  #livestudio .studio-v2-production-grid{grid-template-columns:1fr!important}
  #livestudio .studio-v2-monitor-grid{grid-template-columns:1fr!important}
  #livestudio .studio-v2-transition-rail{flex-direction:row!important;flex-wrap:wrap!important}
  #livestudio .studio-v2-right-rail{grid-template-columns:1fr!important}
  #livestudio .studio-v2-tools-row,#livestudio .studio-v2-bottom-grid{grid-template-columns:1fr!important}
}

/* ===== LIVE STUDIO LARGE MONITORS + SCREEN MANAGER ===== */

#livestudio .studio-v2-production-grid{
  grid-template-columns:minmax(0,1fr) 250px!important;
}

#livestudio .studio-v2-switcher{
  grid-column:1/-1!important;
  grid-row:1!important;
}

#livestudio .studio-v2-sources-panel{
  grid-column:1!important;
  grid-row:2!important;
}

#livestudio .studio-v2-right-rail{
  grid-column:2!important;
  grid-row:2!important;
}

#livestudio .studio-v2-monitor-grid{
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)!important;
}

#livestudio .studio-v2-video-stage{
  aspect-ratio:16/9!important;
  width:100%!important;
}

#livestudio .studio-source-wall{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

#livestudio .studio-screen-btn{
  border:1px solid #315b78!important;
  background:#0d2638!important;
  color:#72bdff!important;
  border-radius:6px!important;
  font-size:7px!important;
  min-height:27px!important;
  padding:4px 7px!important;
}

#livestudio .studio-monitor-screen{
  margin-left:auto!important;
}

#studioScreenManager{
  margin-bottom:9px!important;
  padding:10px!important;
}

#studioScreenManager .studio-screen-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:9px;
}

#studioScreenManager .studio-screen-head span{
  display:block;
  color:#69b7ff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

#studioScreenManager .studio-screen-head strong{
  color:#edf5fb;
  font-size:11px;
}

#studioScreenManager .studio-screen-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) 150px auto;
  gap:7px;
  align-items:end;
}

#studioScreenManager label{
  color:#7890a2;
  font-size:7px;
}

#studioScreenManager select{
  width:100%;
  margin-top:4px;
}

@media(max-width:1000px){
  #livestudio .studio-v2-production-grid{
    grid-template-columns:1fr!important;
  }
  #livestudio .studio-v2-sources-panel,
  #livestudio .studio-v2-right-rail{
    grid-column:1!important;
  }
  #livestudio .studio-v2-right-rail{
    grid-template-columns:repeat(3,1fr)!important;
  }
  #livestudio .studio-source-wall{
    grid-template-columns:repeat(3,1fr)!important;
  }
  #studioScreenManager .studio-screen-grid{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media(max-width:700px){
  #livestudio .studio-v2-monitor-grid{
    grid-template-columns:1fr!important;
  }
  #livestudio .studio-source-wall{
    grid-template-columns:repeat(2,1fr)!important;
  }
  #livestudio .studio-v2-right-rail{
    grid-template-columns:1fr!important;
  }
}

/* ===== STUDIO PROFESSIONAL TOOLS V2 ===== */

#livestudio #studioProControlRoom{
  display:block!important;
  margin-top:10px!important;
}

#livestudio .studio-pro16-toolbar,
#livestudio .studio-pro-card{
  background:linear-gradient(180deg,#0e1b26,#09151e)!important;
  border:1px solid #223d50!important;
  border-radius:9px!important;
}

#livestudio .studio-pro16-toolbar{
  padding:10px!important;
}

#livestudio .studio-pro16-toolbar>strong{
  color:#72bdff!important;
}

#livestudio .studio-pro-card .pro-head span{
  color:#69b7ff!important;
}

#livestudio .studio-pro-monitor-buttons button,
#livestudio .studio-pro-source-screens button{
  background:#0c2639!important;
  border:1px solid #315d7a!important;
  color:#76c0ff!important;
  border-radius:6px!important;
}

#livestudio .studio-detach-source-btn{
  margin-left:auto!important;
  background:#0c2a42!important;
  color:#79c3ff!important;
  border:1px solid #3475a5!important;
}

#livestudio .studio-ticker-advanced{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border-top:1px solid #203746;
  margin-top:9px;
  padding-top:9px;
}

#livestudio .studio-ticker-advanced label{
  color:#8fa4b4;
  font-size:8px;
}

#livestudio .studio-ticker-advanced label>span{
  display:block;
  margin-bottom:5px;
}

#livestudio .studio-breaking-toggle{
  display:flex!important;
  gap:6px!important;
  align-items:center!important;
  padding:7px 9px!important;
  border:1px solid #75303a!important;
  background:#2a1117!important;
  color:#ff818a!important;
  border-radius:6px!important;
}

#livestudio .studio-breaking-toggle span{
  margin:0!important;
  color:#ff818a!important;
  font-weight:900!important;
}

#livestudio .studio-v2-ticker-preview{
  overflow:hidden!important;
  white-space:nowrap!important;
}

#livestudio #studioTickerPreviewText{
  display:inline-block!important;
  min-width:max-content!important;
  animation:fokisenBreakingScroll 12s linear infinite!important;
}

#livestudio #studioTickerPreviewText.breaking::before{
  content:"BREAKING NEWS  •  ";
  color:#ff5866;
  font-weight:1000;
}

@keyframes fokisenBreakingScroll{
  from{transform:translateX(80%)}
  to{transform:translateX(-110%)}
}

#livestudio .studio-overlay-positioner{
  border-top:1px solid #213746;
  margin-top:10px;
  padding-top:9px;
}

#livestudio .studio-overlay-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

#livestudio .studio-overlay-title strong{
  color:#e6edf3;
  font-size:9px;
}

#livestudio .studio-overlay-title small{
  color:#738a9c;
  font-size:7px;
}

#livestudio .studio-overlay-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

#livestudio .studio-overlay-grid label{
  color:#7e94a5;
  font-size:7px;
}

#livestudio .studio-overlay-grid input{
  width:100%;
  margin-top:3px;
}

#livestudio .studio-overlay-presets{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}

#livestudio .studio-overlay-presets button{
  background:#0d2231;
  border:1px solid #29495e;
  color:#9ec7e7;
  border-radius:5px;
  padding:5px 7px;
  font-size:7px;
}

#livestudio .preview-monitor .studio-v2-video-stage{
  position:relative!important;
}

#studioOverlayPreviewHandle{
  display:none;
  position:absolute;
  z-index:40;
  object-fit:fill;
  cursor:move;
  border:1px dashed #72bdff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
  touch-action:none;
}

#studioOverlayPreviewHandle.visible{
  display:block;
}

#livestudio .studio-game-screen{
  margin-left:5px!important;
  background:#0c2639!important;
  color:#72bdff!important;
  border-color:#315d7a!important;
}

@media(max-width:800px){

  #livestudio .studio-overlay-grid{
    grid-template-columns:1fr 1fr;
  }

  #livestudio .studio-ticker-advanced{
    grid-template-columns:1fr;
  }
}
