/* Fokisen Live TV Control Center v4.0
   Layout target: approved Live TV mockup.
   Accent target: blue/charcoal (no gold), per user direction.
   No fake program imagery: live output + real metadata only.
*/
:root{
  --fs4-bg:#071018;
  --fs4-bg2:#09141d;
  --fs4-side:#09141d;
  --fs4-panel:#0d1923;
  --fs4-panel2:#101f2b;
  --fs4-line:#233947;
  --fs4-line2:#2b4556;
  --fs4-text:#f4f7fb;
  --fs4-muted:#8ea0b1;
  --fs4-blue:#3192ff;
  --fs4-blue2:#65b3ff;
  --fs4-green:#31df82;
  --fs4-red:#ff4a58;
  --fs4-amber:#ffb547;
}
*{box-sizing:border-box}
body.fs4-live{
  background:var(--fs4-bg)!important;
  color:var(--fs4-text)!important;
  --panel:var(--fs4-panel)!important;
  --line:var(--fs4-line)!important;
  --muted:var(--fs4-muted)!important;
}
body.fs4-live .app-shell{
  grid-template-columns:214px minmax(0,1fr)!important;
  background:var(--fs4-bg)!important;
}
body.fs4-live .sidebar{
  width:214px!important;
  height:100vh!important;
  position:sticky!important;
  top:0!important;
  padding:17px 12px 14px!important;
  background:
    radial-gradient(240px 180px at 45% -30px,rgba(49,146,255,.10),transparent 70%),
    #09141d!important;
  border-right:1px solid #1d303d!important;
}
body.fs4-live .sidebar-head{
  padding:0 6px 15px!important;
  margin-bottom:8px!important;
  border-bottom:1px solid #162934!important;
}
body.fs4-live .brand{padding:0!important;display:block!important}
body.fs4-live .sidebar-brand-logo{
  width:156px!important;height:52px!important;object-fit:contain!important;object-position:left center!important;
}
body.fs4-live #workspaceBrandLabel{
  display:block!important;
  padding:0!important;
  margin:-9px 0 0 48px!important;
  color:#70baff!important;
  letter-spacing:.24em!important;
  font-size:8px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}
