* { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; }
input[type="range"] { accent-color: rgb(168, 85, 247); }

.card { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(168, 85, 247, 0.1); }

button { transition: all 0.3s ease; position: relative; overflow: hidden; }
button:active { transform: scale(0.98); }

input[type="text"], input[type="number"], input[type="datetime-local"], input[type="date"], select {
  transition: all 0.3s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, select:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.animate-slide-in { animation: slideIn 0.3s ease-out; }
.animate-pulse-custom { animation: pulse 2s infinite; }

.badge { animation: slideIn 0.3s ease-out; }
.status-running { text-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
.status-scheduled { text-shadow: 0 0 10px rgba(234, 179, 8, 0.5); }
.app-tab-btn {
  min-width: 8.5rem;
}
.app-tab-btn.active {
  box-shadow: 0 8px 22px rgba(126, 34, 206, 0.28);
}
.vod-media-tab-btn {
  min-width: 7rem;
}
.vod-list-tab-btn {
  min-width: 9rem;
}

.input-group { position: relative; }
.input-group label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; color: rgb(156, 163, 175); margin-bottom: 0.5rem; display: block; }
.preview-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.vod-player-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
#vodPlayerFrame,
#vodPlayerVideo {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
#vodPlayerVideo {
  object-fit: contain;
}
#vodPlayerFrame.hidden,
#vodPlayerVideo.hidden,
#vodPlayerEmpty.hidden {
  display: none;
}
#previewChatMessages {
  min-height: 0;
  max-height: 100%;
  flex: 1 1 0%;
  overflow-y: auto;
  scrollbar-width: thin;
}
#previewChatPanel > h3,
#previewChatSourcesToggle,
#previewChatSourceFiltersWrap,
#previewChatStatus {
  flex: 0 0 auto;
  flex-shrink: 0;
}
#previewChatMessages::-webkit-scrollbar {
  width: 10px;
}
#previewChatMessages::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.42);
  border-radius: 999px;
}
#previewChatMessages::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.36);
  border-radius: 999px;
}
.preview-chat-filters-wrap {
  overflow: hidden;
  max-height: 12rem;
  opacity: 1;
  transition: max-height 220ms ease, opacity 180ms ease, margin-bottom 180ms ease;
}
.preview-chat-filters-wrap.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0 !important;
  pointer-events: none;
}
.preview-no-scroll {
  overflow: hidden;
}
.preview-no-select {
  user-select: none;
}
#previewSection.preview-expanded {
  position: fixed;
  inset: 1rem;
  margin-top: 0;
  z-index: 40;
  padding: 0.35rem;
  border-radius: 1rem;
  background: #0b1020;
}
#previewSection.preview-expanded.preview-chat-hidden {
  inset: 0.1rem 1rem 1rem 1rem;
}
#previewSection.preview-expanded.preview-chat-overlay {
  inset: 0.1rem 1rem 1rem 1rem;
}
#previewSection.preview-expanded #previewCard {
  height: calc(100vh - 2rem);
  border-radius: 1rem;
  overflow: hidden;
}
#previewSection.preview-expanded.preview-chat-hidden #previewCard {
  height: calc(100vh - 1.1rem);
  padding: 0.85rem 1rem 1rem;
}
#previewSection.preview-expanded.preview-chat-overlay #previewCard {
  height: calc(100vh - 1.1rem);
  padding: 0.85rem 1rem 1rem;
}
#previewSection.preview-expanded.preview-chat-hidden #previewCard > .flex {
  margin-bottom: 0.55rem;
}
#previewSection.preview-expanded.preview-chat-overlay #previewCard > .flex {
  margin-bottom: 0.55rem;
}
#previewSection.preview-expanded #previewLayout {
  height: calc(100% - 3.25rem);
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
#previewSection.preview-expanded.preview-chat-hidden #previewLayout {
  height: calc(100% - 2.2rem);
}
#previewSection.preview-expanded.preview-chat-overlay #previewLayout {
  height: calc(100% - 2.2rem);
}
#previewSection.preview-expanded.preview-chat-hidden #previewLayout > div:first-child {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#previewSection.preview-expanded.preview-chat-overlay #previewLayout > div:first-child {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#previewSection.preview-expanded.preview-chat-hidden .preview-frame {
  width: min(100%, calc((100vh - 7.5rem) * 16 / 9));
  max-width: 100%;
}
#previewSection.preview-expanded.preview-chat-overlay .preview-frame {
  width: min(100%, calc((100vh - 8rem) * 16 / 9));
  max-width: 100%;
}
#previewLayout {
  min-height: 0;
}
#previewLayout > div {
  min-height: 0;
}
#previewLayout.preview-chat-hidden {
  grid-template-columns: minmax(0, 1fr) !important;
}
#previewSection.preview-chat-overlay #previewLayout {
  grid-template-columns: minmax(0, 1fr) !important;
  position: relative;
}
#previewSection.preview-chat-overlay #previewChatPanel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(15rem, 34%, 23rem);
  max-width: 44%;
  z-index: 26;
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
  cursor: grab;
}
#previewChatPanel {
  min-height: 0;
  overflow: hidden;
}
#previewSection.preview-expanded #previewChatPanel {
  max-height: none;
  height: 100%;
}
@media (min-width: 960px) {
  #previewSection.preview-expanded #previewLayout {
    grid-template-columns: minmax(0, 2.9fr) minmax(18rem, 0.9fr);
  }
}
@media (max-width: 1024px) and (hover: none) and (pointer: coarse), (max-width: 767px) {
  #previewSection #previewCard {
    padding: 1rem;
  }
  #previewSection #previewLayout,
  #previewSection.preview-expanded #previewLayout {
    grid-template-columns: minmax(0, 1.65fr) minmax(7rem, 0.95fr) !important;
    gap: 0.6rem;
    align-items: stretch;
  }
  #previewSection #preview {
    object-position: left center;
  }
  #previewSection #previewChatPanel {
    min-height: 0;
    height: 100%;
    max-height: min(55vh, 26rem);
    overflow: hidden;
    padding: 0.65rem;
  }
  #previewSection #previewChatMessages {
    max-height: 100%;
    overflow-y: auto;
  }
  #previewSection #previewChatPanel h3 {
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
  }
  #previewSection.preview-chat-overlay #previewChatPanel {
    width: min(62vw, 18rem);
    max-width: 70%;
  }
}
.modern-select-wrap {
  position: relative;
  width: 100%;
}
.modern-select-wrap.compact {
  width: 9rem;
}
.modern-select-wrap::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid rgba(209, 213, 219, 0.9);
  border-bottom: 2px solid rgba(209, 213, 219, 0.9);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.modern-select-wrap:focus-within::after {
  transform: translateY(-45%) rotate(45deg);
  opacity: 1;
}
.modern-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0.9rem;
  border: 1px solid rgba(168, 85, 247, 0.32);
  background:
    linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(55, 65, 81, 0.95));
  color: rgb(243, 244, 246);
  padding: 0.88rem 2.9rem 0.88rem 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.03);
}
.modern-select:hover {
  border-color: rgba(192, 132, 252, 0.56);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.33), 0 0 0 1px rgba(192, 132, 252, 0.12);
}
.modern-select:focus {
  transform: none;
  outline: none;
  border-color: rgba(196, 181, 253, 0.95);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 14px 32px rgba(91, 33, 182, 0.22);
}
.modern-select option {
  background: rgb(31, 41, 55);
  color: rgb(243, 244, 246);
}
.settings-gear {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.settings-toggle.open .settings-gear {
  color: rgb(216, 180, 254);
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.45);
}
.settings-dropdown {
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease;
  transform-origin: top right;
}
.settings-dropdown.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
.settings-dropdown::before {
  content: "";
  position: absolute;
  top: -13px;
  right: 19px;
  width: 2px;
  height: 13px;
  background: linear-gradient(to bottom, rgba(196,181,253,0.8), rgba(196,181,253,0.25));
  border-radius: 999px;
}
.settings-dropdown::after {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: rgb(31, 41, 55);
  border-left: 1px solid rgba(107, 114, 128, 0.75);
  border-top: 1px solid rgba(107, 114, 128, 0.75);
  transform: rotate(45deg);
}
@media (max-width: 640px) {
  .settings-dropdown {
    transform-origin: top center;
  }
  .settings-dropdown::before,
  .settings-dropdown::after {
    display: none;
  }
}
.modern-select-compact {
  border-radius: 0.7rem;
  padding: 0.58rem 2.4rem 0.58rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 500;
}