/* MY LIVE VISUAL ADAPTER */

:root {
  --orion-purple: #7800ab;
  --orion-purple-bright: #a700ec;
  --orion-turquoise: #00bbbb;
  --orion-bg: #000000;
  --orion-surface-1: #08080a;
  --orion-surface-2: #101014;
  --orion-border: rgba(255,255,255,.11);
  --orion-text-2: #c8c8d0;
  --orion-text-3: #9292a0;
}

body {
  margin: 0;
  background: var(--orion-bg) !important;
}

.app {
  min-height: 100dvh;
  background: var(--orion-bg) !important;
}

.top,
.side,
.mobileNav {
  background: rgba(8,8,10,.96) !important;
  border-color: var(--orion-border) !important;
  backdrop-filter: blur(18px);
}

.main,
.view {
  min-width: 0;
  background: var(--orion-bg) !important;
}

.clientCard,
.card,
.note,
.policy,
.loginBox,
.dialog {
  min-width: 0;
  border: 1px solid var(--orion-border) !important;
  border-radius: 8px !important;
  background: var(--orion-surface-1) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.clientCard {
  overflow: hidden;
}

.clientCard *,
.card *,
.note *,
.policy * {
  min-width: 0;
}

.clientCard strong,
.clientCard span,
.clientCard p,
.card strong,
.card span,
.card p {
  overflow-wrap: anywhere;
}

.status,
.pill {
  border-radius: 5px !important;
}

.primary {
  border: 1px solid var(--orion-purple-bright) !important;
  border-radius: 6px !important;
  background: var(--orion-purple) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.secondary,
.mBtn,
.navBtn {
  border: 1px solid var(--orion-border) !important;
  border-radius: 6px !important;
  background: var(--orion-surface-2) !important;
  color: #fff !important;
}

.navBtn.active,
.mobileNav .active {
  border-color: rgba(167,0,236,.72) !important;
  background: rgba(120,0,171,.20) !important;
  color: #fff !important;
}

.avatar {
  background: var(--orion-purple) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .main,
  .view {
    width: 100%;
    overflow-x: hidden;
  }

  .clientCard,
  .card {
    width: 100%;
    max-width: 100%;
  }
}

/* ORION LIVE VISUAL ACTIVATION — MY */
html,
body,
.app {
  background:
    radial-gradient(circle at 84% -12%, rgba(120,0,171,.22), transparent 31%),
    #000 !important;
  color: #fff !important;
}

.top,
.side,
.mobileNav {
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(7,7,10,.97) !important;
  backdrop-filter: blur(18px);
}

.main,
.view,
#view {
  min-width: 0 !important;
  background: transparent !important;
}

.card,
.panel,
.ticket,
.clientCard,
.client-card,
.note,
.policy,
.dialog,
.loginBox {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 8px !important;
  background: #0b0b0f !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.25) !important;
}

.ticket {
  overflow: hidden !important;
}

.ticket .row {
  display: grid !important;
  grid-template-columns:
    minmax(120px,.75fr)
    minmax(220px,1.8fr)
    minmax(100px,.55fr)
    minmax(100px,.55fr)
    auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ticket .row > * {
  min-width: 0 !important;
}

.ticket .title,
.ticket .sub,
.ticket .num,
.ticket .date,
.ticket .price {
  overflow-wrap: anywhere !important;
}

.primary,
.btn.primary {
  border: 1px solid #a700ec !important;
  border-radius: 6px !important;
  background: #7800ab !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn,
.secondary,
.mBtn,
.navBtn,
.open,
.pill {
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 6px !important;
  background: #111116 !important;
  color: #fff !important;
}

.navBtn.active,
.mobileNav .active {
  border-color: rgba(167,0,236,.75) !important;
  background: rgba(120,0,171,.22) !important;
}

.overlay {
  background:
    radial-gradient(circle at 50% 0, rgba(120,0,171,.25), transparent 40%),
    rgba(0,0,0,.93) !important;
  backdrop-filter: blur(12px);
}

.loginBox {
  width: min(440px, calc(100vw - 28px)) !important;
  padding: 28px !important;
}

.loginLogo,
.avatar {
  background: #7800ab !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .ticket .row {
    grid-template-columns: 1fr 1fr !important;
  }

  .ticket .row > :nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .ticket .open {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .ticket .row {
    grid-template-columns: 1fr !important;
  }

  .ticket .row > :nth-child(2) {
    grid-column: auto !important;
  }
}