/*
 * LSTV Modern UI Skin
 * Visual-only layer for the main landing cards.
 * It does not replace any WebRTC/vMix/room JavaScript behavior.
 * Assets: ./media/lstv-ui/
 */

:root {
  --lstv-bg: #050b14;
  --lstv-panel: rgba(5, 12, 24, .92);
  --lstv-text: #f7fbff;
  --lstv-muted: #c4cfda;
  --lstv-border: rgba(255,255,255,.12);
}

/* Main page atmosphere */
body#main {
  background-color: var(--lstv-bg) !important;
  background-image:
    linear-gradient(rgba(2,7,16,.54), rgba(2,7,16,.76)),
    url('./media/lstv-ui/studio-background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  color: var(--lstv-text);
}

/* Use the supplied Los Santos TV logo without touching navigation behavior */
#logoname {
  width: 230px !important;
  height: 72px !important;
  margin: 5px 10px 5px 18px !important;
  display: inline-block !important;
  background: url('./media/lstv-ui/lstv-logo.png') left center / contain no-repeat !important;
  vertical-align: middle;
}
#logoname > * { visibility: hidden !important; }

#header {
  min-height: 82px;
  background: rgba(3,8,17,.88) !important;
  border-bottom: 1px solid rgba(79,198,255,.18) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Landing grid */
#mainmenu.row {
  max-width: 1800px;
  margin: 28px auto 0 !important;
  padding: 0 28px 44px !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

/* ONLY collapsed landing cards. Expanded cards keep their original behavior/layout. */
#mainmenu > .column:not(.skip-animation):not(.in-animation) {
  float: none !important;
  margin: 0 !important;
  width: min(360px, calc(25vw - 45px)) !important;
  min-width: 280px !important;
  height: 360px !important;
  padding: 0 22px 22px !important;
  overflow: hidden !important;
  position: relative;
  border-radius: 22px !important;
  background-color: rgba(4,11,22,.94) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 60% !important;
  background-position: center top !important;
  border: 1px solid var(--lstv-border) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

#mainmenu > .column:not(.skip-animation):not(.in-animation)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(2,8,18,.03) 24%, rgba(2,8,18,.60) 54%, rgba(2,8,18,.98) 76%);
  z-index: 0;
}

#mainmenu > .column:not(.skip-animation):not(.in-animation) > * {
  position: relative;
  z-index: 1;
}

#mainmenu > .column:not(.skip-animation):not(.in-animation) > h2 {
  margin: 232px 0 10px !important;
  color: #fff !important;
  font-size: 1.34rem !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}

/* In collapsed state only show the heading; inner forms remain untouched and appear when expanded. */
#mainmenu > .column:not(.skip-animation):not(.in-animation) > .container-inner,
#mainmenu > .column:not(.skip-animation):not(.in-animation) > #gencontent,
#mainmenu > .column:not(.skip-animation):not(.in-animation) > #gencontent2 {
  opacity: 0 !important;
  pointer-events: none !important;
}

#mainmenu > .column:not(.skip-animation):not(.in-animation):hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.5), 0 0 24px var(--lstv-glow, rgba(50,180,255,.25)) !important;
  border-color: var(--lstv-accent, #27b9ff) !important;
}

#container-1:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #d34cff;
  --lstv-glow: rgba(211,76,255,.42);
  background-image: url('./media/lstv-ui/chat-card.jpg') !important;
  border-color: rgba(211,76,255,.64) !important;
}
#container-3:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #21b9ff;
  --lstv-glow: rgba(33,185,255,.42);
  background-image: url('./media/lstv-ui/camera-card.jpg') !important;
  border-color: rgba(33,185,255,.64) !important;
}
#container-2:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #58ea6f;
  --lstv-glow: rgba(88,234,111,.40);
  background-image: url('./media/lstv-ui/screen-card.jpg') !important;
  border-color: rgba(88,234,111,.64) !important;
}
#container-4:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #ff9e19;
  --lstv-glow: rgba(255,158,25,.42);
  background-image: url('./media/lstv-ui/invite-card.jpg') !important;
  border-color: rgba(255,158,25,.64) !important;
}

