:root {
  --megle-stroke: #26045f;
  --megle-ink: #21084e;
  --megle-purple: #8d48ff;
  --megle-pink: #ff426f;
  --megle-orange: #ffad05;
  --megle-teal: #04d4bc;
  --megle-blue: #12b8f4;
  --megle-paper: #fffefa;
  --color-primary: var(--megle-purple);
  --color-primary-dark: #5d22d0;
  --color-success: var(--megle-teal);
  --color-danger: var(--megle-pink);
  --color-warning: var(--megle-orange);
  --bg-primary: #fff7fc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f4efff;
  --bg-dark: var(--megle-stroke);
  --text-primary: var(--megle-ink);
  --text-secondary: #6c5a84;
  --border-color: rgba(38, 4, 95, 0.18);
}

html,
body,
#main.app-container {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 66, 111, 0.18), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(4, 212, 188, 0.16), transparent 24%),
    linear-gradient(135deg, #fff7fc 0%, #fffdf5 38%, #f4efff 100%) !important;
  color: var(--megle-ink);
}

#top-bar.app-header,
#message-area.message-section,
#input-area.input-section,
#chat-controls.chat-controls,
.modal-content,
.device-modal,
.headerMenuPanel {
  background-color: rgba(255, 254, 250, 0.94) !important;
  color: var(--megle-ink) !important;
  border-color: rgba(38, 4, 95, 0.18) !important;
}

.video-container,
.video-container-peer,
.video-container-self {
  background:
    linear-gradient(145deg, rgba(141, 72, 255, 0.96), rgba(18, 184, 244, 0.86)),
    var(--megle-stroke) !important;
  border-color: rgba(38, 4, 95, 0.28) !important;
}

.video-container-peer.disconnected::before {
  background:
    radial-gradient(circle at 25% 70%, rgba(255, 66, 111, 0.50), transparent 28%),
    radial-gradient(circle at 72% 68%, rgba(255, 173, 5, 0.52), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(4, 212, 188, 0.42), transparent 26%),
    linear-gradient(145deg, #8d48ff 0%, #5a21c9 48%, #12b8f4 100%) !important;
}

.remote-start-online,
.online-counter,
.headerMenuBtn,
.chat-control,
.chat-control-match,
.chat-control-auto,
.input-wrapper,
.message-input,
.deviceCard,
.report-field select,
.report-field textarea {
  background-color: #ffffff !important;
  color: var(--megle-ink) !important;
  border-color: rgba(38, 4, 95, 0.18) !important;
}

.online-counter::before,
.remote-start-online::before {
  background: var(--megle-teal) !important;
  box-shadow: 0 0 0 5px rgba(4, 212, 188, 0.18) !important;
}

.button,
#skip-btn.button-skip,
.button-primary {
  background: var(--megle-purple) !important;
  color: #ffffff !important;
}

#skip-btn.button-skip[data-label="Next"] {
  background: var(--megle-purple) !important;
}

#video2StopTile,
.button-skip.stop-state,
.control-btn-report {
  background: var(--megle-pink) !important;
  color: #ffffff !important;
}

.button-send,
.premium-primary-btn {
  background: var(--megle-blue) !important;
  color: #ffffff !important;
}

.control-btn-mute,
.control-btn-settings {
  background: var(--megle-blue) !important;
  color: #ffffff !important;
}

.chat-control-match,
#countryTile {
  background: var(--megle-orange) !important;
  color: #ffffff !important;
  border-color: rgba(38, 4, 95, 0.20) !important;
}

#video2IdentityTile {
  background: var(--megle-teal) !important;
  color: #ffffff !important;
  border-color: rgba(38, 4, 95, 0.20) !important;
}

#skip-btn.button-skip::before,
#skip-btn.button-skip::after,
#video2StopTile::before,
#video2StopTile::after,
.chat-control-match::before,
.chat-control-match::after,
#video2IdentityTile::before,
#video2IdentityTile::after {
  background: transparent !important;
  box-shadow: none !important;
}

.message-self,
.message.message-self,
.message .you {
  color: var(--megle-purple) !important;
}

.message-stranger,
.message.message-stranger,
.message .strange {
  color: var(--megle-ink) !important;
}

.message-system .system,
.message .system,
.message-policy-notice {
  color: #6c5a84 !important;
}

.message-policy-notice,
.premium-badge,
.deviceModalNote {
  background-color: #fff9df !important;
  border-color: rgba(255, 173, 5, 0.28) !important;
}

.video2-vote-panel,
.webcam-label-container {
  background-color: rgba(255, 255, 255, 0.92) !important;
  color: var(--megle-ink) !important;
  border-color: rgba(38, 4, 95, 0.20) !important;
}

.peer-audio-panel {
  background: rgba(33, 8, 78, 0.88) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 -14px 34px rgba(33, 8, 78, 0.24) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.peer-volume-slider {
  height: 18px !important;
  accent-color: var(--megle-teal) !important;
}

.peer-volume-slider,
.peer-volume-slider::-webkit-slider-runnable-track,
.peer-volume-slider::-moz-range-track {
  cursor: pointer;
}

.peer-volume-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.peer-volume-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.peer-volume-slider::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--megle-teal);
}

.peer-volume-slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--megle-purple);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.peer-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--megle-purple);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.peer-volume-slider:hover::-webkit-slider-thumb,
.peer-volume-slider:focus-visible::-webkit-slider-thumb {
  background: var(--megle-pink);
}

.peer-volume-slider:hover::-moz-range-thumb,
.peer-volume-slider:focus-visible::-moz-range-thumb {
  background: var(--megle-pink);
}

.peer-audio-panel .control-btn-mute {
  background: var(--megle-blue) !important;
  color: #ffffff !important;
}

.remote-start-logo-link {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.peer-audio-mark .watermark,
#watermark.watermark {
  width: 96px !important;
  max-width: 24vw !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 0.78 !important;
  filter: drop-shadow(0 3px 8px rgba(38, 4, 95, 0.22)) !important;
}

#top-bar.app-header .online-counter,
#disconnected-overlay .remote-start-online {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(33, 8, 78, 0.82), 0 0 2px rgba(33, 8, 78, 0.95) !important;
  font-weight: 900 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#top-bar.app-header .online-counter .online-text,
#top-bar.app-header .online-counter .online-text span,
#disconnected-overlay .remote-start-online,
#disconnected-overlay #remoteStartOnlineNumber {
  color: #ffffff !important;
}

body.dark-mode {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 66, 111, 0.22), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(4, 212, 188, 0.16), transparent 24%),
    linear-gradient(135deg, #150333 0%, #21084e 54%, #061f4a 100%) !important;
}

body.dark-mode #main.app-container,
body.dark-mode #top-bar.app-header,
body.dark-mode #message-area.message-section,
body.dark-mode #input-area.input-section,
body.dark-mode #chat-controls.chat-controls,
body.dark-mode .headerMenuPanel {
  background-color: rgba(31, 8, 78, 0.94) !important;
  color: #fffefa !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}