/* Sngine-native web UI. Installed after live.css by install.php.
 * The inert ID in :is is a deliberate specificity boundary over legacy rules.
 * All rules stay inside the add-on; Sngine owns body, navigation and theme mode.
 * Runtime tokens come from native components in syncLiveTheme(), not a palette.
 */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) {
  --fc-live-accent: var(--link-color, #5e72e4);
  --fc-live-on-accent: #fff;
  --fc-live-input: var(--fc-live-surface);
  --fc-live-input-text: var(--fc-live-text);
  --fc-live-radius: 16px;
  background: var(--fc-live-page) !important;
  color: var(--fc-live-text) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5;
}

html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(button, input, select, textarea) {
  font-family: inherit;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--fc-live-accent) !important;
  outline-offset: 3px;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Layout: readable studio, compact setup preview, focused viewer. */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-shell {
  grid-template-columns: 210px minmax(0, 1fr) !important;
  max-width: 1640px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-sidebar {
  background: transparent !important;
  border: 0 !important;
  padding: 28px 12px !important;
  align-self: start;
  min-height: 0 !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-nav a {
  font-size: 13px !important;
  min-height: 46px !important;
  border-radius: 10px !important;
  gap: 10px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-nav a.active {
  background: color-mix(in srgb, var(--fc-live-accent) 12%, var(--fc-live-surface)) !important;
  color: var(--fc-live-link, var(--fc-live-accent)) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-watch {
  padding: 26px 24px 40px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-watch {
  max-width: 1548px !important;
  margin: 0 auto !important;
  padding: 24px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-watch-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  align-items: start !important;
  gap: 20px !important;
  margin: 0 !important;
  max-width: none !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-watch-main, .fc-watch-side) {
  min-width: 0 !important;
  max-width: none !important;
  gap: 18px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-page-head, .fc-live-watch-head) {
  margin: 0 0 22px !important;
  padding: 0 !important;
  gap: 16px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-page-head h1 {
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.3 !important;
  margin: 6px 0 !important;
  color: var(--fc-live-text) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-page-head p, .fc-live-page-kicker) {
  font-size: 13px !important;
  color: var(--fc-live-muted) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 20px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-stat-card, .fc-watch-info-card, .fc-watch-details, .fc-live-activity-card) {
  background: var(--fc-live-surface) !important;
  color: var(--fc-live-text) !important;
  border: 1px solid var(--fc-live-border) !important;
  border-radius: var(--fc-live-radius) !important;
  box-shadow: none !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card {
  min-height: 86px !important;
  padding: 16px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card strong { font-size: 23px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card span { font-size: 12px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card > i {
  background: var(--fc-live-surface-soft) !important;
  color: var(--fc-live-link, var(--fc-live-accent)) !important;
  border-radius: 10px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-player-card {
  border: 0 !important;
  border-radius: var(--fc-live-radius) !important;
  overflow: hidden !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-preview, .fc-live-preview-frame, .fc-live-preview-body) {
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] :is(.fc-live-preview, .fc-live-preview-frame, .fc-live-preview-body) {
  height: 260px !important;
  min-height: 0 !important;
  aspect-ratio: auto;
  background: var(--fc-live-surface-soft) !important;
  color: var(--fc-live-text) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-preview {
  border: 1px dashed var(--fc-live-border) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-watch-player-overlay { display: none !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-play i { color: var(--fc-live-link, var(--fc-live-accent)) !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-play {
  background: var(--fc-live-surface) !important;
  color: var(--fc-live-link, var(--fc-live-accent)) !important;
  box-shadow: none !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 14px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .js_live-pro-preview-title {
  color: var(--fc-live-text) !important;
  font-size: 18px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .js_live-pro-preview-help {
  color: var(--fc-live-muted) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-feed-live-badge:is(.ended, .quality) {
  background: rgba(20, 24, 30, .78) !important;
  color: #fff !important;
}

/* Forms use the same native input/primary styles in either Sngine mode. */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-field .form-control, .fc-live-copy-row input) {
  background: var(--fc-live-input) !important;
  color: var(--fc-live-input-text) !important;
  border: 1px solid var(--fc-live-border) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-info { overflow: hidden !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-create-tabs, .fc-live-result-head) {
  background: transparent !important;
  border-bottom: 1px solid var(--fc-live-border) !important;
  padding: 16px 20px !important;
  color: var(--fc-live-text) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-create-form, .fc-live-create-settings) {
  padding: 20px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-field > label, .fc-live-create-settings > label) {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fc-live-text) !important;
  margin-bottom: 8px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions > :is(label, button) {
  flex: 1 1 145px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 68px !important;
  padding: 12px !important;
  background: var(--fc-live-surface) !important;
  color: var(--fc-live-text) !important;
  border: 1px solid var(--fc-live-border) !important;
  border-radius: 10px !important;
  text-align: start !important;
  white-space: normal !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions :is(strong, em) {
  white-space: normal !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions em {
  font-size: 12px !important;
  color: var(--fc-live-muted) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions > :is(.active, label:has(input:checked)) {
  border-color: var(--fc-live-accent) !important;
  background: color-mix(in srgb, var(--fc-live-accent) 8%, var(--fc-live-surface)) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) input[type="radio"] { accent-color: var(--fc-live-accent); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-create-btn, .fc-watch-follow) {
  background: var(--fc-live-accent) !important;
  color: var(--fc-live-on-accent) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  font-size: 14px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-action-secondary, .fc-watch-actions > button, .fc-live-reaction-control > button) {
  background: var(--fc-live-surface) !important;
  color: var(--fc-live-text) !important;
  border: 1px solid var(--fc-live-border) !important;
  min-height: 40px !important;
  height: auto !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
}

/* Shared activity panel: legible tabs and a bounded chat, without hidden controls leaking. */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-side {
  position: sticky !important;
  top: 88px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-activity-card {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-activity-nav {
  background: var(--fc-live-surface) !important;
  border-radius: var(--fc-live-radius) var(--fc-live-radius) 0 0 !important;
  border-bottom: 1px solid var(--fc-live-border) !important;
  padding: 6px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-activity-tabs {
  background: transparent !important;
  gap: 4px !important;
  padding: 0 !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-activity-tabs button {
  background: transparent !important;
  color: var(--fc-live-muted) !important;
  border: 0 !important;
  border-radius: 8px !important;
  min-height: 42px !important;
  font-size: 12px !important;
  padding: 9px 10px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-activity-tabs button.active {
  background: var(--fc-live-accent) !important;
  color: var(--fc-live-on-accent) !important;
  box-shadow: none !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-activity-tabs button.active :is(i, em, span) {
  color: inherit !important;
  background: transparent !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-chat.is-active {
  display: flex !important;
  height: min(580px, calc(100dvh - 200px)) !important;
  min-height: 360px !important;
  border-radius: 0 0 var(--fc-live-radius) var(--fc-live-radius) !important;
  overflow: visible !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-watch-chat-head, .fc-watch-sort, .fc-watch-comments, .fc-watch-comments .post-comments) {
  background: var(--fc-live-surface) !important;
  color: var(--fc-live-muted) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-chat-head > strong {
  font-size: 14px !important;
  color: var(--fc-live-text) !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-chat-empty {
  background: transparent !important;
  color: var(--fc-live-muted) !important;
  min-height: 240px !important;
  font-size: 13px !important;
  padding: 24px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-comments ul.js_live-comments {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  padding: 14px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-comments :is(.comment-text, .comment-author) {
  font-size: 13px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-info-card:not(.fc-live-create-info):not(.fc-live-result-card) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "summary" "interactions" "metrics" !important;
  gap: 18px !important;
  padding: 20px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-author > div > a { font-size: 14px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-title strong { font-size: 20px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-interactions {
  align-items: stretch !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-actions {
  justify-content: flex-start !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-more-actions summary {
  cursor: pointer;
  color: var(--fc-live-muted);
  padding-block: 8px;
  font-size: 13px;
  list-style: none;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-more-actions summary::-webkit-details-marker { display: none; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-more-actions[open] summary { margin-bottom: 8px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-metrics > div {
  background: transparent !important;
  border: 0 !important;
}

@media (max-width: 1250px) {
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-shell { grid-template-columns: minmax(0, 1fr) !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-sidebar { position: static !important; padding: 16px 24px 0 !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-brand { display: none !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-nav { display: flex !important; overflow-x: auto; gap: 6px; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-nav a { flex: 0 0 auto; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-nav a span { display: inline !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-watch-grid { grid-template-columns: minmax(0, 1fr) 320px !important; }
}
@media (max-width: 980px) {
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-watch-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-side { position: static !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-chat.is-active { height: 440px !important; }
}
@media (max-width: 600px) {
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-watch { padding: 14px 12px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-watch { padding: 18px 12px 28px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-sidebar { display: block !important; padding: 12px 12px 0 !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-page-head { flex-wrap: wrap !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-page-actions { flex-wrap: wrap !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card { min-height: 76px !important; padding: 12px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-stat-card strong { font-size: 20px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-create-form, .fc-live-create-settings) { padding: 16px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-create-actions > :is(label, button) { flex-basis: 100% !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-watch-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Reference layout: setup has preview/source and information columns. Once a
 * real post exists the same hooks become the producer dashboard and chat. */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-producer-watch .fc-live-create-shell { display: block !important; max-width: 1500px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-producer-watch .fc-live-create-sidebar { position: static !important; padding: 16px 24px 0 !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-producer-watch :is(.fc-live-create-brand, .fc-live-sidebar-brand, .fc-live-sidebar-home) { display: none !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-producer-watch .fc-live-create-nav { display: flex !important; gap: 8px; overflow-x: auto; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).fc-live-producer-watch .fc-live-create-nav a { flex: 0 0 auto; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] :is(.fc-live-stats-grid, .fc-watch-side) { display: none !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-watch-grid { display: block !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-watch-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
  grid-template-areas: "preview info" "source info" "options thumbnail" "submit submit" !important;
  gap: 18px !important;
  align-items: start !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-preview {
  grid-area: preview !important; height: clamp(330px, 30vw, 460px) !important; border-style: solid !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] :is(.fc-live-preview-body, .fc-live-preview-frame) { height: 100% !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-create-info { grid-area: info !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-source { grid-area: source !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-options { grid-area: options !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-thumbnail { grid-area: thumbnail !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-submit { grid-area: submit !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-create-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-create-form > .fc-live-field { margin: 0 !important; grid-column: 1 / -1; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-create-form > .fc-live-field:has([name="privacy"]) { grid-column: 1; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-meta-grid { grid-column: 2; margin: 0 !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-meta-grid .fc-live-field { margin: 0 !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="true"] :is(.fc-live-studio-options, .fc-live-studio-thumbnail, .fc-live-studio-submit, .fc-live-studio-source) { display: none !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-studio-source, .fc-live-studio-options, .fc-live-studio-thumbnail, .fc-live-studio-submit) {
  background: var(--fc-live-surface) !important; border: 1px solid var(--fc-live-border) !important;
  border-radius: var(--fc-live-radius) !important; padding: 18px !important; min-width: 0;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-studio-options, .fc-live-studio-thumbnail) h2 {
  font-size: 15px; margin: 0 0 16px; font-weight: 600; color: var(--fc-live-text);
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-source .fc-live-create-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-source .fc-live-create-actions > button {
  display: flex !important; align-items: flex-start !important; flex-direction: column !important; gap: 10px !important;
  padding: 12px !important; min-height: 110px !important;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-source .fc-live-create-actions > button > i { font-size: 18px !important; color: var(--fc-live-link, var(--fc-live-accent)) !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 49px; font-size: 13px;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle > span { display: flex; align-items: center; gap: 12px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle i { color: var(--fc-live-link, var(--fc-live-accent)); width: 20px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle input {
  appearance: none; width: 38px; height: 22px; flex: 0 0 38px; border-radius: 20px; border: 1px solid var(--fc-live-border);
  background: var(--fc-live-surface-soft); position: relative; cursor: pointer;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle input::after {
  content: ""; position: absolute; width: 16px; height: 16px; top: 2px; inset-inline-start: 2px; border-radius: 50%; background: var(--fc-live-muted);
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle input:checked { background: var(--fc-live-accent); border-color: var(--fc-live-accent); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-setting-toggle input:checked::after { inset-inline-start: 18px; background: var(--fc-live-on-accent); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-schedule-link { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--fc-live-border); margin-top: 10px; color: var(--fc-live-link, var(--fc-live-accent)); font-size: 13px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-schedule-link i:last-child { margin-inline-start: auto; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-thumbnail-preview { display: grid; place-items: center; background: var(--fc-live-surface-soft); border-radius: 10px; aspect-ratio: 16/9; overflow: hidden; position: relative; max-height: 185px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-thumbnail-preview > i { font-size: 32px; color: var(--fc-live-muted); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-thumbnail-preview img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-thumbnail-upload { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin: 12px 0 8px; border: 1px solid var(--fc-live-border); border-radius: 8px; cursor: pointer; font-size: 13px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-file-input { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-field-help { font-size: 12px; color: var(--fc-live-muted); display: block; margin-top: 6px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-submit .fc-live-create-btn { margin: 0 !important; width: 100% !important; min-height: 48px !important; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-preview-tools { position: absolute; bottom: 14px; inset-inline: 14px; display: flex; align-items: center; gap: 8px; z-index: 12; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-preview-tools button { border: 1px solid rgba(255,255,255,.25); border-radius: 50%; width: 42px; height: 42px; background: rgba(15,20,28,.8); color: #fff; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-preview-tools button[aria-pressed="true"] { background: var(--fc-live-danger); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-preview-tools span:not(:empty) { margin-inline-start: auto; background: rgba(15,20,28,.8); color: #fff; border-radius: 8px; padding: 7px 10px; font-size: 12px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-preview:not(:has(video:not(.x-hidden))) .fc-live-preview-tools { display: none !important; }
@media (max-width: 760px) {
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-watch-main {
    grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "preview" "source" "info" "options" "thumbnail" "submit" !important;
  }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace))[data-live-ready="false"] .fc-live-preview { height: 300px !important; }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-studio-source .fc-live-create-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-viewer-details, .fc-live-viewer-related) {
  background: var(--fc-live-surface); border: 1px solid var(--fc-live-border); border-radius: var(--fc-live-radius); margin-top: 20px;
}
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-details-tabs { display: flex; gap: 10px; overflow-x: auto; border-bottom: 1px solid var(--fc-live-border); padding: 0 16px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-details-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; color: var(--fc-live-muted); background: transparent; padding: 16px 12px; font-size: 13px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-details-tabs button[aria-selected="true"] { color: var(--fc-live-link, var(--fc-live-accent)); border-bottom-color: var(--fc-live-accent); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 24px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) :is(.fc-live-detail-panel, .fc-live-viewer-related) h2 { color: var(--fc-live-text); font-size: 16px; font-weight: 600; margin: 0 0 12px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-about-copy { flex: 1 1 300px; min-width: 0; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-about-copy p { margin-bottom: 16px; overflow-wrap: anywhere; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-about-copy small { color: var(--fc-live-muted); margin-inline-end: 20px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-about-copy small i { margin-inline-end: 8px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-creator-identity { display: flex; align-items: center; gap: 14px; color: var(--fc-live-text); border-inline-start: 1px solid var(--fc-live-border); padding-inline-start: 24px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-creator-identity img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-creator-identity small { display: block; color: var(--fc-live-muted); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-tags span { background: var(--fc-live-surface-soft); color: var(--fc-live-link, var(--fc-live-accent)); border-radius: 20px; padding: 4px 10px; font-size: 12px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-viewer-related { padding: 20px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card { min-width: 0; color: var(--fc-live-text); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card > div { aspect-ratio: 16/9; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--fc-live-surface-soft); position: relative; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card > div > img { width: 100%; height: 100%; object-fit: cover; position: absolute; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card > div > span { position: absolute; top: 8px; inset-inline-start: 8px; background: rgba(15,20,28,.78); color: #fff; border-radius: 5px; padding: 3px 8px; font-size: 11px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card strong { display: block; margin-block: 8px 4px; overflow-wrap: anywhere; font-size: 13px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card small { display: flex; gap: 6px; align-items: center; color: var(--fc-live-muted); font-size: 12px; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-card small img { width: 20px; height: 20px; border-radius: 50%; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-list { display: grid; gap: 12px; flex: 1 1 auto; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-list a { display: flex; gap: 12px; align-items: center; color: var(--fc-live-text); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-list img { width: 36px; height: 36px; border-radius: 50%; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-list small { display: block; color: var(--fc-live-muted); }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-list strong { margin-inline-start: auto; }
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-gift-summary { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .fc-live-detail-panel { padding: 18px; }
}

/* State always wins over layout. Includes inactive composer, paid fields,
 * OBS credentials, moderation menus and every existing JS .x-hidden hook. */
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)).x-hidden,
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) .x-hidden,
html body :is(#fc-live-ui, .fc-live-theme:not(.fc-live-workspace)) [hidden] {
  display: none !important;
}