/* Hide legacy screen icon only on the collapsed tile; it remains available inside expanded workflow if needed. */
#container-2:not(.skip-animation):not(.in-animation) .screenshare-icon { opacity: 0 !important; }

/* Expanded workflow: retain original functionality, but keep a cleaner dark visual shell. */
#mainmenu > .column.skip-animation,
#mainmenu > .column.in-animation {
  background: rgba(7,13,24,.97) !important;
  color: #fff !important;
  border: 1px solid rgba(70,190,255,.24) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,.45) !important;
}
#mainmenu > .column.skip-animation > h2,
#mainmenu > .column.in-animation > h2 { color: #fff !important; }

/* Modern form surfaces inside opened cards */
#mainmenu input,
#mainmenu select,
#mainmenu textarea {
  border-radius: 10px !important;
}
#mainmenu button {
  border-radius: 11px !important;
}

@media (max-width: 1250px) {
  #mainmenu > .column:not(.skip-animation):not(.in-animation) {
    width: min(390px, calc(50vw - 48px)) !important;
  }
}
@media (max-width: 720px) {
  #header { min-height: 68px; }
  #logoname { width: 170px !important; height: 56px !important; margin-left: 10px !important; }
  #mainmenu.row { padding: 0 14px 30px !important; gap: 18px; }
  #mainmenu > .column:not(.skip-animation):not(.in-animation) {
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    height: 340px !important;
  }
  #mainmenu > .column:not(.skip-animation):not(.in-animation) > h2 { margin-top: 218px !important; }
}

/* ============================================================
   LSTV Modern UI v1.1 — Create Chat Room readability refresh
   VISUAL ONLY: scoped to the opened #container-1 room creator.
   No JavaScript, WebRTC, room logic, IDs or form actions changed.
   ============================================================ */

#container-1.skip-animation,
#container-1.in-animation {
  background-color: #050b14 !important;
  background-image:
    linear-gradient(rgba(3, 8, 20, .76), rgba(3, 8, 20, .90)),
    url('./media/lstv-ui/studio-background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  color: #f7fbff !important;
}

#container-1.skip-animation > h2,
#container-1.in-animation > h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.92), 0 0 22px rgba(121,65,255,.28) !important;
}

#container-1.skip-animation .container-inner,
#container-1.in-animation .container-inner {
  color: #f7fbff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.78);
}

/* Introductory line */
#container-1.skip-animation .container-inner > span:not(.section),
#container-1.in-animation .container-inner > span:not(.section) {
  color: #e7eef8 !important;
}

/* Main form and secondary room panels */
#container-1.skip-animation .section,
#container-1.in-animation .section {
  background: linear-gradient(145deg, rgba(7,13,28,.90), rgba(24,8,42,.84)) !important;
  border: 1px solid rgba(151,70,255,.62) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.40),
    0 0 24px rgba(123,55,255,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #f8fbff !important;
}

#container-1.skip-animation table,
#container-1.in-animation table,
#container-1.skip-animation th,
#container-1.in-animation th,
#container-1.skip-animation td,
#container-1.in-animation td,
#container-1.skip-animation label,
#container-1.in-animation label,
#container-1.skip-animation b,
#container-1.in-animation b,
#container-1.skip-animation i,
#container-1.in-animation i,
#container-1.skip-animation .roomnotes,
#container-1.in-animation .roomnotes,
#container-1.skip-animation .sso-options-panel,
#container-1.in-animation .sso-options-panel {
  color: #f7fbff !important;
}

#container-1.skip-animation span,
#container-1.in-animation span {
  color: #f7fbff;
}

/* Fields: high contrast and easy to read */
#container-1.skip-animation input[type='text'],
#container-1.in-animation input[type='text'],
#container-1.skip-animation input[type='password'],
#container-1.in-animation input[type='password'],
#container-1.skip-animation select,
#container-1.in-animation select {
  background: rgba(7, 13, 29, .94) !important;
  color: #ffffff !important;
  border: 1px solid rgba(137,92,246,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(55,164,255,.08) !important;
}

