* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 1920px; height: 1080px; overflow: hidden;
  background: #0b0f14; color: #e8edf3;
  font-family: "LG Smart UI", "Segoe UI", Roboto, Arial, sans-serif;
}
.hidden { display: none !important; }

.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }

/* ---------- Setup ---------- */
#setup { padding: 70px 140px; overflow-y: auto; }
#setup header h1 { font-size: 72px; font-weight: 800; letter-spacing: -1px; }
#setup header h1 span { color: #3ea6ff; }
#setup header p { font-size: 30px; color: #8a97a8; margin-top: 6px; }

.form { margin-top: 44px; max-width: 1400px; }
label { display: block; font-size: 28px; color: #aab6c5; margin: 22px 0 10px; }
input {
  width: 100%; font-size: 32px; padding: 20px 26px;
  background: #151c25; color: #fff; border: 3px solid #253041; border-radius: 14px; outline: none;
}
.hint { min-height: 34px; font-size: 24px; margin-top: 8px; color: #6f7d8f; }
.hint.ok { color: #4cd38a; }
.hint.bad { color: #ff7a7a; }

.row { display: flex; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
button {
  font: inherit; font-size: 30px; padding: 18px 34px; border-radius: 14px; cursor: pointer;
  background: #1b2430; color: #e8edf3; border: 3px solid #253041; outline: none;
}
button.primary { background: #1f6fd1; border-color: #1f6fd1; color: #fff; font-weight: 700; }

.nav:focus, .mnav:focus, .nav.focus {
  border-color: #ffd23f !important;
  box-shadow: 0 0 0 4px rgba(255, 210, 63, .35);
  transform: scale(1.03);
}
button, input { transition: transform .12s, box-shadow .12s, border-color .12s; }

h2 { font-size: 36px; margin: 50px 0 18px; color: #c9d3df; }
#favs { display: flex; flex-direction: column; gap: 14px; max-width: 1400px; }
.fav { display: flex; gap: 14px; }
.fav .fav-load { flex: 1; text-align: left; font-size: 28px; }
.fav .fav-del { width: 90px; }
.empty { font-size: 26px; color: #6f7d8f; }

.warn { margin-top: 36px; font-size: 24px; color: #ffcf6e; max-width: 1400px; line-height: 1.4; }
.warn:empty { display: none; }
footer { margin-top: 30px; font-size: 24px; color: #6f7d8f; }

/* ---------- Watch ---------- */
#watch { background: #000; }
#stage { position: absolute; inset: 0; --pipw: 30%; }
.slot {
  position: absolute; background: #000; overflow: hidden;
}
.slot iframe, .slot video, .slot > div { width: 100%; height: 100%; border: 0; display: block; }
.slot video { object-fit: contain; background: #000; }

.slot.full  { inset: 0; z-index: 1; }
.slot.pip   {
  z-index: 2; width: var(--pipw); aspect-ratio: 16 / 9; height: auto;
  border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.7); border: 3px solid rgba(255,255,255,.18);
}
.slot.pip.tl { top: 40px; left: 40px; }
.slot.pip.tr { top: 40px; right: 40px; }
.slot.pip.bl { bottom: 40px; left: 40px; }
.slot.pip.br { bottom: 40px; right: 40px; }
.slot.split { top: 0; bottom: 0; width: 50%; z-index: 1; }
.slot.split.left  { left: 0; }
.slot.split.right { right: 0; }
.slot.off { display: none; }

.slot .slot-error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 30px; text-align: center; font-size: 28px; line-height: 1.4;
  background: rgba(10, 14, 20, .92); color: #ffb3b3; z-index: 3;
}

#shield { position: absolute; inset: 0; z-index: 5; background: transparent; }

#menu {
  position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 10;
  display: flex; flex-wrap: wrap; justify-content: center; max-width: 1700px; gap: 12px; padding: 18px; border-radius: 20px;
  background: rgba(12, 16, 22, .9); backdrop-filter: blur(8px);
}
#menu button { font-size: 24px; padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#menu small { font-size: 18px; color: #8a97a8; }

#legend {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 10;
  font-size: 24px; padding: 14px 26px; border-radius: 14px; white-space: nowrap;
  background: rgba(12, 16, 22, .85);
}

.dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; margin: 0 6px; vertical-align: middle; }
.dot.red { background: #e53935; } .dot.green { background: #43a047; }
.dot.yellow { background: #fdd835; } .dot.blue { background: #1e88e5; }

#toast {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;
  font-size: 34px; padding: 22px 40px; border-radius: 18px;
  background: rgba(12, 16, 22, .92); color: #fff; opacity: 0; pointer-events: none;
  transition: opacity .2s; max-width: 1400px; text-align: center;
}
#toast.show { opacity: 1; }

/* ---------- Busca ---------- */
#search { padding: 50px 100px; overflow-y: auto; }
#search h1 { font-size: 56px; margin-bottom: 24px; }
#results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 20px; }
.res { display: block; padding: 0; text-align: left; overflow: hidden; font-size: 22px; }
.res img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #111; }
.res .t { padding: 10px 14px 4px; font-size: 22px; line-height: 1.25; height: 3.1em; overflow: hidden; }
.res .c { padding: 0 14px 12px; font-size: 20px; color: #8a97a8; }
.res .live { color: #fff; background: #e53935; border-radius: 6px; padding: 1px 8px; margin-right: 8px; font-size: 18px; font-weight: 700; }