body.fs4-live .sidebar .nav-group-label,
body.fs4-live .sidebar .nav-more-toggle,
body.fs4-live .sidebar .nav-more-drawer>.nav-group-label{display:none!important}
body.fs4-live .sidebar .nav-more-drawer{display:block!important}
body.fs4-live .sidebar .nav-item{
  min-height:42px!important;
  margin:2px 0!important;
  padding:10px 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#c6d1da!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:8px!important;
  font-size:12px!important;
}
body.fs4-live .sidebar .nav-item:hover{
  background:#101f2b!important;
  border-color:#1d3443!important;
  color:#fff!important;
}
body.fs4-live .sidebar .nav-item.active,
body.fs4-live .sidebar .nav-item[data-section="video"].active{
  background:linear-gradient(90deg,rgba(49,146,255,.18),rgba(49,146,255,.045))!important;
  border-color:#275277!important;
  box-shadow:inset 3px 0 0 var(--fs4-blue)!important;
  color:#8ac7ff!important;
}
body.fs4-live .sidebar .nav-glyph{
  width:21px!important;
  display:grid!important;
  place-items:center!important;
  color:inherit!important;
  font-size:16px!important;
}
body.fs4-live .sidebar-footer{
  margin-top:auto!important;
  border:1px solid #234156!important;
  border-radius:10px!important;
  background:linear-gradient(145deg,rgba(49,146,255,.12),#0d1923)!important;
  padding:12px!important;
}
body.fs4-live .sidebar-footer:before{
  content:"◆  Build Greater\A Streams Further";
  white-space:pre;
  display:block;
  color:#77bdff;
  font-weight:900;
  font-size:11px;
  line-height:1.35;
  margin-bottom:8px;
}
body.fs4-live .sidebar-footer #sessionName,
body.fs4-live .sidebar-footer #sessionRole,
body.fs4-live .sidebar-footer .signout-btn{display:none!important}

/* top bar */
body.fs4-live .workspace-main{min-width:0!important;background:var(--fs4-bg)!important}
body.fs4-live .topbar{
  height:58px!important;
  min-height:58px!important;
  margin:0!important;
  padding:8px 16px!important;
  display:grid!important;
  grid-template-columns:minmax(330px,500px) 1fr auto!important;
  gap:14px!important;
  align-items:center!important;
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  background:rgba(8,20,30,.96)!important;
  border-bottom:1px solid #172c39!important;
  backdrop-filter:blur(14px)!important;
}
body.fs4-live .topbar-title-row{display:none!important}
body.fs4-live .global-search{
  width:100%!important;
  height:38px!important;
  margin:0!important;
  padding:0 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid #264153!important;
  border-radius:8px!important;
  background:#10202c!important;
}
body.fs4-live .global-search input{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#eaf2f8!important;
  padding:0!important;
}
body.fs4-live .global-search input::placeholder{color:#96a9ba!important}
body.fs4-live .top-actions{
  grid-column:3!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
body.fs4-live .top-actions>.system-health,
body.fs4-live .top-actions>#devUser,
body.fs4-live .top-actions>#panelInstallBtn,
body.fs4-live .top-actions>#createServiceBtn,
body.fs4-live .top-actions>.profile-chip{display:none!important}
body.fs4-live .fs4-top-quick{
  border:1px solid #4da5ff!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#45a5ff,#257fd7)!important;
  color:#fff!important;
  padding:9px 14px!important;
  font-size:11px!important;
  font-weight:900!important;
  box-shadow:0 5px 15px rgba(49,146,255,.18)!important;
}
body.fs4-live .fs4-top-bell{
  width:38px!important;height:38px!important;
  border:1px solid #284555!important;
  border-radius:8px!important;
  background:#101e29!important;
  color:#e0eaf1!important;
  padding:0!important;
  position:relative!important;
}
body.fs4-live .fs4-top-bell:after{
  content:"3";
  position:absolute;
  right:-4px;top:-5px;
  width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:#ff4655;border:2px solid #09141d;
  font-size:8px;font-weight:900;
}
body.fs4-live .fs4-admin{
  min-width:165px;
  display:flex;align-items:center;gap:8px;
}
body.fs4-live .fs4-admin-avatar{
  width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;
  background:#193a58;color:#8fcaff;border:1px solid #2e6291;
  font-weight:900;
}
body.fs4-live .fs4-admin strong{display:block;font-size:11px}
body.fs4-live .fs4-admin small{display:block;color:#8397a8;font-size:8px;margin-top:1px}

/* page */
body.fs4-live #video{
  min-height:calc(100vh - 58px)!important;
  padding:0!important;
  background:
    radial-gradient(860px 240px at 70% 0,rgba(49,146,255,.08),transparent 70%),
    #071018!important;
}
body.fs4-live #video>.fs4-legacy{display:none!important}
body.fs4-live #fs4Shell{padding:0 15px 38px!important}
body.fs4-live .fs4-hero{
  min-height:111px;
  padding:14px 14px 13px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
body.fs4-live .fs4-hero:after{
  content:"";
  position:absolute;
  right:6%;top:-88px;
  width:520px;height:235px;border-radius:50%;
  background:
    radial-gradient(circle at 62% 65%,rgba(49,146,255,.18),transparent 25%),
    repeating-radial-gradient(circle at 62% 65%,rgba(91,170,255,.09) 0 1px,transparent 1px 15px);
  transform:rotate(-9deg);
  opacity:.9;
  pointer-events:none;
}
body.fs4-live .fs4-hero-copy{position:relative;z-index:2}
body.fs4-live .fs4-crumb{
  display:flex;align-items:center;gap:9px;
  color:#91a2b2;font-size:10px;margin-bottom:7px
}
body.fs4-live .fs4-crumb b{color:#dce6ed}
body.fs4-live .fs4-title{display:flex;align-items:center;gap:10px}
body.fs4-live .fs4-title h2{
  margin:0!important;
  color:#f5f8fb!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body.fs4-live .fs4-247{
  padding:4px 9px;
  border:1px solid #2e6ca0;
  border-radius:999px;
  color:#75bcff;
  background:#0d2840;
  font-size:9px;
  font-weight:900
}
body.fs4-live .fs4-hero p{
  margin:7px 0 0!important;
  color:#95a7b7!important;
  font-size:13px!important
}
body.fs4-live .fs4-hero-tag{
  position:relative;z-index:2;
  align-self:center;
  margin-right:10px;
  color:#7890a3;
  font-size:9px;
  letter-spacing:.40em;
  line-height:1.6
}
body.fs4-live .fs4-hero-tag b{display:block;color:#c7d5df;font-weight:500}

/* top selector strip */
body.fs4-live .fs4-channelbar{
  display:grid;
  grid-template-columns:1.58fr .82fr .86fr .48fr;
  gap:8px;
  margin-bottom:8px
}
body.fs4-live .fs4-channel-card,
body.fs4-live .fs4-select-card,
body.fs4-live .fs4-op-card{
  min-height:62px;
  border:1px solid #263b4a;
  border-radius:9px;
  background:linear-gradient(180deg,#101d27,#0c1720);
  padding:9px 10px
}
body.fs4-live .fs4-channel-card{
  display:flex;align-items:center;gap:10px
}
body.fs4-live .fs4-lock{font-size:15px;color:#6ab6ff}
body.fs4-live .fs4-logo{
  width:52px;height:38px;
  border-radius:7px;border:1px solid #2e70ac;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#0c4d86,#0b2844);
  color:#fff;font-size:9px;font-weight:1000;text-align:center
}
body.fs4-live .fs4-channel-copy{flex:1;min-width:0}
body.fs4-live .fs4-channel-copy strong{
  display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
body.fs4-live .fs4-channel-copy small{display:block;margin-top:3px;color:#8fa1b2;font-size:8px}
body.fs4-live .fs4-onair{
  padding:4px 7px;border:1px solid #218652;border-radius:999px;
  background:#0d2c1e;color:#5de594;font-size:8px;font-weight:900;white-space:nowrap
}
body.fs4-live .fs4-label{display:block;color:#8799aa;font-size:8px;margin-bottom:4px}
body.fs4-live .fs4-select-card select{
  width:100%!important;min-height:34px!important;margin:0!important;
  border:1px solid #2b4353!important;border-radius:7px!important;
  background:#12212c!important;color:#e9f0f5!important;
  padding:6px 8px!important;font-size:10px!important
}
body.fs4-live .fs4-op-card{display:flex;align-items:center;gap:8px}
body.fs4-live .fs4-op-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--fs4-green);box-shadow:0 0 13px rgba(49,223,130,.65)
}
body.fs4-live .fs4-op-card strong{display:block;color:#64e99b;font-size:11px}
body.fs4-live .fs4-op-card small{display:block;color:#8397a8;font-size:7px;margin-top:3px}

/* exact-style dashboard grid */
body.fs4-live .fs4-grid1,
body.fs4-live .fs4-grid2,
body.fs4-live .fs4-grid3,
body.fs4-live .fs4-grid4{
  display:grid;
  gap:8px;
  align-items:stretch
}
body.fs4-live .fs4-grid1{grid-template-columns:1.16fr .84fr 1.05fr .87fr}
body.fs4-live .fs4-grid2{grid-template-columns:.95fr .99fr 1.06fr .88fr;margin-top:8px}
body.fs4-live .fs4-grid3{grid-template-columns:1.16fr .92fr .86fr 1.12fr;margin-top:8px}
body.fs4-live .fs4-grid4{grid-template-columns:1.15fr 1.15fr .90fr .90fr;margin-top:8px}

body.fs4-live .fs4-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #213542;
  border-radius:9px;
  background:linear-gradient(180deg,#0d1923,#0a141d)
}
body.fs4-live .fs4-card-head{
  height:34px;
  padding:7px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid #1c2d39
}
body.fs4-live .fs4-card-head strong{font-size:10px;color:#f0f4f7}
body.fs4-live .fs4-card-head small{font-size:7px;color:#8396a7}
body.fs4-live .fs4-live-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 6px;border-radius:5px;
  background:#d73847;color:#fff;border:1px solid #f05563;
  font-size:7px;font-weight:900
}
body.fs4-live .fs4-live-pill:before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}

/* now playing = real video mirror */
body.fs4-live .fs4-now-visual{
  height:160px;
  position:relative;
  overflow:hidden;
  background:#020507
}
body.fs4-live #fs4NowCanvas{
  width:100%;height:100%;display:block;background:#020507
}
body.fs4-live .fs4-video-empty{
  position:absolute;inset:0;
  display:grid;place-items:center;
  color:#7890a2;
  background:linear-gradient(145deg,#071019,#0c1a25);
  text-align:center;padding:14px;font-size:9px
}
body.fs4-live .fs4-now-caption{
  position:absolute;left:9px;bottom:8px;z-index:3;
  max-width:74%;
  border-left:3px solid var(--fs4-blue);
  border-radius:4px;
  background:rgba(3,9,14,.84);
  padding:5px 7px;
  backdrop-filter:blur(3px)
}
body.fs4-live .fs4-now-caption strong{display:block;color:#fff;font-size:10px}
body.fs4-live .fs4-now-caption small{display:block;color:#d1dce4;font-size:7px;margin-top:2px}
body.fs4-live .fs4-progress{height:4px;background:#223542;margin:7px 10px 0;border-radius:999px;overflow:hidden}
body.fs4-live .fs4-progress i{display:block;width:0;height:100%;background:var(--fs4-blue)}
body.fs4-live .fs4-now-meta{display:flex;justify-content:space-between;padding:5px 10px 8px;color:#8395a6;font-size:7px}

/* next + preview actual metadata/poster only */
body.fs4-live .fs4-next-body{padding:8px}
body.fs4-live .fs4-next-art,
body.fs4-live .fs4-preview-art{
  min-height:82px;border:1px solid #253b4b;border-radius:7px;
  background:#0a1620 center/cover no-repeat;
  position:relative;
  display:grid;place-items:center;
  color:#7890a3;text-align:center;padding:10px
}
body.fs4-live .fs4-next-art .fs4-empty,
body.fs4-live .fs4-preview-art .fs4-empty{
  font-size:8px;color:#7e93a5;max-width:90%
}
body.fs4-live .fs4-next-body h3{margin:7px 0 3px!important;font-size:10px!important}
body.fs4-live .fs4-next-body p{margin:0!important;color:#8fa1b1!important;font-size:7px!important;line-height:1.45!important}
body.fs4-live .fs4-preview-wrap{padding:8px}
body.fs4-live .fs4-preview-art{min-height:143px}
body.fs4-live .fs4-preview-tag{
  position:absolute;left:7px;top:7px;
  padding:3px 6px;border:1px solid #506679;border-radius:5px;
  background:rgba(0,0,0,.55);color:#fff;font-size:7px;font-weight:900
}
body.fs4-live .fs4-preview-caption{
  position:absolute;left:7px;bottom:7px;right:7px;
  background:rgba(0,0,0,.58);border-radius:5px;padding:4px 6px;
  color:#fff;font-size:8px;font-weight:900
}

/* real schedule rows */
body.fs4-live .fs4-schedule-mount{padding:4px 8px 8px;min-height:198px}
body.fs4-live .fs4-schedule-mount .tv-ui03-schedule-row{
  min-height:31px!important;
  display:grid!important;
  grid-template-columns:42px 1fr 68px!important;
  gap:7px!important;
  align-items:center!important;
  padding:5px 0!important;
  border-bottom:1px solid #1b2c38!important;
  background:transparent!important
}
body.fs4-live .fs4-schedule-mount .tv-ui03-schedule-row time{font-size:8px!important;color:#b9c7d2!important}
body.fs4-live .fs4-schedule-mount .tv-ui03-schedule-row strong{font-size:8px!important;color:#dce5ec!important}
body.fs4-live .fs4-schedule-mount .tv-ui03-schedule-row small{font-size:7px!important;color:#7f93a5!important}
body.fs4-live .fs4-schedule-mount .tv-ui03-schedule-row b{font-size:7px!important;color:#7e93a5!important;font-weight:500!important}

/* details */
body.fs4-live .fs4-details{padding:8px 10px}
body.fs4-live .fs4-details-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
body.fs4-live .fs4-details-logo{
  width:54px;height:42px;border-radius:7px;border:1px solid #2c70ad;
  background:#0b3c69;color:#fff;display:grid;place-items:center;
  text-align:center;font-size:9px;font-weight:900
}
body.fs4-live .fs4-details-top strong{font-size:11px}
body.fs4-live .fs4-kv{display:grid;grid-template-columns:78px 1fr;gap:5px 7px;font-size:7px}
body.fs4-live .fs4-kv span{color:#8093a4}
body.fs4-live .fs4-kv b{font-weight:500;color:#d7e0e7;overflow:hidden;text-overflow:ellipsis}

/* live output real player */
body.fs4-live .fs4-output .tv-ui03-player-shell{
  height:144px!important;
  min-height:144px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#020507!important
}
body.fs4-live .fs4-output .tv-ui03-player-shell video{
  width:100%!important;height:100%!important;object-fit:cover!important;background:#020507!important
}
body.fs4-live .fs4-output .tv-ui03-program-footer{
  min-height:25px!important;
  margin:0!important;
  padding:4px 7px!important;
  border-radius:0!important;
  border-top:1px solid #1d2f3b!important;
  background:#08121a!important;
  font-size:7px!important
}
body.fs4-live .fs4-output .tv-ui03-watch-actions{display:none!important}

/* playlist builder uses actual controls */
body.fs4-live .fs4-play-controls{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:5px;
  padding:7px 8px;
  border-bottom:1px solid #1b2d3a
}
body.fs4-live .fs4-play-asset{
  display:grid;grid-template-columns:1fr auto;gap:5px;
  padding:0 8px 7px
}
body.fs4-live .fs4-play-controls select,
body.fs4-live .fs4-play-asset select{
  min-width:0!important;
  width:100%!important;
  margin:0!important;
  min-height:30px!important;
  padding:5px 7px!important;
  border:1px solid #294253!important;
  border-radius:6px!important;
  background:#12212d!important;
  color:#e7eef4!important;
  font-size:8px!important
}
body.fs4-live .fs4-play-controls button,
body.fs4-live .fs4-play-asset button{
  min-height:30px!important;
  padding:5px 8px!important;
  border-radius:6px!important;
  border:1px solid #357fc0!important;
  background:#0e3150!important;
  color:#7fc2ff!important;
  font-size:8px!important;
  font-weight:900!important
}
body.fs4-live #tvPlaylistItems{
  max-height:106px!important;
  overflow:auto!important;
  padding:3px 8px 8px!important;
  display:grid!important;
  gap:4px!important
}
body.fs4-live #tvPlaylistItems .mini-item{
  min-height:30px!important;
  padding:5px 6px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  border:1px solid #1f3443!important;
  border-radius:6px!important;
  background:#0b1720!important
}
body.fs4-live #tvPlaylistItems .mini-item strong{font-size:8px!important}
body.fs4-live #tvPlaylistItems .mini-item small{font-size:7px!important}
body.fs4-live #tvPlaylistItems .mini-item button{font-size:7px!important;padding:4px 5px!important}

/* system health + ingest */
body.fs4-live .fs4-health-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 7px
}
body.fs4-live .fs4-gauge-wrap{text-align:center}
body.fs4-live .fs4-gauge{
  width:51px;height:51px;margin:auto;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle,#0c1720 57%,transparent 58%),conic-gradient(var(--fs4-blue) 0 78%,#253744 78% 100%);
  border:1px solid #2c4555;
  color:#fff;font-size:10px;font-weight:900
}
body.fs4-live .fs4-gauge-wrap small{display:block;margin-top:4px;color:#8194a5;font-size:7px}
body.fs4-live .fs4-health-stack{display:grid;grid-template-rows:1fr 1fr;gap:8px}
body.fs4-live .fs4-ingest-list{padding:5px 8px 8px}
body.fs4-live .fs4-ingest-row{
  min-height:26px;
  display:grid;grid-template-columns:10px 1fr auto;gap:6px;align-items:center;
  border-bottom:1px solid #1a2a36;
  font-size:7px;color:#c4d0d9
}
body.fs4-live .fs4-ingest-dot{width:7px;height:7px;border-radius:50%;background:#556a78}
body.fs4-live .fs4-ingest-dot.good{background:var(--fs4-green);box-shadow:0 0 8px rgba(49,223,130,.5)}
body.fs4-live .fs4-ingest-dot.warn{background:var(--fs4-amber)}
body.fs4-live .fs4-ingest-dot.bad{background:var(--fs4-red)}

/* source / ads / emergency / quick */
body.fs4-live .fs4-source-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px
}
body.fs4-live .fs4-source-grid button{
  min-height:50px!important;
  border:1px solid #294153!important;
  border-radius:7px!important;
  background:#101e29!important;
  color:#cbd6df!important;
  font-size:8px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:3px!important
}
body.fs4-live .fs4-source-grid button.active{
  border-color:#3789cb!important;background:#0e2b43!important;color:#7cc2ff!important
}
body.fs4-live .fs4-source-url{
  display:grid;grid-template-columns:66px 1fr 76px;gap:5px;align-items:center;
  padding:0 8px 8px;
  font-size:7px;color:#7e93a5
}
body.fs4-live .fs4-source-url code{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid #203746;border-radius:5px;background:#071019;color:#9eb5c7;padding:5px
}
body.fs4-live #adBreakList{
  max-height:119px!important;overflow:auto!important;
  padding:4px 8px 8px!important
}
body.fs4-live #adBreakList .mini-item{
  padding:5px 4px!important;
  border:0!important;border-bottom:1px solid #1a2a36!important;
  border-radius:0!important;background:transparent!important
}
body.fs4-live #adBreakList strong{font-size:8px!important}
body.fs4-live #adBreakList small{font-size:7px!important}
body.fs4-live .fs4-danger{
  width:calc(100% - 16px)!important;margin:8px!important;
  border:1px solid #ff6570!important;border-radius:7px!important;
  background:linear-gradient(180deg,#ff4f5c,#df3643)!important;
  color:#fff!important;padding:10px!important;font-size:8px!important;font-weight:900!important
}
body.fs4-live .fs4-emergency-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 8px 8px
}
body.fs4-live .fs4-emergency-actions button,
body.fs4-live .fs4-quick-grid button{
  border:1px solid #294153!important;border-radius:7px!important;
  background:#101e29!important;color:#d3dde6!important;
  font-size:8px!important;padding:7px!important
}
body.fs4-live .fs4-quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px
}
body.fs4-live .fs4-quick-grid button{
  min-height:47px!important;color:#7cc2ff!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important
}
body.fs4-live .fs4-quick-grid b{font-size:13px}

/* real logs + urls */
body.fs4-live .fs4-event-mount{padding:4px 8px 8px}
body.fs4-live .fs4-event-mount .tv-ui03-event-row{
  display:grid!important;grid-template-columns:36px 60px 1fr!important;gap:6px!important;align-items:center!important;
  min-height:23px!important;border-bottom:1px solid #1a2b37!important;font-size:7px!important
}
body.fs4-live .fs4-stream-urls{padding:4px 8px 8px}
body.fs4-live .fs4-url-row{
  min-height:23px;
  display:grid;grid-template-columns:74px 1fr 18px;gap:6px;align-items:center;
  border-bottom:1px solid #1a2b37;font-size:7px
}
body.fs4-live .fs4-url-row b{color:#c5d0d9}
body.fs4-live .fs4-url-row code{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9cb1c2
}
body.fs4-live .fs4-url-row button{
  border:0!important;background:transparent!important;color:#6ab7ff!important;padding:0!important;font-size:9px!important
}

/* real channel selector popup */
body.fs4-live .fs4-station-drawer{
  margin-top:8px;
  border:1px solid #223949;border-radius:8px;background:#0b1721;
  padding:7px
}
body.fs4-live .fs4-station-drawer[hidden]{display:none!important}
body.fs4-live #tvUi03StationStrip{
  display:flex!important;gap:7px!important;overflow-x:auto!important;padding:0!important
}
body.fs4-live #tvUi03StationStrip .tv-ui03-station-card{
  min-width:150px!important;padding:6px!important
}

/* operations workspace: no "Open" wall */
body.fs4-live .fs4-ops{
  margin-top:8px;
  border:1px solid #223847;
  border-radius:9px;
  overflow:hidden;
  background:#0a151e
}
body.fs4-live .fs4-ops-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border-bottom:1px solid #1b2d39;background:#0e1a24
}
body.fs4-live .fs4-ops-head strong{font-size:10px}
body.fs4-live .fs4-ops-head span{font-size:7px;color:#8295a6}
body.fs4-live .fs4-tabs{
  display:flex;gap:5px;overflow-x:auto;padding:8px;border-bottom:1px solid #1c2f3d;background:#0b1721
}
body.fs4-live .fs4-tabs button{
  flex:0 0 auto!important;
  border:1px solid #294456!important;
  border-radius:7px!important;
  background:#0f1e29!important;
  color:#aebdca!important;
  padding:7px 9px!important;
  font-size:8px!important;
  font-weight:900!important
}
body.fs4-live .fs4-tabs button.active{
  border-color:#348bd0!important;background:#0f2c45!important;color:#7cc2ff!important
}
body.fs4-live .fs4-panes{padding:9px}
body.fs4-live .fs4-pane{display:none}
body.fs4-live .fs4-pane.active{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
body.fs4-live .fs4-pane>.panel,
body.fs4-live .fs4-pane>.panel-sub,
body.fs4-live .fs4-pane>details{
  display:block!important;
  margin:0!important;
  min-width:0!important;
  border:1px solid #213746!important;
  border-radius:8px!important;
  background:#0d1923!important
}
body.fs4-live .fs4-pane .compact-collapsed>:not(.panel-head){display:block!important}
body.fs4-live .fs4-pane .panel-collapse-toggle{display:none!important}
body.fs4-live .fs4-pane details>summary{display:none!important}
body.fs4-live .fs4-pane h2,
body.fs4-live .fs4-pane h3,
body.fs4-live .fs4-pane h4{font-size:10px!important}
body.fs4-live .fs4-pane input,
body.fs4-live .fs4-pane select,
body.fs4-live .fs4-pane textarea{font-size:9px!important}
body.fs4-live .fs4-pane button{font-size:8px!important}
body.fs4-live .fs4-pane .panel-head{min-height:38px!important}

/* test badge */
body.fs4-live .fs4-badge{
  position:fixed;right:10px;bottom:10px;z-index:130;
  padding:5px 8px;border-radius:999px;
  border:1px solid #2d6a9e;background:#0b2640;color:#79c1ff;
  font-size:8px;font-weight:1000
}

@media(max-width:1360px){
  body.fs4-live .fs4-grid1{grid-template-columns:1.1fr .82fr 1fr}
  body.fs4-live .fs4-grid1>.fs4-details-card{grid-column:1/-1}
  body.fs4-live .fs4-grid2{grid-template-columns:1fr 1fr 1fr}
  body.fs4-live .fs4-grid2>.fs4-health-stack{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}
  body.fs4-live .fs4-grid3{grid-template-columns:1fr 1fr}
  body.fs4-live .fs4-grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  body.fs4-live .app-shell{grid-template-columns:1fr!important}
  body.fs4-live .sidebar{width:auto!important;height:auto!important;position:relative!important}
  body.fs4-live .topbar{grid-template-columns:1fr auto!important}
  body.fs4-live .top-actions{grid-column:2!important}
  body.fs4-live .fs4-channelbar,
  body.fs4-live .fs4-grid1,
  body.fs4-live .fs4-grid2,
  body.fs4-live .fs4-grid3,
  body.fs4-live .fs4-grid4{grid-template-columns:1fr 1fr}
  body.fs4-live .fs4-grid1>.fs4-details-card,
  body.fs4-live .fs4-grid2>.fs4-health-stack{grid-column:auto}
  body.fs4-live .fs4-pane.active{grid-template-columns:1fr}
}
@media(max-width:650px){
  body.fs4-live #fs4Shell{padding:0 8px 34px!important}
  body.fs4-live .topbar{grid-template-columns:1fr!important;height:auto!important}
  body.fs4-live .top-actions{grid-column:1!important}
  body.fs4-live .fs4-admin{display:none}
  body.fs4-live .fs4-hero{min-height:102px;padding-left:3px}
  body.fs4-live .fs4-hero-tag{display:none}
  body.fs4-live .fs4-title h2{font-size:28px!important}
  body.fs4-live .fs4-channelbar,
  body.fs4-live .fs4-grid1,
  body.fs4-live .fs4-grid2,
  body.fs4-live .fs4-grid3,
  body.fs4-live .fs4-grid4{grid-template-columns:1fr}
  body.fs4-live .fs4-health-stack{grid-template-columns:1fr!important}
}