#container-1.skip-animation input::placeholder,
#container-1.in-animation input::placeholder {
  color: #b9c4d5 !important;
  opacity: 1 !important;
}

#container-1.skip-animation input:focus,
#container-1.in-animation input:focus,
#container-1.skip-animation select:focus,
#container-1.in-animation select:focus {
  outline: none !important;
  border-color: #39b9ff !important;
  box-shadow: 0 0 0 3px rgba(57,185,255,.17), 0 0 18px rgba(127,58,255,.25) !important;
}

/* Checkboxes remain native/functional, but are more visible */
#container-1.skip-animation input[type='checkbox'],
#container-1.in-animation input[type='checkbox'],
#container-1.skip-animation input[type='radio'],
#container-1.in-animation input[type='radio'] {
  accent-color: #7f3dff;
  filter: drop-shadow(0 0 4px rgba(73,185,255,.35));
}

/* Keep all existing buttons/actions; only restyle them */
#container-1.skip-animation button,
#container-1.in-animation button {
  color: #ffffff !important;
  border: 1px solid rgba(82,153,255,.66) !important;
  background: linear-gradient(135deg, rgba(23,33,61,.96), rgba(50,16,75,.94)) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 14px rgba(112,61,255,.12) !important;
}

#container-1.skip-animation button:hover,
#container-1.in-animation button:hover {
  border-color: #8a5cff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 18px rgba(110,72,255,.30) !important;
}

/* Primary room-entry actions */
#container-1.skip-animation .gobutton.gowebcam,
#container-1.in-animation .gobutton.gowebcam {
  background: linear-gradient(135deg, #087d3a, #0dbb59) !important;
  color: #ffffff !important;
  border: 1px solid #32ee7e !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.34), 0 0 18px rgba(27,235,108,.22) !important;
}

#container-1.skip-animation .gobutton.gowebcam:hover,
#container-1.in-animation .gobutton.gowebcam:hover {
  background: linear-gradient(135deg, #0a9545, #10cf65) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 24px rgba(27,235,108,.32) !important;
}

/* Previous session room name */
#container-1.skip-animation #lastSavedRoomName,
#container-1.in-animation #lastSavedRoomName {
  color: #36f277 !important;
  text-shadow: 0 0 10px rgba(54,242,119,.35) !important;
}

/* Random-room icon button */
#container-1.skip-animation .randomRoomName,
#container-1.in-animation .randomRoomName {
  background: rgba(12,18,34,.94) !important;
  color: #ffffff !important;
}

/* Tips content links */
#container-1.skip-animation .roomnotes a,
#container-1.in-animation .roomnotes a {
  color: #6dc9ff !important;
}

/* Keep the Back control visible over the studio background */
#container-1.skip-animation .outer.close,
#container-1.in-animation .outer.close {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.9) !important;
}

@media (max-width: 720px) {
  #container-1.skip-animation .section,
  #container-1.in-animation .section {
    border-radius: 14px !important;
  }
}

/* ============================================================
   LSTV Modern UI v1.2 — Director / Conference control room
   VISUAL ONLY: scoped to #directorlayout and its existing blocks.
   No JavaScript, WebRTC, room/invite/scene logic, IDs or actions changed.
   ============================================================ */

#directorlayout.directorsgrid {
  min-height: calc(100vh - 76px) !important;
  background-color: #030812 !important;
  background-image:
    linear-gradient(90deg, rgba(3,8,18,.91) 0%, rgba(3,8,18,.76) 48%, rgba(3,8,18,.88) 100%),
    url('./media/lstv-ui/studio-background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  color: #f7fbff !important;
  padding: 8px 18px 40px !important;
  box-sizing: border-box !important;
}

/* Room header / links title bar */
#directorlayout #roomHeader {
  width: min(100%, 1360px) !important;
  margin: 0 auto !important;
}

#directorlayout .hideLinksClass {
  width: 100% !important;
  max-width: 1360px !important;
  box-sizing: border-box !important;
  margin: 8px auto 14px !important;
  padding: 15px 20px !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(15,12,38,.92), rgba(5,28,46,.88)) !important;
  border: 1px solid rgba(57,185,255,.72) !important;
  border-left-color: rgba(210,62,255,.78) !important;
  border-radius: 13px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.34), 0 0 22px rgba(58,133,255,.12) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
}

#directorlayout #directorLinksButton,
#directorlayout #help_directors_room,
#directorlayout #directorLinksButton span,
#directorlayout #help_directors_room span {
  color: #f9fcff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 5px rgba(0,0,0,.8) !important;
}

#directorlayout #roomnotes2 {
  width: min(100%, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto 14px !important;
  padding: 18px 22px !important;
  box-sizing: border-box !important;
  color: #edf5ff !important;
  background: rgba(4,10,22,.94) !important;
  border: 1px solid rgba(83,126,255,.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.36) !important;
}
#directorlayout #roomnotes2 span,
#directorlayout #roomnotes2 li { color: #edf5ff !important; }
#directorlayout #roomnotes2 a { color: #55c9ff !important; }

/* Two primary link panels */
#directorlayout .directorContainer {
  box-sizing: border-box !important;
  color: #f8fbff !important;
  background: rgba(6,11,24,.78) !important;
  border: 1px solid rgba(108,123,255,.34) !important;
  border-radius: 15px !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
}

#directorlayout #directorLinks1,
#directorlayout #directorLinks2 {
  width: calc(50% - 12px) !important;
  max-width: 674px !important;
  margin: 0 6px 14px !important;
  padding: 10px !important;
  vertical-align: top !important;
}

#directorlayout #directorLinks1 { margin-left: max(6px, calc((100% - 1360px) / 2)) !important; }

#directorlayout .directorBlock {
  min-height: 205px !important;
  padding: 19px 20px 14px !important;
  border-radius: 13px !important;
  color: #f9fcff !important;
  background: linear-gradient(145deg, rgba(20,8,43,.95), rgba(6,11,25,.94)) !important;
  border: 1px solid rgba(202,64,255,.72) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.33), 0 0 20px rgba(180,50,255,.12) !important;
}

#directorlayout #directorLinks2 .directorBlock {
  background: linear-gradient(145deg, rgba(4,37,34,.95), rgba(5,13,25,.94)) !important;
  border-color: rgba(61,235,202,.72) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.33), 0 0 20px rgba(48,225,198,.12) !important;
}

#directorlayout .directorBlock h2,
#directorlayout .directorBlock h2 span,
#directorlayout .directorBlock > span,
#directorlayout .directorBlock label {
  color: #f9fcff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.72) !important;
}

#directorlayout .directorBlock h2 {
  font-size: 1.26em !important;
  letter-spacing: .01em !important;
}
#directorlayout #directorLinks1 .director-link-icons { color: #df66ff !important; text-shadow: 0 0 14px rgba(213,66,255,.55) !important; }
#directorlayout #directorLinks2 .director-link-icons { color: #58f0d3 !important; text-shadow: 0 0 14px rgba(60,236,210,.50) !important; }

/* URL boxes */
#directorlayout a.task.grabLinks,
#directorlayout a.task.grabLinks:link,
#directorlayout a.task.grabLinks:visited {
  display: block !important;
  box-sizing: border-box !important;
  margin: 16px 0 8px !important;
  padding: 14px 12px !important;
  min-height: 49px !important;
  border-radius: 9px !important;
  background: rgba(2,8,20,.72) !important;
  border: 1px solid rgba(63,161,255,.48) !important;
  color: #35b8ff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#directorlayout #directorLinks2 a.task.grabLinks {
  color: #53e7dc !important;
  border-color: rgba(64,226,205,.48) !important;
}

/* Existing action buttons; preserve all click handlers */
#directorlayout .directorBlock button {
  border-radius: 9px !important;
  border: 1px solid rgba(68,159,255,.70) !important;
  background: linear-gradient(135deg, rgba(13,25,48,.96), rgba(9,14,30,.96)) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.26), 0 0 12px rgba(55,150,255,.11) !important;
  padding: 9px 13px !important;
  max-width: 30% !important;
}
#directorlayout .directorBlock button:hover {
  border-color: #65bcff !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.30), 0 0 18px rgba(55,163,255,.22) !important;
}
#directorlayout #showCustomizerButton1 { border-color: rgba(217,64,255,.70) !important; }
#directorlayout #showCustomizerButton3 { border-color: rgba(52,226,110,.72) !important; }

/* Toggles: only colors/visibility, native behavior untouched */
#directorlayout .switch .slider {
  box-shadow: 0 0 10px rgba(63,188,255,.16) !important;
}
#directorlayout .switch input:checked + .slider {
  background-color: #49bb69 !important;
}

/* Customizer stays readable if opened */
#directorlayout #customizeLinks {
  width: min(100%, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto 14px !important;
}
#directorlayout #customizeLinks .directorBlock {
  background: rgba(5,11,24,.96) !important;
  border-color: rgba(75,169,255,.50) !important;
}
#directorlayout #customizeLinks span,
#directorlayout #customizeLinks label { color: #f3f8ff !important; }

/* Participant / guest cards created dynamically by the original app */
#directorlayout .vidcon {
  position: relative !important;
  box-sizing: border-box !important;
  width: 270px !important;
  min-height: 300px !important;
  margin: 6px 8px 16px !important;
  padding: 10px !important;
  vertical-align: top !important;
  color: #f8fbff !important;
  background:
    radial-gradient(circle at 50% 62%, rgba(44,101,255,.13), transparent 42%),
    linear-gradient(160deg, rgba(7,15,35,.97), rgba(6,7,22,.96)) !important;
  border: 1px solid rgba(91,188,255,.76) !important;
  border-radius: 14px !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.38), 0 0 17px rgba(69,151,255,.14) !important;
  overflow: hidden !important;
}
#directorlayout .vidcon:nth-of-type(odd) {
  border-color: rgba(186,89,255,.76) !important;
  box-shadow: 0 15px 34px rgba(0,0,0,.38), 0 0 17px rgba(173,64,255,.13) !important;
}

#directorlayout .vidcon video {
  width: 100% !important;
  max-width: none !important;
  min-height: 145px !important;
  max-height: 190px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: rgba(1,5,14,.94) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

#directorlayout .vidcon > .las {
  color: #eaf4ff !important;
  background: transparent !important;
}

#directorlayout .vidcon h3,
#directorlayout .vidcon h4,
#directorlayout .vidcon b,
#directorlayout .vidcon span,
#directorlayout .vidcon label {
  color: #f7fbff !important;
}

/* Links/feeds region generated below the static invitation blocks */
#directorlayout #guestFeeds {
  width: min(100%, 1360px) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  background: rgba(3,8,18,.52) !important;
  border: 1px solid rgba(63,159,255,.20) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
}

/* General readable controls in director room */
#directorlayout input,
#directorlayout select,
#directorlayout textarea {
  color: #fff !important;
  background: rgba(5,11,25,.96) !important;
  border-color: rgba(86,147,255,.52) !important;
}
#directorlayout input::placeholder,
#directorlayout textarea::placeholder { color: #b9c7d9 !important; opacity: 1 !important; }

@media (max-width: 1000px) {
  #directorlayout #directorLinks1,
  #directorlayout #directorLinks2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 14px !important;
  }
}

@media (max-width: 720px) {
  #directorlayout.directorsgrid { padding: 7px 8px 28px !important; }
  #directorlayout .hideLinksClass { padding: 13px 14px !important; }
  #directorlayout #help_directors_room { float: none !important; display: block !important; margin-top: 10px !important; text-align: left !important; }
  #directorlayout .directorBlock { padding: 15px 13px 12px !important; }
  #directorlayout .directorBlock button { max-width: 46% !important; margin: 8px 4px !important; }
  #directorlayout .vidcon { width: calc(100% - 12px) !important; margin: 6px !important; }
}

/* ============================================================
   LSTV MODERN UI v1.3 — CAMERA JOIN + GUEST CONTROL PANELS
   Visual-only overrides. No JavaScript/WebRTC behavior changed.
   ============================================================ */

/* Camera / microphone join screen */
#container-3.column {
  position: relative !important;
  color: #f7fbff !important;
  background:
    linear-gradient(90deg, rgba(1,7,18,.90), rgba(4,11,27,.76) 48%, rgba(2,7,18,.90)),
    url('./media/lstv-ui/studio-background.jpg') center center / cover fixed no-repeat !important;
  border: 0 !important;
}

#container-3.column::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 28% 38%, rgba(37,111,255,.12), transparent 36%),
    radial-gradient(circle at 78% 45%, rgba(221,47,255,.10), transparent 37%);
}

#container-3 > * { position: relative; z-index: 1; }

#container-3 #add_camera {
  color: #fff !important;
  background: rgba(2,8,20,.82) !important;
  border-bottom: 1px solid rgba(70,173,255,.26) !important;
  text-shadow: 0 2px 9px rgba(0,0,0,.9) !important;
  box-shadow: 0 9px 26px rgba(0,0,0,.20) !important;
}

#container-3 #add_camera_inner {
  width: min(92%, 760px) !important;
  margin: 22px auto 42px !important;
  padding: 22px 26px 30px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  color: #f5f9ff !important;
  background: linear-gradient(155deg, rgba(5,12,29,.91), rgba(11,9,31,.88)) !important;
  border: 1px solid rgba(109,78,255,.60) !important;
  box-shadow: 0 24px 54px rgba(0,0,0,.46), 0 0 26px rgba(74,154,255,.12), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(8px) !important;
}

#container-3 #previewWebcam {
  width: min(100%, 650px) !important;
  max-height: 365px !important;
  border-radius: 14px !important;
  background: #02050d !important;
  border: 1px solid rgba(69,169,255,.58) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.40), 0 0 18px rgba(60,148,255,.12) !important;
}

#container-3 #gowebcam,
#container-3 #getPermissions {
  width: min(100%, 650px) !important;
  min-height: 52px !important;
  margin: 14px auto !important;
  border-radius: 11px !important;
  color: #fff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(6,82,55,.92), rgba(4,39,43,.94)) !important;
  border: 1px solid rgba(30,241,118,.82) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.36), 0 0 17px rgba(26,236,117,.17) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.7) !important;
}

#container-3 #gowebcam:disabled {
  opacity: .92 !important;
  color: #f7fbff !important;
  background: linear-gradient(135deg, rgba(10,23,45,.94), rgba(10,16,32,.96)) !important;
  border-color: rgba(76,178,255,.46) !important;
}

#container-3 #videoMenu,
#container-3 #audioMenu,
#container-3 #headphonesDiv,
#container-3 #videoSettings,
#container-3 #effectsDiv,
#container-3 #avatarDiv,
#container-3 .startupWarning,
#container-3 .cameraTip {
  box-sizing: border-box !important;
  width: min(100%, 650px) !important;
  margin: 14px auto !important;
  padding: 15px 16px !important;
  color: #f5f9ff !important;
  background: rgba(4,12,29,.90) !important;
  border: 1px solid rgba(70,147,255,.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#container-3 .title,
#container-3 label,
#container-3 span,
#container-3 p,
#container-3 li,
#container-3 i { color: #f3f8ff !important; }

#container-3 select,
#container-3 input:not([type="checkbox"]):not([type="radio"]),
#container-3 textarea,
#container-3 .form-control,
#container-3 .multiselect-trigger,
#container-3 .multiselect-contents {
  color: #f6f9ff !important;
  background-color: rgba(3,9,22,.96) !important;
  border-color: rgba(87,139,255,.55) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

#container-3 select option,
#container-3 .multiselect-contents li,
#container-3 .multiselect-contents label {
  color: #f4f8ff !important;
  background: #071124 !important;
}

#container-3 input::placeholder,
#container-3 textarea::placeholder { color: #bfcadd !important; opacity: 1 !important; }
#container-3 button { color: #fff !important; }
#container-3 button:not(#gowebcam):not(#getPermissions) {
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(15,26,50,.96), rgba(8,13,29,.97)) !important;
  border: 1px solid rgba(92,120,255,.60) !important;
}

/* Director guest cards / controls: improve readability and modern appearance */
#directorlayout .vidcon {
  background:
    radial-gradient(circle at 50% 20%, rgba(53,106,255,.13), transparent 38%),
    linear-gradient(160deg, rgba(5,13,33,.98), rgba(8,6,25,.98)) !important;
}

#directorlayout .vidcon .controlsGrid {
  padding: 8px 4px 2px !important;
  color: #eef6ff !important;
  background: transparent !important;
}

#directorlayout .controlsGrid button,
#directorlayout .controlsGrid .hideDropMenu,
#directorlayout .soloButton button {
  color: #f5f9ff !important;
  background: linear-gradient(145deg, rgba(15,26,48,.98), rgba(7,12,26,.98)) !important;
  border: 1px solid rgba(84,145,255,.42) !important;
  border-radius: 7px !important;
  box-shadow: 0 5px 13px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-shadow: none !important;
}

#directorlayout .controlsGrid button:hover,
#directorlayout .soloButton button:hover {
  color: #fff !important;
  border-color: rgba(94,191,255,.88) !important;
  background: linear-gradient(145deg, rgba(19,39,70,.98), rgba(9,18,38,.98)) !important;
}

#directorlayout .controlsGrid button span,
#directorlayout .controlsGrid .hideDropMenu span,
#directorlayout .controlsGrid .orderspan,
#directorlayout .controlsGrid label,
#directorlayout .controlsGrid p,
#directorlayout .soloButton,
#directorlayout .soloButton span {
  color: #eef6ff !important;
}

#directorlayout .controlsGrid input,
#directorlayout .controlsGrid select,
#directorlayout .controlsGrid textarea,
#directorlayout .soloButton input {
  color: #f7fbff !important;
  background: #061124 !important;
  border: 1px solid rgba(79,146,255,.45) !important;
}

/* Keep semantic action colors visible without reverting to unreadable white buttons */
#directorlayout .controlsGrid button[data-action-type="mute-guest"],
#directorlayout .controlsGrid button[data-action-type="hangup"] {
  border-color: rgba(255,76,91,.70) !important;
}
#directorlayout .controlsGrid button[data-action-type="addToScene"],
#directorlayout .controlsGrid button[data-action-type="solo-chat"] {
  border-color: rgba(50,225,121,.66) !important;
}

#directorlayout .controlsGrid .btn-HL-yellow,
#directorlayout .controlsGrid .btn-HL-peach,
#directorlayout .controlsGrid .btn-HL-green,
#directorlayout .controlsGrid .btn-HL-blue,
#directorlayout .controlsGrid .btn-HL-paleblue,
#directorlayout .controlsGrid .btn-HL-orange,
#directorlayout .controlsGrid .btn-HL-purple,
#directorlayout .controlsGrid .btn-HL-red,
#directorlayout .controlsGrid .btn-HL-teal {
  color: #fff !important;
  filter: saturate(.85) brightness(.72) !important;
}

/* Any native white control surface inside the two redesigned areas gets dark readable text treatment */
#container-3 button,
#container-3 select,
#directorlayout button,
#directorlayout select {
  -webkit-text-fill-color: currentColor !important;
}

@media (max-width: 760px) {
  #container-3 #add_camera_inner {
    width: calc(100% - 18px) !important;
    margin: 10px auto 24px !important;
    padding: 15px 11px 22px !important;
  }
  #container-3 #videoMenu,
  #container-3 #audioMenu,
  #container-3 #headphonesDiv,
  #container-3 #videoSettings,
  #container-3 #effectsDiv,
  #container-3 #avatarDiv { width: 100% !important; }
}


/* =====================================================================
   LSTV v1.7.1 - TARJETAS MODERNAS (SOLO CAPA VISUAL)
   ---------------------------------------------------------------------
   Este bloque SOLO modifica fondos, bordes, sombras, iconos visuales y
   animación hover de las tarjetas del menú principal cuando están
   COLAPSADAS. No cambia onclick, href, IDs, inputs, WebRTC, signaling,
   TURN/STUN, salas, Director/Invitado, vMix, WHIP/WHEP ni JavaScript.
   ===================================================================== */

/* Fondo superior moderno para las tarjetas que conservaban aspecto básico */
#container-5:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #aa63ff;
  --lstv-glow: rgba(170,99,255,.42);
  background-image: url('./media/lstv-ui/media-card-modern.jpg') !important;
  border-color: rgba(170,99,255,.62) !important;
}
#container-6:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #24c9ff;
  --lstv-glow: rgba(36,201,255,.42);
  background-image: url('./media/lstv-ui/website-card-modern.jpg') !important;
  border-color: rgba(36,201,255,.62) !important;
}
#container-7:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #25d8ff;
  --lstv-glow: rgba(37,216,255,.46);
  background-image: url('./media/lstv-ui/speed-card-modern.jpg') !important;
  border-color: rgba(37,216,255,.72) !important;
}
#container-8:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #c85cff;
  --lstv-glow: rgba(200,92,255,.42);
  background-image: url('./media/lstv-ui/layout-card-modern.jpg') !important;
  border-color: rgba(200,92,255,.62) !important;
}
#container-14:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #27e4d3;
  --lstv-glow: rgba(39,228,211,.42);
  background-image: url('./media/lstv-ui/monitor-card-modern.jpg') !important;
  border-color: rgba(39,228,211,.62) !important;
}
#container-21:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #e55cff;
  --lstv-glow: rgba(229,92,255,.42);
  background-image: url('./media/lstv-ui/podcast-card-modern.jpg') !important;
  border-color: rgba(229,92,255,.62) !important;
}
#container-15:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #4f8fff;
  --lstv-glow: rgba(79,143,255,.42);
  background-image: url('./media/lstv-ui/comms-card-modern.jpg') !important;
  border-color: rgba(79,143,255,.62) !important;
}
#container-13:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #c859ff;
  --lstv-glow: rgba(200,89,255,.42);
  background-image: url('./media/lstv-ui/wizard-card-modern.jpg') !important;
  border-color: rgba(200,89,255,.62) !important;
}
#container-17:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #28c8ff;
  --lstv-glow: rgba(40,200,255,.42);
  background-image: url('./media/lstv-ui/whip-card-modern.jpg') !important;
  border-color: rgba(40,200,255,.62) !important;
}
#container-16:not(.skip-animation):not(.in-animation) {
  --lstv-accent: #30e5cf;
  --lstv-glow: rgba(48,229,207,.42);
  background-image: url('./media/lstv-ui/whep-card-modern.jpg') !important;
  border-color: rgba(48,229,207,.62) !important;
}

/* La ilustración ya contiene un icono principal; ocultar SOLO el icono
   legado mientras la tarjeta está cerrada evita duplicados visuales.
   Al abrir una tarjeta, el icono original vuelve a existir normalmente. */
#container-6:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-7:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-8:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-14:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-21:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-15:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-13:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-17:not(.skip-animation):not(.in-animation) > .largeDarkIcon,
#container-16:not(.skip-animation):not(.in-animation) > .largeDarkIcon {
  opacity: 0 !important;
}

/* Pulido visual común, exclusivamente para tarjetas cerradas */
#mainmenu > .column:not(.skip-animation):not(.in-animation) {
  background-size: 100% 60% !important;
  background-position: center top !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 24px rgba(31,126,255,.035) !important;
}
#mainmenu > .column:not(.skip-animation):not(.in-animation)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 14%, var(--lstv-glow, rgba(46,180,255,.18)), transparent 43%);
  opacity: .36;
}
#mainmenu > .column:not(.skip-animation):not(.in-animation):hover {
  transform: translateY(-7px) scale(1.012) !important;
  box-shadow:
    0 25px 60px rgba(0,0,0,.52),
    0 0 27px var(--lstv-glow, rgba(50,180,255,.27)),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}