/* ===== Base theme (dark, karaoke-friendly) ===== */
:root {
  --bg0: #070a12;
  --bg1: #0b1220;
  --card: rgba(31, 41, 55, 0.72);
  --card2: rgba(17, 24, 39, 0.72);
  --border: rgba(148, 163, 184, 0.22);
  --text: #e5e7eb;
  --muted: rgba(229, 231, 235, 0.72);
  --primary: #2563eb;
  --primary2: #60a5fa;
  --success: #059669;
  --warning: #f59e0b;
  --danger: #ef4444;
  --font-2xs: 11px;
  --font-xs: 12px;
  --font-sm: 13px;
  --font-base: 14px;
  --font-md: 15px;
  --font-lg: 16px;
  --font-xl: 18px;
  --font-title: 26px;
  --font-2xl: 24px;
  --font-3xl: 32px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

html:has(.customerApp) {
  overflow: hidden;
  height: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #12224a 0%, var(--bg0) 60%),
    radial-gradient(900px 500px at 85% 10%, #0f2a3a 0%, var(--bg1) 65%),
    var(--bg0);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--primary2);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ===== Layout ===== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2.5rem;
}

.djContainer {
  display: grid;
  /* 5 tracks: header | billing notice | KPI | board/stats | footer.
     Notice row collapses to 0 when #planQuotaHeaderNotice is hidden/absent.
     Explicit grid-row prevents notice from stealing the 1fr board track
     (which caused KPI labels to paint over SEDANG DIMAINKAN / SETERUSNYA). */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  width: calc(100% - 24px);
  height: 100vh;
  max-width: 1800px;
  padding: 0.65rem 0;
  overflow: hidden;
}

.djContainer > .topbar {
  grid-row: 1;
  z-index: 3;
}

.djContainer > .planQuotaHeaderNotice {
  grid-row: 2;
  min-width: 0;
  z-index: 3;
}

.djContainer > .djKpiSection {
  grid-row: 3;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.djContainer > .djBoardGrid,
.djContainer > .djSessionStatsPanel {
  grid-row: 4;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.djContainer > .djClockFooter {
  grid-row: 5;
  z-index: 3;
}

.djContainer > .topbar,
.djContainer > .djKpiSection,
.djContainer > .djClockFooter {
  margin: 0;
}

.djContainer > .topbar.djUnifiedHeader {
  margin-bottom: 0.35rem;
}

.djKpiSection {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding-top: 0.15rem;
}

.djUnifiedHeader {
  padding: 0.85rem 1rem 1.05rem;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.55rem;
  overflow: visible;
  z-index: 12;
  background:
    linear-gradient(105deg, rgba(37, 99, 235, 0.2), rgba(124, 58, 237, 0.08)),
    rgba(15, 23, 42, 0.9);
}

.djUnifiedHeader .nav {
  flex: 1 1 420px;
  justify-content: flex-end;
}

.djHeaderCopy {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.djHeaderCopy .brand {
  display: flex;
  grid-row: 1 / 3;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
  min-width: auto;
  max-width: 100%;
  padding-right: 0;
  border-right: 0;
}

.companyBrandText {
  display: grid;
  gap: 0.1rem;
  min-width: auto;
  flex: 0 1 auto;
}

.djCompanyLogo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}

.djHeaderCopy .systemOfficialIcon {
  width: 48px;
  height: 48px;
}

.djCompanyLogo[hidden],
.djHeaderCopy .systemOfficialIcon[hidden] {
  display: none;
}

.djHeaderCopy .brand strong,
.djUnifiedHeader .companyBrandText strong {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.2;
}

.djUnifiedHeader .companyBrandText span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.djHeaderCopy h1 {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
}

.djHeaderCopy p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.djSessionControl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.25rem 0.3rem 0.25rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.4);
}

.djExtendPanel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.djEffectiveClose {
  color: #93c5fd;
  font-size: 10px;
  white-space: nowrap;
}

.djExtendPanel input[type="time"],
.djExtendDialogField input[type="time"] {
  min-height: 32px;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
  font-size: 11px;
}

.djExtendPanel button.extendMuted,
.djExtendPanel button:disabled {
  border-color: rgba(100, 116, 139, 0.35);
  color: #64748b;
  background: rgba(51, 65, 85, 0.4);
  cursor: not-allowed;
  opacity: 0.9;
}

.djExtendPanel button.extendReady,
.djExtendHeaderButton,
.djExtendFooterButton,
.djExtendDialogConfirm {
  border: 1px solid rgba(34, 197, 94, 0.42);
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.16);
  cursor: pointer;
  opacity: 1;
}

.djExtendHeaderButton {
  font-weight: 700;
}

.djExtendHeaderButton[hidden] {
  display: none !important;
}

#djSessionStatus {
  display: none !important;
}

.djExtendPanel input[type="time"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.djSessionControl > span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.djSessionControl button {
  min-height: 34px;
  padding: 0.4rem 0.75rem;
  border-color: rgba(34, 197, 94, 0.42);
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.16);
  font-size: 11px;
}

.djSessionControl button.endSession {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
  background: rgba(220, 38, 38, 0.16);
}

.djSessionControl button.onlineRequestsOn {
  border-color: rgba(34, 197, 94, 0.55);
  color: #dcfce7;
  background: rgba(22, 163, 74, 0.28);
}

.djSessionControl button.onlineRequestsOff {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fde68a;
  background: rgba(180, 83, 9, 0.22);
}

.djSessionControl button.autoDjOn {
  border-color: rgba(56, 189, 248, 0.55);
  color: #e0f2fe;
  background: rgba(2, 132, 199, 0.28);
  animation: autoDjBlink 1.4s ease-in-out infinite;
}

.djSessionControl button.autoDjOff {
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  background: rgba(71, 85, 105, 0.24);
}

.djSessionControl button.autoDjPending {
  border-color: rgba(56, 189, 248, 0.75);
  color: #f0f9ff;
  background: rgba(3, 105, 161, 0.38);
  animation: autoDjPulse 1.2s ease-in-out infinite;
}

.djSessionControl button.autoDjModeTalk {
  border-color: rgba(52, 211, 153, 0.45);
  color: #d1fae5;
  background: rgba(5, 150, 105, 0.22);
}

.djSessionControl button.autoDjModeAnnounce {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fef3c7;
  background: rgba(217, 119, 6, 0.24);
}

@keyframes autoDjBlink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
  }
  50% {
    opacity: 0.82;
    box-shadow: 0 0 10px 2px rgba(56, 189, 248, 0.35);
  }
}

@keyframes autoDjPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08);
  }
}

.djFooterSongCountdownWrap.autoDjPending .djFooterSongCountdown {
  color: #7dd3fc;
}

.djKpiGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
}

.djSessionWarnings {
  display: grid;
  gap: 0.45rem;
}

.djLastSessionBanner[hidden],
.djLastSessionBanner.is-collapsed,
.djSessionWarnings[hidden],
.djSessionWarnings[hidden]:empty,
.djSessionWarnings.is-collapsed,
.djSessionStatsPanel[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

.djSessionWarning {
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
  font-size: 13px;
  line-height: 1.45;
}

.djSessionWarningInfo {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.1);
  color: #bae6fd;
}

.djSessionWarningDanger {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fecaca;
}

.djLastSessionBanner {
  display: flex;
  align-items: center;
  margin-bottom: 0.45rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.08);
  color: #e0f2fe;
  font-size: 12px;
  line-height: 1.3;
  min-height: 0;
}

.djLastSessionBannerLine {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #bae6fd;
}

.manualDashboardNotices {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.manualDashboardNotice {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.manualDashboardNoticeInfo {
  border: 1px solid rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
  color: #bae6fd;
}

.manualDashboardNoticeWarning {
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.08);
  color: #fecaca;
}

.djKpiCard {
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.djKpiCard::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.08);
}

.djKpiCard.priority::after {
  background: rgba(245, 158, 11, 0.12);
}

.djKpiCard.topSinger::after {
  background: rgba(167, 139, 250, 0.13);
}

.kpiCard.djKpiCard .value {
  margin-top: 0.18rem;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
}

.kpiCard.djKpiCard .textValue {
  overflow: hidden;
  font-size: clamp(17px, 1.5vw, 24px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.djKpiCard small {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: var(--font-2xs);
}

.djBoardGrid {
  display: grid;
  grid-template-columns:
    minmax(270px, 0.95fr)
    minmax(285px, 1fr)
    minmax(340px, 1.3fr);
  align-items: stretch;
  gap: 0.85rem;
  min-height: 0;
}

.djQueuePanel {
  display: flex;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.djScrollableList,
.djNowPlaying {
  min-height: 0;
  flex: 1;
  padding-right: 0.25rem;
  padding-bottom: 0.45rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(96, 165, 250, 0.4) transparent;
  scrollbar-width: thin;
}

.djScrollableList::-webkit-scrollbar,
.djNowPlaying::-webkit-scrollbar {
  width: 6px;
}

.djScrollableList::-webkit-scrollbar-thumb,
.djNowPlaying::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.4);
}

.djClockFooter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.08)),
    rgba(15, 23, 42, 0.9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.djClockDateBlock {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.djSessionQrThumb {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.djSessionQrThumb:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.djSessionQrThumb[hidden] {
  display: none !important;
}

.djSessionQrThumbImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.djClockDate {
  display: grid;
  gap: 0.1rem;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.djClockDate strong {
  color: var(--text);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.djFooterSessionClose {
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.djClockFullDate {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.djFooterCloseWarning {
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.djExtendFooterButton {
  justify-self: start;
  margin-top: 0.15rem;
  min-height: 28px;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.djExtendFooterButton[hidden] {
  display: none !important;
}

.djExtendDialog {
  width: min(calc(100% - 2rem), 420px);
  padding: 0;
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 18px;
  color: var(--text);
  background: #0f172a;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.7);
}

.djExtendDialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
}

.djExtendDialogShell {
  display: grid;
  gap: 0.85rem;
  padding: 1.15rem 1.2rem 1.2rem;
}

.djExtendDialogHeader h2 {
  margin: 0;
  font-size: 1.2rem;
}

.djExtendDialogCurrentClose {
  margin: 0.35rem 0 0;
  color: #93c5fd;
  font-size: 13px;
}

.djExtendDialogField {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 12px;
}

.djExtendDialogField input[type="time"] {
  width: 100%;
  min-height: 42px;
  font-size: 14px;
}

.djExtendDialogHint {
  margin: 0;
  color: #86efac;
  font-size: 12px;
}

.djExtendDialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.djExtendDialogConfirm {
  min-height: 38px;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.djSessionQrDialog {
  width: min(calc(100% - 1.25rem), 520px);
  max-height: calc(100dvh - 1rem);
  padding: 0;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 18px;
  color: var(--text);
  background: #0f172a;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.7);
  overflow: auto;
}

.djSessionQrDialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
}

.djSessionQrDialogShell {
  display: grid;
  gap: 0.9rem;
  padding: 1.15rem 1.2rem 1.2rem;
}

.djSessionQrDialogHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.djSessionQrDialogHeader h2 {
  margin: 0;
  font-size: 1.2rem;
}

.djSessionQrAutoHide {
  margin: 0;
  flex-shrink: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 999px;
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.16);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.djSessionQrAutoHide[hidden] {
  display: none !important;
}

.djSessionQrDialogHint {
  margin: 0.35rem 0 0;
  color: #bae6fd;
  font-size: 12px;
  line-height: 1.55;
}

.djSessionQrPreviewWrap {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0.35rem;
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.22);
  background: rgba(248, 250, 252, 0.96);
}

.djSessionQrPreview {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.djSessionQrPreview .qrPrintCard {
  max-width: min(440px, 100%);
  width: min(440px, 100%, calc((100dvh - 14rem) * 210 / 297));
  max-height: calc(100dvh - 14rem);
  height: auto;
  box-shadow: none;
  border-width: 2px;
}

.djSessionQrStatus {
  margin: 0;
  font-size: 12px;
  color: #86efac;
}

.djSessionQrStatus.is-error {
  color: #fecaca;
}

.djSessionQrDialogActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.djSessionQrDownload {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(8, 145, 178, 0.24);
}

.djClockFooter time {
  color: #dbeafe;
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.3);
  transition: font-size 0.2s ease, opacity 0.2s ease;
}

.djClockCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
}

.djClockCenter:has(.djFooterSongCountdownWrap:not([hidden])) time {
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.78;
  line-height: 1;
}

.djFooterSongCountdownWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.djFooterSongCountdownWrap[hidden] {
  display: none !important;
}

.djFooterSongCountdown {
  color: #facc15;
  font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.36);
}

.djFooterSongCountdownWrap.ending .djFooterSongCountdown {
  color: #ef4444;
  text-shadow: 0 0 18px rgba(239, 68, 68, 0.42);
}

.djClockStatus {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  color: #fca5a5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.djClockStatus span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
  animation: djClockPulse 1.8s infinite;
}

.djClockStatus.active {
  color: #86efac;
}

.djClockStatus.active span {
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e;
}

.djClockMeta {
  display: grid;
  justify-items: end;
  gap: 0.18rem;
}

.djAppVersion,
.staffAppVersion {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.staffAppVersion {
  align-self: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  font-size: 11px;
  white-space: nowrap;
}

.staffExeDownload {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.95));
  color: #eff6ff;
  font-weight: 700;
  text-decoration: none;
}

.staffExeDownload:hover {
  filter: brightness(1.08);
}

@keyframes djClockPulse {
  50% {
    opacity: 0.45;
  }
}

@media (max-width: 900px) {
  .djContainer {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    overflow: visible;
  }

  .djUnifiedHeader {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem 0.9rem;
  }

  .djHeaderCopy {
    width: 100%;
  }

  .djHeaderCopy .brand {
    display: flex;
    max-width: 100%;
  }

  .djHeaderCopy .systemOfficialIcon,
  .djHeaderCopy .djCompanyLogo {
    width: 38px;
    height: 38px;
  }

  .djHeaderCopy .companyBrandText span {
    display: none;
  }

  .djUnifiedHeader .nav {
    flex: 1 1 auto;
    width: 100%;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .djSessionControl {
    width: 100%;
    flex-wrap: wrap;
    border-radius: 12px;
    padding: 0.45rem 0.55rem;
    gap: 0.4rem;
  }

  .djSessionControl > span {
    flex: 1 1 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .djSessionControl button {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .djUnifiedHeader .nav > a.pill,
  .djUnifiedHeader .nav > form {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }

  .djUnifiedHeader .nav > a.pill,
  .djUnifiedHeader .nav .pill {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    padding: 0.45rem 0.55rem;
    font-size: 11px;
  }

  .djKpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .djKpiCard {
    display: flex;
    flex-direction: column;
    min-height: 96px;
    padding: 0.65rem 0.7rem;
  }

  .djKpiCard .label {
    font-size: var(--font-2xs);
    line-height: 1.25;
  }

  .kpiCard.djKpiCard .value {
    font-size: clamp(20px, 6vw, 28px);
  }

  .djKpiCard small {
    margin-top: auto;
    font-size: var(--font-2xs);
    line-height: 1.25;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .djKpiSection {
    margin-bottom: 0.85rem;
    padding-bottom: 0.1rem;
  }

  .djBoardGrid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 0.15rem;
    margin-bottom: 0.85rem;
  }

  .djQueuePanel.card {
    margin-bottom: 0;
    padding: 0.9rem 0.85rem 1rem;
  }

  .djQueuePanel .sectionTitle {
    margin-bottom: 0.7rem;
    padding-top: 0.05rem;
  }

  .djNowPlaying,
  .djScrollableList {
    padding: 0.15rem 0.1rem 0.45rem 0;
  }

  .djSessionStatsGrid,
  .djSessionStatsGrid.djSessionStatsGrid--cols-1,
  .djSessionStatsGrid.djSessionStatsGrid--cols-2,
  .djSessionStatsGrid.djSessionStatsGrid--cols-3 {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    min-height: 0;
    padding: 0.35rem 0 0.75rem;
  }

  .djStatsRankColumn {
    padding: 0.8rem 0.85rem 0.7rem;
  }

  .djStatsRankList {
    max-height: none;
    overflow: visible;
    gap: 0.5rem;
  }

  .djStatsRankBody strong {
    -webkit-line-clamp: 3;
    font-size: 14px;
  }

  .djStatsRankBody small {
    font-size: 12px;
  }

  .djQueuePanel {
    height: auto;
    min-height: 260px;
    max-height: none;
  }

  .djScrollableList {
    max-height: min(52vh, 520px);
  }

  .djScrollableList--full {
    max-height: none;
    overflow-y: visible;
    flex: 0 0 auto;
  }

  .fullQueuePanel {
    height: auto;
    overflow: visible;
  }

  .djQueuePanel .btnRow--compact button,
  .djQueuePanel .btnRow--nowMain button,
  .djQueuePanel .btnRow--nowSub button {
    width: auto;
  }

  .btnRow--nowSub {
    grid-template-columns: 1fr 1fr;
  }

  .btnRow--nowSub button:last-child {
    grid-column: 1 / -1;
  }

  .djClockFooter {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    margin-top: 0;
    margin-bottom: max(0.2rem, env(safe-area-inset-bottom));
    padding:
      0.85rem 0.85rem
      max(1rem, calc(0.75rem + env(safe-area-inset-bottom)));
    text-align: center;
  }

  .djContainer > .djClockFooter {
    margin-top: 0;
    margin-bottom: max(0.2rem, env(safe-area-inset-bottom));
  }

  .djClockCenter {
    justify-content: center;
    gap: 0.12rem;
    padding: 0.15rem 0;
  }

  .djClockDateBlock {
    justify-content: center;
  }

  .djClockDate {
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    padding-bottom: 0.05rem;
    text-align: center;
  }

  .djClockMeta {
    justify-items: center;
    gap: 0.3rem;
    padding-top: 0.1rem;
  }

  .djAppVersion {
    display: block;
    padding-bottom: 0.05rem;
  }

  .djFooterSessionClose,
  .djClockFullDate {
    font-size: 10px;
  }

  .djExtendFooterButton {
    justify-self: center;
  }

  .djClockStatus {
    justify-content: center;
  }

  .djFooterSongCountdown {
    font-size: clamp(28px, 10vw, 48px);
  }

  .djClockFooter time {
    font-size: clamp(22px, 7vw, 36px);
  }
}

@media (max-width: 640px) {
  .djKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .djUnifiedHeader .staffExeDownload {
    display: none !important;
  }

  .djUnifiedHeader .nav > a.pill,
  .djUnifiedHeader .nav > form,
  .djSessionControl button {
    flex: 1 1 calc(50% - 0.2rem);
  }
}

@media (max-width: 480px) {
  .djContainer {
    padding: max(0.65rem, env(safe-area-inset-top)) 0.65rem max(0.65rem, env(safe-area-inset-bottom));
  }

  .djKpiSection {
    margin-bottom: 0.95rem;
  }

  .djBoardGrid {
    gap: 0.9rem;
    margin-bottom: 0.95rem;
  }

  .djQueuePanel.card {
    padding: 0.85rem 0.8rem 0.95rem;
  }

  .djClockFooter {
    padding:
      0.9rem 0.8rem
      max(1.05rem, calc(0.85rem + env(safe-area-inset-bottom)));
    gap: 0.6rem;
  }

  .djUnifiedHeader {
    padding: 0.65rem 0.7rem 0.75rem;
  }

  .djUnifiedHeader .companyBrandText strong {
    font-size: 14px;
  }

  .djKpiCard {
    min-height: 88px;
    padding: 0.58rem 0.62rem;
  }

  .djKpiCard .label {
    font-size: var(--font-2xs);
  }

  .kpiCard.djKpiCard .value {
    font-size: 22px;
  }

  .kpiCard.djKpiCard .textValue {
    font-size: 16px;
  }

  .djScrollableList,
  .djNowPlaying {
    max-height: none;
  }

  .djQueuePanel {
    min-height: 220px;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.15),
    rgba(31, 41, 55, 0.35)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
  position: sticky;
  top: 10px;
  backdrop-filter: blur(8px);
  z-index: 5;
}

.brand {
  display: grid;
  gap: 0.15rem;
}
.brand strong {
  font-size: 18px;
  letter-spacing: 0.2px;
}
.brand span {
  font-size: 12px;
  color: var(--muted);
}

.systemOfficialIcon {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 26px rgba(59, 130, 246, 0.24);
}

.systemBrand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.systemBrand > div {
  display: grid;
  gap: 0.15rem;
}

.tenantHeaderIcon {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}

.nav {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav form {
  display: flex;
  margin: 0;
}

.nav .pill {
  display: inline-flex;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  font: inherit;
  line-height: 1;
}

.nav .djLedScreenToggle[hidden],
.nav .djKaraokeToggle[hidden],
.nav .djKaraokePresentToggle[hidden],
.nav .monitorLayoutMenu[hidden],
.nav .monitorLayoutButton[hidden] {
  display: none !important;
}

.nav .djKaraokeToggle.is-on,
.nav .djKaraokePresentToggle.is-on {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
}

.nav .djKaraokeToggle.is-sound-on {
  border-color: rgba(74, 222, 128, 0.55);
}

.contextBackBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 13px;
  background: rgba(37, 99, 235, 0.09);
  font-size: 12px;
}

.contextBackBar a {
  color: #bfdbfe;
  font-weight: 800;
}

.contextBackActions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.contextBackActions a + a {
  padding-left: 0.85rem;
  border-left: 1px solid var(--border);
}

.contextBackBar span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contextBackMeta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-width: 0;
}

.contextBackMeta .langSwitch {
  flex: 0 0 auto;
}

.pill {
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.35);
  color: var(--text);
  transition: transform 0.12s ease, background 0.12s ease,
    border-color 0.12s ease;
  user-select: none;
}
.pill:hover {
  transform: translateY(-1px);
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
  text-decoration: none;
}

.monitorRefreshButton {
  border-color: rgba(34, 211, 238, 0.34);
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.1);
}

.monitorLayoutMenu {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
  z-index: 50;
}

.monitorLayoutDialog {
  width: min(calc(100% - 2rem), 26rem);
  padding: 0;
  border: none;
  color: var(--text);
  background: transparent;
}

.monitorLayoutDialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
}

.monitorLayoutDialog .monitorLayoutPanel {
  position: static;
  width: 100%;
  margin: 0;
}

.monitorLayoutClose {
  width: 100%;
  margin-top: 0.65rem;
}

.monitorLayoutPanel[hidden] {
  display: none !important;
}

.monitorLayoutPanel:not([hidden]) {
  display: block;
}

.nav .monitorLayoutButton {
  display: inline-flex;
  min-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  border-color: rgba(167, 139, 250, 0.38);
  color: #ddd6fe;
  background: rgba(109, 40, 217, 0.12);
}

.nav .monitorLayoutButton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.monitorLayoutPanel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  width: min(24rem, 92vw);
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.monitorLayoutHeader strong {
  display: block;
  margin-bottom: 0.2rem;
}

.monitorLayoutHeader small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.monitorLayoutList {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.monitorAssignRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 14rem);
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.55);
}

.monitorAssignRowFixed {
  border-color: rgba(34, 211, 238, 0.28);
  background: rgba(8, 145, 178, 0.08);
}

.monitorAssignCopy strong {
  display: block;
  font-size: 0.92rem;
}

.monitorAssignCopy small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.monitorAssignRowLocked {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(245, 158, 11, 0.06);
}

.monitorAssignControls {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.monitorAssignLock {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.75);
  color: #e2e8f0;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.monitorAssignLock.isLocked {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.16);
}

.monitorLayoutSelect {
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
}

.monitorLayoutSelect:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  color: var(--muted);
}

.monitorAssignOpen:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(30, 41, 59, 0.45);
  color: rgba(226, 232, 240, 0.55);
}

.monitorAssignOpen {
  flex: 0 0 auto;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(109, 40, 217, 0.18);
  color: #ede9fe;
  font-size: 0.78rem;
  font-weight: 800;
}

.monitorLayoutFooter {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.monitorLayoutLockBanner {
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(245, 158, 11, 0.08);
  color: #fcd34d;
  font-size: 0.78rem;
  line-height: 1.35;
}

.monitorLayoutLock {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.75);
  color: #e2e8f0;
  font-weight: 700;
  cursor: pointer;
}

.monitorLayoutLock.isLocked {
  border-color: rgba(251, 191, 36, 0.38);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.monitorLayoutLock:hover {
  filter: brightness(1.06);
}

.monitorLayoutReset {
  width: 100%;
  margin-top: 0.45rem;
}

.monitorLayoutLaptopMode {
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
}

.monitorLayoutOpenAll {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: #fff;
  font: inherit;
  font-weight: 800;
}

.monitorLayoutFooterNote {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.monitorLayoutHint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.customerApp.detachedMonitorMode:not(.electronStaffApp) .contextBackBar {
  display: none;
}

.monitorOnlyBanner {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.32);
  background: rgba(245, 158, 11, 0.1);
  color: #fde68a;
  font-size: 0.84rem;
  line-height: 1.4;
  text-align: center;
}

.manualDjMode .monitorOnlyBanner {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.65rem;
  font-size: 12px;
  line-height: 1.35;
}

.customerApp.monitorOnlyCustomer .manualRequestForm,
.customerApp.monitorOnlyCustomer .manualQueueTools {
  opacity: 0.55;
  pointer-events: none;
}

.detachedMonitorDock {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 30;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(15, 23, 42, 0.92);
  color: #bfdbfe;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.detachedMonitorDock:hover {
  background: rgba(37, 99, 235, 0.22);
  text-decoration: none;
}

/* ===== Cards & typography ===== */
.card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--card);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.hero {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.15rem;
  background: linear-gradient(
      130deg,
      rgba(37, 99, 235, 0.2),
      rgba(2, 132, 199, 0.08) 45%,
      rgba(17, 24, 39, 0.55) 80%
    ),
    var(--card);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
}

.hero h1 {
  margin-bottom: 0.35rem;
}

.hero p {
  margin-bottom: 0;
}

.kpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.kpiCard {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.8rem 0.9rem;
  background: rgba(15, 23, 42, 0.55);
}

.kpiCard .label {
  color: var(--muted);
  font-size: var(--font-xs);
}

.kpiCard .value {
  font-size: 24px;
  font-weight: 800;
  margin-top: 0.15rem;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.7rem;
}
.cardHeader h2 {
  margin: 0;
  font-size: var(--font-lg);
}
.cardHeader small {
  color: var(--muted);
}

h1,
h2,
h3 {
  margin: 0 0 0.5rem;
}
h1 {
  font-size: var(--font-title);
  letter-spacing: 0.2px;
}

p {
  margin: 0.25rem 0 0.7rem;
  color: var(--muted);
}

label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--font-sm);
  color: var(--muted);
}

input {
  width: 100%;
  min-width: 0;
  padding: 0.72rem 0.8rem;
  margin-top: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(17, 24, 39, 0.35);
  color: var(--text);
  font-size: var(--font-lg);
  outline: none;
}

select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 0.35rem;
  padding: 0.72rem 2.4rem 0.72rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 10px;
  color: var(--text);
  font-size: var(--font-lg);
  background-color: rgba(17, 24, 39, 0.88);
  background-image:
    linear-gradient(45deg, transparent 50%, #93c5fd 50%),
    linear-gradient(135deg, #93c5fd 50%, transparent 50%);
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  outline: none;
  appearance: none;
}

select option {
  color: #e5e7eb;
  background: #111827;
}

input:focus,
select:focus {
  border-color: rgba(96, 165, 250, 0.65);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

button {
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  color: white;
  font-size: var(--font-lg);
  font-weight: 600;
  transition: transform 0.12s ease, filter 0.12s ease;
}
button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
button.secondary {
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: var(--primary2);
  font-weight: 700;
}
button.loopButton.active {
  background: rgba(5, 150, 105, 0.2);
  border-color: rgba(52, 211, 153, 0.65);
  color: #6ee7b7;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
}
button.ulangButton.ulangReady,
button.ulangButton.active {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(74, 222, 128, 0.7);
  color: #bbf7d0;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16);
  font-weight: 800;
}
button.danger {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fecaca;
}
button.success {
  background: rgba(22, 163, 74, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.42);
  color: #bbf7d0;
}
button.warning {
  background: rgba(180, 83, 9, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

.desktopUpdateBanner {
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  max-width: 760px;
  min-height: 72px;
  align-items: center;
  gap: 0.8rem;
  margin-inline: auto;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.5);
  border-radius: 16px;
  color: #eff6ff;
  background: rgba(7, 15, 31, 0.97);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.56);
  backdrop-filter: blur(18px);
}

.desktopUpdateBanner > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.2rem;
}

.desktopUpdateBanner strong {
  font-size: 14px;
}

.desktopUpdateBanner span {
  color: #a9bad0;
  font-size: 11px;
}

.desktopUpdateBanner a,
.desktopUpdateBanner button {
  min-height: 40px;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  white-space: nowrap;
}

.desktopUpdateBanner a {
  color: #fff;
  background: linear-gradient(180deg, var(--primary2), var(--primary));
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.desktopUpdateBanner button {
  color: #bfdbfe;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

@media (max-width: 620px) {
  .desktopUpdateBanner {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .desktopUpdateBanner > div {
    flex-basis: 100%;
  }

  .desktopUpdateBanner a,
  .desktopUpdateBanner button {
    flex: 1;
    text-align: center;
  }
}

.desktopPeekCard {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem 1.05rem;
}
.desktopPeekSteps {
  margin: 0.65rem 0 0.85rem 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.28rem;
}
.desktopPeekActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.desktopPeekNote {
  margin: 0;
  line-height: 1.45;
}
.desktopClientPanel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(37, 99, 235, 0.14), rgba(124, 58, 237, 0.09)),
    var(--card);
}
.desktopClientPanel[hidden] {
  display: none;
}
.desktopClientPanel.active {
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(5, 150, 105, 0.1);
}
.desktopClientIcon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #60a5fa, #7c3aed);
  color: white;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.24);
}
.desktopClientCopy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.desktopClientCopy span {
  color: var(--muted);
  font-size: 12.5px;
}
.desktopClientActions {
  display: flex;
  gap: 0.55rem;
  margin-left: auto;
}
.desktopDownloadButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  color: white;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* ===== Grids ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.grid2 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 0.75rem 0.75rem 2rem;
  }

  .topbar {
    position: static;
    top: auto;
    padding: 0.8rem;
    gap: 0.7rem;
    border-radius: 14px;
  }

  .brand {
    min-width: 0;
  }

  .brand strong {
    font-size: 17px;
  }

  .brand span {
    display: none;
  }

  .nav {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .djUnifiedHeader .nav {
    flex-wrap: wrap;
  }

  .contextBackBar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pill {
    padding: 0.5rem 0.65rem;
    font-size: 12px;
    white-space: nowrap;
  }

  .hero {
    padding: 1rem;
    border-radius: 16px;
  }

  .hero h1 {
    font-size: 23px;
  }

  .hero p {
    font-size: 13px;
    line-height: 1.5;
  }

  .kpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .kpiCard {
    min-width: 0;
    padding: 0.7rem 0.6rem;
    border-radius: 12px;
  }

  .kpiCard .label {
    font-size: 10px;
  }

  .kpiCard .value {
    margin-top: 0.25rem;
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .card {
    padding: 1rem;
    border-radius: 16px;
  }

  .sectionTitle,
  .cardHeader {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }

  .sectionTitle h2 {
    font-size: 18px;
  }

  .formGrid,
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }

  label {
    margin-bottom: 0.3rem;
  }

  input {
    min-height: 48px;
    padding: 0.75rem;
    font-size: 16px;
  }

  .btnRow {
    width: 100%;
  }

  .btnRow button {
    width: 100%;
    min-height: 48px;
  }

  .tableItem {
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    gap: 0.5rem;
  }

  .desktopClientPanel {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .desktopClientActions {
    width: 100%;
    margin-left: 0;
  }

  .desktopClientActions > * {
    flex: 1;
  }

  .toast {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.tenantLandingPage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.14), transparent 34rem),
    radial-gradient(circle at 85% 16%, rgba(124, 58, 237, 0.16), transparent 32rem),
    #050811;
}

.tenantLandingShell {
  width: min(100% - 2rem, 1080px);
  margin: 0 auto;
  padding: 1rem 0 2.2rem;
}

.tenantLandingHeader {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
}

.tenantLandingHeader > img {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 12px 36px rgba(59, 130, 246, 0.24);
}

.tenantLandingHeader > div {
  display: grid;
}

.tenantLandingHeader strong {
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.07em;
}

.tenantLandingHeader strong span {
  color: #60a5fa;
}

.tenantLandingHeader small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tenantLandingHero {
  max-width: 760px;
  margin: clamp(0.75rem, 2.5vw, 1.75rem) auto 1.5rem;
  text-align: center;
}

.tenantLandingEyebrow {
  display: inline-flex;
  padding: 0.38rem 0.7rem;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.1);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.tenantLandingHero h1 {
  margin: 1rem 0 0.65rem;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.tenantLandingHero p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(14px, 1.8vw, 17px);
  line-height: 1.6;
}

.tenantFinder {
  max-width: 760px;
  margin: 0 auto 1.2rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 22px;
  background: rgba(10, 18, 36, 0.82);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.tenantFinderSearch {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 800;
}

.tenantFinderSearch > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.55rem;
}

.tenantFinderSearch input {
  min-width: 0;
  min-height: 54px;
  margin: 0;
  font-size: 17px;
}

.tenantFinderSearch button {
  width: auto;
  min-width: 92px;
}

.tenantFinderOr {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.75rem 0;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.tenantFinderOr::before,
.tenantFinderOr::after {
  height: 1px;
  flex: 1;
  background: rgba(148, 163, 184, 0.16);
  content: "";
}

.tenantLocationButton {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  color: #e0f2fe;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.34), rgba(37, 99, 235, 0.28));
  border: 1px solid rgba(34, 211, 238, 0.34);
  text-align: left;
}

.tenantFinderSearch .tenantLocationIconButton {
  display: grid;
  width: 54px;
  min-width: 54px;
  min-height: 54px;
  margin: 0;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  color: #cffafe;
}

.tenantLocationIconButton svg {
  transition: transform 0.2s ease;
}

.tenantLocationIconButton:hover svg {
  transform: scale(1.08);
}

.tenantLocationIconButton.locating svg {
  animation: locationPulse 1s ease-in-out infinite;
}

.tenantLocationButton > span:first-child {
  font-size: 28px;
}

.tenantLocationButton > span:last-child {
  display: grid;
  gap: 0.12rem;
}

.tenantLocationButton small {
  color: #a5c6d8;
  font-size: 10px;
  font-weight: 500;
}

.tenantLocationButton.locating > span:first-child {
  animation: locationPulse 1s ease-in-out infinite;
}

@keyframes locationPulse {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

.tenantLocationStatus {
  min-height: 1.2em;
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.tenantLocationStatus.success {
  color: #86efac;
}

.tenantLocationStatus.warning {
  color: #fde68a;
}

.tenantLocationStatus.error {
  color: #fca5a5;
}

.tenantQrNotice {
  display: flex;
  max-width: 760px;
  align-items: center;
  gap: 0.9rem;
  margin: 0 auto 1.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 17px;
  background: rgba(8, 145, 178, 0.1);
}

.tenantQrNoticeIcon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: #cffafe;
  background: rgba(6, 182, 212, 0.18);
  font-size: 25px;
}

.tenantQrNotice > div:last-child {
  display: grid;
  gap: 0.15rem;
}

.tenantQrNotice span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tenantDirectory {
  width: min(100%, 760px);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 24px;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.tenantDirectoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.tenantDirectoryHeader h2 {
  margin: 0;
  font-size: 20px;
}

.tenantDirectoryHeader small {
  color: var(--muted);
}

.tenantSearch {
  width: min(100%, 280px);
  margin: 0;
}

.tenantSearch input {
  min-height: 43px;
}

.tenantDirectoryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.8rem;
}

.tenantDirectoryCard {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(125deg, rgba(37, 99, 235, 0.09), transparent 55%),
    rgba(2, 6, 23, 0.46);
}

.tenantDirectoryCard[hidden] {
  display: none;
}

.tenantDirectoryCard.locationMatch {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.3), rgba(2, 6, 23, 0.65));
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08);
}

.tenantDirectoryCard.locationNearest {
  border-color: rgba(250, 204, 21, 0.45);
}

.tenantDistanceBadge {
  width: fit-content;
  margin-top: 0.2rem;
  padding: 0.25rem 0.48rem;
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.18);
  font-size: 9px;
  font-weight: 900;
}

.tenantDirectoryCard.locationNearest .tenantDistanceBadge {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.16);
}

.tenantDirectoryIdentity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.tenantDirectoryIdentity > img,
.tenantDirectoryIdentity > span {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 15px;
  object-fit: contain;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.13);
  font-size: 24px;
  font-weight: 900;
}

.tenantDirectoryIdentity > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.tenantDirectoryIdentity strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenantDirectoryIdentity small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenantDirectoryActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.tenantDirectoryActions a {
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 0.6rem;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.tenantDirectoryActions a:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.tenantCustomerAction {
  color: #ffffff;
  background: linear-gradient(115deg, #2563eb, #7c3aed);
}

.tenantStaffAction {
  border: 1px solid var(--border);
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.08);
}

.tenantLandingStaffIntent .tenantDirectoryActions {
  grid-template-columns: minmax(0, 1fr);
}

.tenantLandingStaffIntent .tenantStaffAction {
  grid-column: 2;
  grid-row: 1;
  border: 0;
  color: #ffffff;
  background: linear-gradient(115deg, #2563eb, #7c3aed);
}

.tenantLandingStaffIntent .tenantCustomerAction {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid var(--border);
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.08);
}

.tenantDirectoryEmpty {
  padding: 2rem 1rem;
  color: var(--muted);
  text-align: center;
}

.tenantDirectoryEmpty[hidden],
.tenantDirectoryGrid[hidden] {
  display: none;
}

.tenantLandingFooter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0 0;
  color: var(--muted);
  font-size: 10px;
}

.tenantLandingRegisterLink {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.tenantLandingRegisterLink:hover {
  color: #dbeafe;
  text-decoration: underline;
}

.tenantLandingFooter strong,
.borneovibesCredit {
  color: #93c5fd;
}

.borneovibesCredit {
  text-decoration: none;
  transition: color 0.15s ease;
}

.borneovibesCredit:hover {
  color: #dbeafe;
  text-decoration: underline;
}

.customerAppFooter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 30;
  min-height: 1.5rem;
  padding: 0.55rem 0.85rem 0.65rem;
  background: #030712;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.customerAppFooter .borneovibesCredit {
  display: block;
  width: 100%;
  text-align: center;
}

html[data-ios-browser="1"] .customerApp {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html[data-display="standalone"] .customerApp {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.customerSupportCluster {
  position: static;
  z-index: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  margin: 0.65rem 0 0;
  pointer-events: none;
}

.customerSupportCluster[hidden] {
  display: none !important;
}

.customerSupportChip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  flex: 1 1 calc(50% - 0.2rem);
  width: auto;
  min-width: 0;
  min-height: 40px;
  max-width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(253, 230, 138, 0.36);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fde68a;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.customerSupportChip:active {
  transform: scale(0.98);
}

.customerSupportChipRating {
  border-color: rgba(251, 191, 36, 0.34);
  color: #fef3c7;
}

.customerSupportChipGift {
  color: #fde68a;
}

.customerSupportChipIcon,
.customerSupportChip svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.customerSupportChip svg {
  fill: currentColor;
}

.customerSupportChipIcon {
  font-size: 12px;
  line-height: 1;
}

.customerSupportChip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.favoritesOfferOpen .customerSupportCluster,
body.developerGiftOpen .customerSupportCluster {
  visibility: hidden;
  pointer-events: none;
}

.customerSupportChip[hidden] {
  display: none !important;
}

@media (min-width: 720px) {
  .customerSupportCluster {
    max-width: 22rem;
  }

  .customerSupportChip {
    flex: 0 1 auto;
    min-width: 9.5rem;
  }
}

@media (max-width: 600px) {
  .tenantLandingShell {
    width: min(100% - 1.2rem, 1080px);
  }

  .tenantLandingHero {
    margin-top: 0.75rem;
  }

  .tenantLandingHero h1 {
    font-size: 32px;
  }

  .tenantQrNotice {
    align-items: flex-start;
  }

  .tenantFinderSearch > div {
    grid-template-columns: 1fr;
  }

  .tenantFinderSearch button {
    width: 100%;
  }

  .tenantLocationIconButton {
    width: 100%;
  }

  .tenantDirectoryHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .tenantSearch {
    width: 100%;
  }

  .tenantDirectoryGrid {
    grid-template-columns: 1fr;
  }

  .tenantDirectoryActions,
  .tenantLandingStaffIntent .tenantDirectoryActions {
    grid-template-columns: 1fr;
  }

  .tenantLandingStaffIntent .tenantStaffAction,
  .tenantLandingStaffIntent .tenantCustomerAction {
    grid-column: 1;
  }

  .tenantLandingStaffIntent .tenantStaffAction {
    grid-row: 1;
  }

  .tenantLandingStaffIntent .tenantCustomerAction {
    grid-row: 2;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #0f172a;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body > *:not(#qrPrintRoot) {
    display: none !important;
  }

  #qrPrintRoot {
    display: block !important;
    width: 210mm;
    margin: 0;
    padding: 0;
    background: #ffffff;
  }

  #qrPreviewGrid {
    display: block !important;
    width: 210mm;
    margin: 0;
    padding: 0;
    background: #ffffff;
  }

  .qrPreviewItem {
    display: block;
    width: 210mm;
    height: 297mm;
    max-height: 297mm;
    margin: 0;
    padding: 0;
    overflow: hidden;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .qrPreviewItem--wall {
    page-break-after: always;
    break-after: page;
  }

  .qrPreviewItem--wall:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .qrPrintSheet {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    position: relative !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    background: #ffffff !important;
  }

  .qrPrintSheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  .qrPrintSheet .qrPreviewItem {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 2.5mm !important;
    page-break-after: auto !important;
    break-after: auto !important;
    box-sizing: border-box !important;
  }

  .qrPrintCutGuide {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  .qrCutLine {
    position: absolute !important;
    pointer-events: none !important;
  }

  .qrCutLine--v {
    top: 5mm !important;
    bottom: 5mm !important;
    left: 50% !important;
    width: 0 !important;
    border-left: 0.6pt dashed #666666 !important;
    transform: translateX(-50%) !important;
  }

  .qrCutLine--h {
    left: 5mm !important;
    right: 5mm !important;
    top: 50% !important;
    height: 0 !important;
    border-top: 0.6pt dashed #666666 !important;
    transform: translateY(-50%) !important;
  }

  .qrCutTick {
    position: absolute !important;
    width: 5mm !important;
    height: 5mm !important;
    pointer-events: none !important;
  }

  .qrCutTick--pageTL {
    top: 2mm !important;
    left: 2mm !important;
    border-top: 0.8pt solid #111111 !important;
    border-left: 0.8pt solid #111111 !important;
  }

  .qrCutTick--pageTR {
    top: 2mm !important;
    right: 2mm !important;
    border-top: 0.8pt solid #111111 !important;
    border-right: 0.8pt solid #111111 !important;
  }

  .qrCutTick--pageBL {
    bottom: 2mm !important;
    left: 2mm !important;
    border-bottom: 0.8pt solid #111111 !important;
    border-left: 0.8pt solid #111111 !important;
  }

  .qrCutTick--pageBR {
    bottom: 2mm !important;
    right: 2mm !important;
    border-bottom: 0.8pt solid #111111 !important;
    border-right: 0.8pt solid #111111 !important;
  }

  .qrCutTick--crossTL {
    top: 50% !important;
    left: 50% !important;
    margin-top: -4mm !important;
    margin-left: -4mm !important;
    border-top: 0.8pt solid #111111 !important;
    border-left: 0.8pt solid #111111 !important;
  }

  .qrCutTick--crossTR {
    top: 50% !important;
    left: 50% !important;
    margin-top: -4mm !important;
    margin-left: 0 !important;
    border-top: 0.8pt solid #111111 !important;
    border-right: 0.8pt solid #111111 !important;
  }

  .qrCutTick--crossBL {
    top: 50% !important;
    left: 50% !important;
    margin-top: 0 !important;
    margin-left: -4mm !important;
    border-bottom: 0.8pt solid #111111 !important;
    border-left: 0.8pt solid #111111 !important;
  }

  .qrCutTick--crossBR {
    top: 50% !important;
    left: 50% !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    border-bottom: 0.8pt solid #111111 !important;
    border-right: 0.8pt solid #111111 !important;
  }

  .qrPrintCard--compact {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 3.5mm 3mm 2.5mm !important;
    border-width: 1.5px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .qrPrintCard--compact .qrPosterLogo {
    width: 11mm !important;
    height: 11mm !important;
  }

  .qrPrintCard--compact .qrPosterBrand strong {
    font-size: 9pt !important;
    letter-spacing: 0.04em !important;
  }

  .qrPrintCard--compact .qrPosterBrand span {
    font-size: 7pt !important;
  }

  .qrPrintCard--compact .qrPosterRule {
    margin: 2.5mm 0 3mm !important;
  }

  .qrPrintCard--compact .qrPosterScanLine {
    font-size: 8pt !important;
    letter-spacing: 0.1em !important;
  }

  .qrPrintCard--compact .qrPosterHeroTitle {
    font-size: 20pt !important;
    line-height: 0.95 !important;
  }

  .qrPrintCard--compact .qrPosterSubtitle {
    font-size: 7.5pt !important;
  }

  .qrPrintCard--compact .qrPosterQrFrame {
    width: 48mm !important;
    height: 48mm !important;
    margin: 0 auto 2mm !important;
    padding: 2.5mm !important;
    border-width: 2px !important;
  }

  .qrPosterDevCredit {
    display: block !important;
    margin-top: auto !important;
    padding-top: 1.5mm !important;
    color: #111111 !important;
    font-size: 7.5pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .qrPosterDevCredit strong {
    font-weight: 900 !important;
  }

  .qrPrintCard .qrPosterDevCredit {
    font-size: 9pt !important;
  }

  .qrPrintCard--compact .qrPosterDevCredit {
    font-size: 7pt !important;
  }

  .qrPreviewItem:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  .qrCardToolbar {
    display: none !important;
  }

  .qrPrintCard {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 210mm !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 297mm !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 9mm 8mm 7mm !important;
    border: 2.5px solid #111111 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #111111 !important;
    text-align: center !important;
  }

  .qrPosterHeader {
    display: flex !important;
    align-items: center !important;
    gap: 5mm !important;
    width: 100% !important;
    text-align: left !important;
  }

  .qrPosterLogo {
    width: 20mm !important;
    height: 20mm !important;
    border-radius: 4mm !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  .qrPosterBrand {
    display: grid !important;
    gap: 1.2mm !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .qrPosterBrand strong {
    font-size: 18pt !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.08 !important;
  }

  .qrPosterBrand span {
    color: #444444 !important;
    font-size: 10pt !important;
    font-weight: 600 !important;
  }

  .qrPosterRule {
    width: 100% !important;
    height: 1px !important;
    margin: 5mm 0 6mm !important;
    background: #d1d5db !important;
  }

  .qrPosterHero {
    display: grid !important;
    gap: 2.5mm !important;
    margin-bottom: 5mm !important;
  }

  .qrPosterScanLine {
    margin: 0 !important;
    font-size: 15pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
  }

  .qrPosterHeroTitle {
    margin: 0 !important;
    font-size: 42pt !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
  }

  .qrPosterSubtitle {
    margin: 0 !important;
    color: #555555 !important;
    font-size: 12pt !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  .qrPosterQrFrame {
    display: grid !important;
    place-items: center !important;
    width: 118mm !important;
    height: 118mm !important;
    margin: 0 auto 6mm !important;
    padding: 5mm !important;
    border: 3px solid #111111 !important;
    border-radius: 5mm !important;
  }

  .qrCodeImage {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .qrPosterSteps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 0 0 6mm !important;
  }

  .qrPosterStep {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    gap: 2mm !important;
    padding: 0 3mm !important;
  }

  .qrPosterStep:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 2mm !important;
    right: 0 !important;
    width: 1px !important;
    height: calc(100% - 4mm) !important;
    background: #e5e7eb !important;
  }

  .qrPosterStepIcon {
    display: grid !important;
    width: 11mm !important;
    height: 11mm !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: #111111 !important;
  }

  .qrPosterStepIcon svg {
    width: 6mm !important;
    height: 6mm !important;
  }

  .qrPosterStep strong {
    font-size: 9.5pt !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
  }

  .qrPosterStep p {
    margin: 0 !important;
    color: #555555 !important;
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
  }

  .qrPosterFooter {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4mm !important;
    margin-top: auto !important;
    padding: 4mm 6mm !important;
    border-radius: 4mm !important;
    color: #ffffff !important;
    background: #111111 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qrPosterFooterTag {
    font-size: 10pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .qrPosterFooterThanks {
    font-size: 15pt !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-family: Georgia, "Times New Roman", serif !important;
  }

  .qrPrintSheet .qrPrintCard--compact {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 3.5mm 3mm 2.5mm !important;
    border-width: 1.5px !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterLogo {
    width: 11mm !important;
    height: 11mm !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterBrand strong {
    font-size: 9pt !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterBrand span {
    font-size: 7pt !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterRule {
    margin: 2.5mm 0 3mm !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterScanLine {
    font-size: 8pt !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterHeroTitle {
    font-size: 20pt !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterSubtitle {
    font-size: 7.5pt !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterQrFrame {
    width: 48mm !important;
    height: 48mm !important;
    margin: 0 auto 2mm !important;
    padding: 2.5mm !important;
  }

  .qrPrintSheet .qrPrintCard--compact .qrPosterDevCredit {
    font-size: 7pt !important;
  }
}

/* ===== Customer one-tap experience ===== */
.customerApp {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.16), transparent 380px),
    #070b14;
  overscroll-behavior: none;
  font-size: var(--font-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.customerApp input,
.customerApp select,
.customerApp textarea {
  font-size: var(--font-lg);
}

.customerPullRefresh {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.94);
  color: #bfdbfe;
  font-size: 12px;
  pointer-events: none;
  transform: translate(-50%, -120%);
  transition: transform 0.18s ease;
}

.customerPullRefresh.ready {
  border-color: rgba(52, 211, 153, 0.45);
  color: #bbf7d0;
}

.customerPullRefreshIcon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.18s ease;
}

.customerPullRefresh.ready .customerPullRefreshIcon {
  transform: rotate(180deg);
}

.customerPullRefresh.refreshing .customerPullRefreshIcon {
  animation: customerPullSpin 0.8s linear infinite;
}

@keyframes customerPullSpin {
  to {
    transform: rotate(360deg);
  }
}

.customerShell {
  flex: 1 1 auto;
  min-height: 0;
  width: min(100%, 620px);
  height: auto;
  margin: 0 auto;
  padding: max(0.5rem, env(safe-area-inset-top, 0px))
    max(0.85rem, env(safe-area-inset-left, 12px))
    1.1rem
    max(0.85rem, env(safe-area-inset-right, 12px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.customerShell::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.customerStickyHead {
  position: sticky;
  top: 0;
  z-index: 40;
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  background: #070b14;
  box-shadow: 0 -60vh 0 60vh #070b14;
}

.customerStickyHead::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 60vh;
  background: #070b14;
  pointer-events: none;
}

.customerStickyHead .contextBackBar {
  margin-bottom: 0.55rem;
}

.customerStickyHead .customerTopbar {
  margin-bottom: 0;
}

.customerTopbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  min-height: 54px;
  margin-bottom: 0.7rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
}

.customerTopbar > strong {
  font-size: 20px;
}

.businessSessionNotice {
  display: grid;
  gap: 0.18rem;
  margin-bottom: 0.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(251, 191, 36, 0.42);
  border-radius: 15px;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.2);
}

.businessSessionNotice[hidden] {
  display: none;
}

.businessSessionNotice span {
  color: rgba(254, 243, 199, 0.72);
  font-size: 12px;
}

.qrLegacyNotice {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.28);
}

.qrLegacyNotice span {
  color: rgba(254, 202, 202, 0.82);
}

.qrRequiredNotice {
  width: 100%;
  border-color: rgba(96, 165, 250, 0.42);
  color: #bfdbfe;
  background: rgba(30, 58, 138, 0.22);
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.qrRequiredNotice:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.qrRequiredNotice span {
  color: rgba(191, 219, 254, 0.82);
}

.qrScanOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
  justify-items: stretch;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.78);
}

.qrScanSheet {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  background: #0f172a;
}

.qrScanVideoWrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #020617;
  min-height: 220px;
}

.qrScanVideoWrap video {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.qrScanHint {
  margin: 0;
  color: #cbd5e1;
  font-size: 0.92rem;
}

.qrScanActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qrScanActions > button {
  flex: 1 1 8rem;
  min-height: 2.75rem;
}

/* Smartphone / PWA: large camera viewport for easier QR aiming */
@media (max-width: 720px) {
  body.qrScanOpen {
    overflow: hidden;
  }

  .qrScanOverlay {
    align-items: stretch;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #020617;
  }

  .qrScanSheet {
    height: 100%;
    max-height: 100dvh;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    padding: 0.55rem 0.55rem max(0.75rem, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: #020617;
  }

  .qrScanVideoWrap {
    min-height: 0;
    height: 100%;
    border-radius: 14px;
  }

  .qrScanVideoWrap video {
    width: 100%;
    height: 100%;
    min-height: min(68dvh, calc(100dvh - 9.5rem));
    max-height: none;
    object-fit: cover;
  }

  .qrScanHint {
    padding: 0 0.15rem;
    font-size: 0.88rem;
    line-height: 1.35;
    text-align: center;
  }

  .qrScanActions {
    flex-wrap: nowrap;
    gap: 0.45rem;
  }
}

.customerPromoAds {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.15rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.customerPromoAds[hidden] {
  display: none;
}

.customerPromoAdsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  color: #f8fafc;
}

.customerPromoAdsHeader > div {
  display: grid;
  gap: 0.15rem;
}

.customerPromoAdsHeader strong {
  font-size: 15px;
}

.customerPromoAdsHeader span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.customerAdSwipeHint {
  color: #94a3b8;
  font-size: 11px;
}

.customerPromoEmpty {
  margin: 0;
  padding: 1rem 0.35rem;
  color: #94a3b8;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.customerAdViewport {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  height: auto;
  max-height: none;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.customerAdViewport[hidden] {
  display: none;
}

.customerAdViewport::-webkit-scrollbar {
  display: none;
}

.customerAdSlide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  height: auto;
  max-height: none;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.customerPromoCard {
  display: grid;
  gap: 0.55rem;
}

.customerPromoCardMedia {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: #020617;
}

.customerPromoCardMedia img,
.customerAdSlide img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

.customerPromoCardBody {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0 0.1rem;
}

.customerPromoCardTitle {
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.customerPromoOrderBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: linear-gradient(120deg, rgba(22, 163, 74, 0.92), rgba(16, 185, 129, 0.88));
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.18);
}

.customerPromoOrderBtn:hover,
.customerPromoOrderBtn:focus-visible {
  filter: brightness(1.05);
  outline: none;
}

.customerPromoOrderWrap {
  display: grid;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.customerPromoOrderHint {
  margin: 0;
  padding: 0 0.15rem;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.customerAdDots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}

.customerAdDots[hidden] {
  display: none;
}

.customerAdDots button {
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
}

.customerAdDots button.active {
  width: 22px;
  background: #fbbf24;
}

.quickSearch.sessionClosed {
  opacity: 0.58;
}

.identitySummary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  max-width: min(100%, 22rem);
  min-width: 0;
  min-height: 36px;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.13);
  text-align: left;
  overflow: hidden;
}

.identitySummary[hidden] {
  display: none;
}

.identitySummaryCopy {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.identitySummaryCopy strong {
  flex: 0 1 auto;
  max-width: 58%;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identitySummarySep {
  flex: 0 0 auto;
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.identitySummaryCopy .identityNameLine {
  flex: 1 1 0;
  min-width: 0;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identityTextFallback {
  display: none;
}

.identitySummary span.identityTextFallback {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.identitySummary small {
  flex: 0 0 auto;
  margin-left: 0.15rem;
  color: var(--primary2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.identityPanel {
  display: grid;
  grid-template-columns: minmax(88px, 0.42fr) minmax(0, 1fr);
  grid-template-areas:
    "table name"
    "save save";
  gap: 0.65rem 0.55rem;
  align-items: end;
  margin-bottom: 0.7rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.identityField:first-of-type {
  grid-area: table;
}

.identityName {
  grid-area: name;
}

.identitySaveBtn {
  grid-area: save;
  width: 100%;
  min-height: 48px;
  margin-top: 0.05rem;
  font-size: 15px;
  font-weight: 700;
}

.identityField label {
  display: block;
  margin: 0 0 0.35rem;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.identityField input {
  height: 48px;
  margin: 0;
  padding: 0 0.75rem;
  border-color: rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.2;
}

.identityPanel > button {
  height: auto;
  padding: 0.65rem 0.85rem;
}

.identityPanel[hidden] {
  display: none;
}

.manualSingerHelper {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
}

.manualSingerHelper[hidden],
.myQueueSection[hidden] {
  display: none;
}

.manualSingerHelper strong,
.manualSingerHelper small {
  display: block;
}

.manualSingerHelper small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 11px;
}

.manualSingerChoices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

button.manualSingerChoice {
  min-height: 36px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.13);
  color: #bfdbfe;
  font-size: 12px;
}

button.manualSingerChoice.newPerson {
  border-color: rgba(167, 139, 250, 0.4);
  color: #ddd6fe;
}

.quickSearch {
  padding: 0.85rem 0.85rem 0.9rem;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.9);
}

.quickSearchHeading {
  margin-bottom: 0.7rem;
}

.quickSearchHeading h1 {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.quickSearchHeading p {
  margin: 0.35rem 0 0;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.4;
}

.quickSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.quickSearchRow input {
  height: 52px;
  margin: 0;
  padding: 0 0.9rem;
  border-color: rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  font-size: 17px;
}

.quickSearchRow button {
  min-width: 76px;
  height: 52px;
  padding: 0 1rem;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
}

.searchStatus {
  min-height: 18px;
  margin: 0.5rem 0 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.35;
}

#searchResultsSection {
  scroll-margin-top: 0.5rem;
}

.customerApp .youtubeResults {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0.8rem 0 0;
}

.turnComposer {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(20, 83, 45, 0.3), rgba(15, 23, 42, 0.92));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}

.turnComposerHeader,
.turnComposerActions,
.composerSong {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.turnComposerHeader {
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.turnComposerHeader > div {
  display: grid;
  gap: 0.15rem;
}

.turnComposerHeader small {
  color: var(--muted);
  font-size: 11px;
}

.turnSongCount {
  flex: 0 0 auto;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.22);
  font-size: 12px;
  font-weight: 900;
}

.composerSongs {
  display: grid;
  gap: 0.45rem;
}

.composerSong {
  min-width: 0;
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.45);
}

.composerSong strong {
  flex: 0 0 auto;
  color: #86efac;
  font-size: 11px;
}

.composerSong span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composerRemove {
  width: auto;
  padding: 0.35rem 0.55rem;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.2);
  font-size: 11px;
}

.turnComposerActions {
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.customerMainTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.customerMainTabs[hidden] {
  display: none !important;
}

.customerMainTab {
  min-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 650;
}

.customerMainTab.is-active {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.18);
  color: #fff;
}

.customerFavoritesBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  margin-left: 0.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.customerFavoritesSection {
  margin-bottom: 0.85rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
}

.customerFavoritesHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.customerFavoritesHeaderActions {
  display: grid;
  justify-items: end;
  gap: 0.35rem;
}

.customerFavoritesProtect {
  white-space: nowrap;
  font-size: 12px;
  padding: 0.35rem 0.65rem;
}

.customerFavoritesHeader h2 {
  margin: 0;
  font-size: 18px;
}

.customerFavoritesHeader p {
  margin: 0.25rem 0 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.customerFavoritesList {
  display: grid;
  gap: 0.55rem;
}

.customerFavoriteRestore {
  display: grid;
  gap: 0.45rem;
}

.customerFavoriteRestore p {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.customerFavoriteRestoreChoice {
  display: grid;
  gap: 0.2rem;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
}

.customerFavoriteRestoreChoice strong {
  font-size: 14px;
}

.customerFavoriteRestoreChoice span {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

.customerFavoriteCard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.55);
}

.customerFavoriteThumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.customerFavoriteMeta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem 0.75rem 0;
}

.customerFavoriteMeta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.customerFavoriteMeta span {
  color: #94a3b8;
  font-size: 12px;
}

.customerFavoriteActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem 0.75rem;
}

.customerFavoriteActions button {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  font-size: 12px;
  white-space: nowrap;
}

.customerFavoriteRemove {
  opacity: 0.85;
}

.favoriteHeartBtn {
  flex: 0 0 auto;
  width: 42px;
  min-height: 42px;
  margin-left: 0.35rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.25);
  color: #fecaca;
  font-size: 18px;
  line-height: 1;
}

.favoriteHeartBtn.is-saved {
  border-color: rgba(248, 113, 113, 0.8);
  background: rgba(220, 38, 38, 0.35);
  color: #fff;
}

.youtubeResult {
  display: flex;
  align-items: center;
}

.favoritesOfferOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem
    max(0.75rem, env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.78);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.developerGiftOverlay {
  display: block !important;
  place-items: unset !important;
  align-items: unset !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  touch-action: pan-y;
}

.developerGiftFrame {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem
    max(1rem, env(safe-area-inset-bottom));
}

.developerGiftOverlay .favoritesOfferCard {
  width: min(100%, 420px);
  margin: 0;
  flex: 0 0 auto;
}

.developerGiftHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -0.15rem -0.15rem 0.45rem;
  padding: 0.15rem 0.15rem 0.45rem;
  background: #0f172a;
}

.developerGiftHead h2 {
  margin: 0;
  flex: 1;
}

.developerGiftLead {
  margin: 0 0 0.55rem;
  color: #e2e8f0;
}

.developerGiftDismiss {
  flex: 0 0 auto;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.28);
  color: #ef4444;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.developerGiftOverlay .developerGiftActions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -0.15rem -0.15rem;
  padding: 0.55rem 0.15rem 0.15rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0), #0f172a 28%);
}

.favoritesOfferCard {
  width: min(100%, 420px);
  max-height: min(92dvh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: #0f172a;
  box-shadow: 0 18px 48px rgba(2, 6, 23, 0.42);
}

.favoritesOfferCard h2 {
  margin: 0 0 0.45rem;
  font-size: 20px;
}

.favoritesOfferCard p {
  margin: 0 0 0.85rem;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}

.favoritesOfferCard label {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 650;
}

.favoritesOfferCard input[type="text"] {
  height: 46px;
  padding: 0 0.75rem;
  border-radius: 12px;
}

.favoritesOfferCheck {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.favoritesOfferCheck input {
  width: auto;
  height: auto;
}

.favoritesOfferActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.manualPendingLeaveOverlay .favoritesOfferActions {
  grid-template-columns: 1fr;
}

.manualPendingLeaveOverlay .manualPendingSend {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}

.manualPendingLeaveOverlay .manualPendingDiscard {
  background: rgba(51, 65, 85, 0.9);
}

.manualPendingLeaveOverlay .manualPendingLater {
  background: rgba(30, 41, 59, 0.95);
}

.manualPendingLeaveSongs {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.45;
  max-height: 7.5rem;
  overflow: auto;
}

.manualPendingLeaveSongs li {
  margin: 0.15rem 0;
}

body.favoritesOfferOpen {
  overflow: hidden;
}

.appFeedbackQuestion {
  margin: 0 0 0.55rem !important;
  color: #f8fafc !important;
  font-size: 16px !important;
  font-weight: 750;
}

.appFeedbackStars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}

.appFeedbackStar {
  height: 52px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  color: #64748b;
  font-size: 26px;
  line-height: 1;
}

.appFeedbackStar.is-on {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.14);
}

.appFeedbackComment {
  display: none;
}

.appFeedbackComment.is-open {
  display: grid;
  gap: 0.55rem;
}

.appFeedbackCommentLabel {
  display: grid;
  gap: 0.4rem;
}

.appFeedbackCommentLabelText {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.appFeedbackCommentLabel.is-prompt .appFeedbackCommentLabelText {
  color: #f8fafc;
}

.appFeedbackCommentInput {
  width: 100%;
}

.appFeedbackTopicHint {
  margin: 0 0 0.45rem !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500;
}

.appFeedbackTopics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}

.appFeedbackTopic {
  height: 36px;
  padding: 0 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 650;
}

.appFeedbackTopic.is-on {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(14, 165, 233, 0.16);
  color: #e0f2fe;
}

.appFeedbackSuggestLink[hidden] {
  display: none !important;
}

.appFeedbackOverlay button[hidden] {
  display: none !important;
}

.appFeedbackOverlay .favoritesOfferActions:has(.appFeedbackSend[hidden]) {
  grid-template-columns: 1fr;
}

.appFeedbackThanksGift {
  margin: 0 0 0.85rem;
}

.appFeedbackThanksGift button {
  width: 100%;
  height: 42px;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 650;
}

.developerGiftGrid {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}

.developerGiftOverlay .favoritesOfferActions,
.developerGiftActions {
  grid-template-columns: 1fr;
}

.developerGiftActions .secondary {
  width: 100%;
  min-height: 44px;
}

.developerGiftBonanza {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.75rem;
  border: 1px dashed rgba(253, 230, 138, 0.4);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
}

.developerGiftBonanzaPay {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.developerGiftBonanzaPay > span {
  color: #fde68a;
  font-size: 16px;
  font-weight: 800;
}

.developerGiftBonanzaPay input {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
  appearance: textfield;
}

.developerGiftBonanzaPay input::-webkit-outer-spin-button,
.developerGiftBonanzaPay input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.developerGiftBonanzaSend {
  min-height: 46px;
  padding: 0 0.9rem;
  border-radius: 12px;
  background: #f59e0b;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
}

.developerGiftItem {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
  text-align: left;
}

.developerGiftItem:disabled {
  opacity: 0.6;
}

.developerGiftEmoji {
  font-size: 26px;
  line-height: 1;
}

.developerGiftCopy {
  display: grid;
  gap: 0.12rem;
}

.developerGiftCopy strong {
  font-size: 14px;
}

.developerGiftCopy span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.developerGiftAmount {
  color: #fde68a;
  font-size: 13px;
  font-weight: 800;
}

.developerGiftPayer {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}

.developerGiftPayer label {
  margin-bottom: 0;
}

.developerGiftPayer input {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
}

.developerGiftWaitList {
  margin: 0 0 0.85rem;
  padding-left: 1.25rem;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.developerGiftWaitList li + li {
  margin-top: 0.45rem;
}

.developerGiftWaitStatus {
  margin: 0 0 0.75rem !important;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.16);
  color: #e0f2fe !important;
  font-size: 14px !important;
  font-weight: 750;
  text-align: center;
}

.developerGiftReopen {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  margin-bottom: 0.55rem;
  border-radius: 12px;
  background: #f59e0b;
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.developerGiftOpenDuitnow {
  background: #38bdf8;
  color: #0f172a;
}

.developerGiftWaiting .secondary {
  width: 100%;
  min-height: 44px;
}

.developerGiftThanksCard h2 {
  color: #fde68a;
  font-size: 28px;
}

.developerGiftThanksCard p {
  color: #f8fafc;
  font-size: 18px;
  font-weight: 650;
}

.developerGiftThanksOverlay .favoritesOfferActions {
  grid-template-columns: 1fr;
}

.developerGiftThanksOverlay button {
  min-height: 48px;
  font-size: 18px;
  font-weight: 800;
}

.superAdminGiftStats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.superAdminFeedbackStats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.superAdminFunnel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 0.15rem;
}

.superAdminFunnel span {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.85rem;
}

.superAdminFeedbackStars {
  display: grid;
  gap: 0.4rem;
  margin: 0.85rem 0 1rem;
}

.superAdminFeedbackStarRow {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(92px, auto);
  gap: 0.55rem;
  align-items: center;
  font-size: 12px;
  color: #cbd5e1;
}

.superAdminFeedbackStarBar {
  height: 10px;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.7);
  overflow: hidden;
}

.superAdminFeedbackStarBar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.superAdminFeedbackHint {
  margin: 0 0 0.75rem;
  color: #94a3b8;
  font-size: 12px;
}

.superAdminFeedbackTopics {
  margin: 0 0 1rem;
}

.songPreviewFavorite {
  min-width: 42px;
}

.turnComposerActions button {
  width: auto;
}

.singerConfirmOpen,
.songPreviewOpen {
  overflow: hidden;
}

.songPreviewOverlay {
  position: fixed;
  z-index: 1280;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px);
}

.songPreviewSheet {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  max-height: min(92vh, 760px);
  overflow-y: auto;
  padding: 0.85rem 0.85rem max(1rem, calc(0.75rem + env(safe-area-inset-bottom, 12px)));
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(96, 165, 250, 0.35);
  background: linear-gradient(180deg, #14213d 0%, #080d18 100%);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45);
}

.songPreviewPlayer {
  aspect-ratio: 16 / 9;
  max-height: min(42vh, 320px);
  overflow: hidden;
  border-radius: 14px;
  background: #000;
}

.songPreviewPlayer iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.songPreviewMeta {
  display: grid;
  gap: 0.25rem;
}

.songPreviewTitle {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.songPreviewChannel {
  color: #94a3b8;
  font-size: 13px;
}

.songPreviewHint {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.4;
}

.songPreviewActions {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.songPreviewFavorite {
  flex: 0 0 48px;
}

.songPreviewBack {
  flex: 1 1 0;
  min-height: 50px;
  font-size: 15px;
  font-weight: 700;
}

.songPreviewConfirm {
  flex: 1.25 1 0;
  min-height: 50px;
  font-size: 15px;
  font-weight: 800;
}

.youtubeResultThumb {
  position: relative;
  display: block;
}

.youtubeResultPlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  color: #f8fafc;
  background: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.88));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  .songPreviewActions {
    flex-wrap: wrap;
  }

  .songPreviewFavorite {
    flex: 0 0 100%;
  }

  .songPreviewBack,
  .songPreviewConfirm {
    flex: 1 1 calc(50% - 0.3rem);
  }
}

@media (min-width: 720px) {
  .songPreviewOverlay {
    align-items: center;
    padding: 1.5rem;
  }

  .songPreviewSheet {
    width: min(100%, 520px);
    max-height: min(88vh, 680px);
    border-radius: 20px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  }

  .songPreviewPlayer {
    max-height: min(36vh, 280px);
  }
}

.locationDoubtOpen {
  overflow: hidden;
}

.locationDoubtOverlay {
  position: fixed;
  z-index: 1250;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(11px);
}

.locationDoubtCard {
  display: grid;
  width: min(100%, 470px);
  gap: 0.65rem;
  padding: clamp(1.2rem, 5vw, 1.65rem);
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 22px;
  background: linear-gradient(150deg, #172033, #080d18 75%);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.62);
}

.locationDoubtIcon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: #fde68a;
  background: rgba(202, 138, 4, 0.16);
  font-size: 28px;
}

.locationDoubtCard h2 {
  margin: 0.25rem 0 0;
  font-size: clamp(24px, 7vw, 32px);
}

.locationDoubtCard p,
.locationDoubtCard small {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.5;
}

.locationDoubtTenant {
  padding: 0.65rem 0.75rem;
  border-radius: 11px;
  color: #f8fafc;
  background: rgba(30, 41, 59, 0.72);
}

.locationDoubtPrimary {
  min-height: 54px;
  margin-top: 0.35rem;
}

.locationDoubtSecondary {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.17);
}

.locationDoubtTrust {
  color: #fde68a;
  background: rgba(202, 138, 4, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.24);
}

.customerTurnstilePanel {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 1100;
  width: min(92vw, 360px);
  padding: 0.85rem 1rem 1rem;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.customerTurnstilePanel p {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  color: #e5e7eb;
}

.singerConfirmOverlay {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(10px);
}

.singerConfirmCard {
  width: min(100%, 470px);
  max-height: min(720px, calc(100vh - 2rem));
  overflow-y: auto;
  padding: clamp(1.1rem, 4vw, 1.5rem);
  border: 1px solid rgba(96, 165, 250, 0.42);
  border-radius: 22px;
  background: linear-gradient(150deg, #14213d, #081121 70%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.singerConfirmCard h2 {
  margin: 0;
  font-size: clamp(24px, 7vw, 34px);
}

.singerConfirmCard > p {
  margin: 0.55rem 0 1rem;
  color: #cbd5e1;
}

.singerConfirmEyebrow {
  display: block;
  margin-bottom: 0.4rem;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.singerConfirmPrimary,
.singerConfirmSecondary,
.singerConfirmCancel {
  margin-top: 0.55rem;
}

.singerConfirmPrimary {
  min-height: 56px;
  font-size: 17px;
}

.singerConfirmSecondary {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.35);
}

.singerConfirmCancel {
  color: var(--muted);
  background: transparent;
}

.singerChoiceList {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.singerChoiceRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.singerChoiceName {
  min-width: 0;
  padding: 0.72rem 0.8rem;
  overflow: hidden;
  color: #f8fafc;
  background: rgba(37, 99, 235, 0.24);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.singerChoiceHide {
  width: auto;
  padding: 0.55rem 0.65rem;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.15);
  font-size: 10px;
}

.singerChoiceEmpty {
  padding: 0.85rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.newSingerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.newSingerRow input {
  min-width: 0;
  margin: 0;
}

.newSingerRow button {
  width: auto;
}

.singerChoiceFooter {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.singerChoiceFooter button {
  width: auto;
}

.adminLocationGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 0.7rem;
}

.adminLocationGrid label {
  min-width: 0;
}

.adminLocationGrid input {
  margin-bottom: 0;
}

.adminLocationGrid button {
  width: auto;
  min-height: 46px;
  white-space: nowrap;
}

.tenantMapSearch {
  display: grid;
  gap: 0.45rem;
}

.tenantMapSearch > label {
  margin: 0;
}

.tenantMapSearch > div:first-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.tenantMapSearch input,
.tenantMapSearch button {
  min-height: 46px;
  margin: 0;
}

.tenantMapSearch button {
  white-space: nowrap;
}

.tenantCoordPaste {
  display: grid;
  gap: 0.45rem;
}

.tenantCoordPaste > label {
  margin: 0;
}

.tenantCoordPaste > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.tenantCoordPaste input,
.tenantCoordPaste button {
  min-height: 46px;
  margin: 0;
}

.tenantCoordPaste button {
  white-space: nowrap;
}

.tenantCoordPasteHint {
  margin: 0;
  line-height: 1.45;
}

.tenantMapSearchResults {
  display: grid;
  max-height: 250px;
  gap: 0.4rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 13px;
  background: rgba(4, 10, 23, 0.82);
}

.tenantMapSearchResults[hidden] {
  display: none;
}

.tenantMapSearchResult {
  display: grid;
  min-height: auto;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.66);
  text-align: left;
}

.tenantMapSearchResult:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 64, 175, 0.2);
}

.tenantMapSearchResult.approximate {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(120, 53, 15, 0.16);
}

.tenantMapSearchResult.approximate:hover {
  border-color: rgba(251, 191, 36, 0.62);
  background: rgba(146, 64, 14, 0.24);
}

.tenantMapSearchResult.approximate strong {
  color: #fde68a;
}

.tenantMapSearchResult strong {
  color: #eff6ff;
  font-size: 13px;
}

.tenantMapSearchResult span {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.45;
}

.tenantLocationMap {
  z-index: 1;
  width: 100%;
  height: clamp(280px, 36vw, 390px);
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 16px;
  background: #0b1220;
  overscroll-behavior: contain;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.tenantLocationMap.mapScrollZoomActive {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.28);
  cursor: crosshair;
}

.tenantMapHint {
  margin: -0.15rem 0 0.35rem;
  color: #94a3b8;
  font-size: 0.78rem;
  line-height: 1.45;
}

.tenantLocationMap.mapUnavailable {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}

.tenantLocationMap .leaflet-control-attribution {
  color: #475569;
  font-size: 9px;
}

@media (max-width: 900px) {
  .adminLocationGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .adminLocationGrid {
    grid-template-columns: 1fr;
  }

  .tenantMapSearch > div:first-of-type {
    grid-template-columns: 1fr;
  }

  .tenantCoordPaste > div {
    grid-template-columns: 1fr;
  }

  .adminLocationGrid button {
    width: 100%;
  }

  .tenantMapSearch button {
    width: 100%;
  }

  .tenantCoordPaste button {
    width: 100%;
  }
}

.myQueueCard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.9);
}

.myQueueCard.hold {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(69, 26, 3, 0.28);
}

.myQueueCard.playing {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(20, 83, 45, 0.22);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.myQueueHoldHint {
  margin: 0;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.4;
}

.myQueueCard > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  object-fit: cover;
}

.myQueueContent {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.75rem 0.85rem 0.85rem;
}

.myQueueCard:has(.myQueueActions) .myQueueContent {
  padding-bottom: 0;
}

.myQueueState {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.myQueueCard.playing .myQueueState {
  color: #86efac;
}

.myQueueSongs {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.myQueueSong {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.5rem;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.35);
}

.myQueueSong strong {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.myQueueSong span {
  overflow: hidden;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.myQueueSong.current {
  background: rgba(34, 197, 94, 0.14);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}

.myQueueSong .queueEdit,
.myQueueSong .queueCancel {
  min-height: 32px;
  width: auto;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.myQueueActions {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.7rem 0.85rem 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.myQueueActionsRow {
  display: grid;
  gap: 0.5rem;
}

.myQueueActionsRow--primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.myQueueActionsRow--primary:has(> :only-child) {
  grid-template-columns: 1fr;
}

.myQueueActionsRow--secondary {
  grid-template-columns: 1fr;
}

.myQueueActions button {
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.myQueueActions .queueEdit {
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(37, 99, 235, 0.18);
  color: #dbeafe;
}

.queueCancel {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}

.myQueueActions .queueStop {
  min-height: 52px;
  border: 0;
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.myQueueActions .queuePriority {
  min-height: 46px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.45), rgba(120, 53, 15, 0.55));
  color: #fef3c7;
  font-size: 13px;
  font-weight: 800;
}

.priorityClosedNote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.55);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.priorityPaidBadge {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(250, 204, 21, 0.38);
  border-radius: 12px;
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.myQueue {
  display: grid;
  gap: 0.65rem;
}

.djTurnSongs {
  display: grid;
  gap: 0.3rem;
  margin: 0.45rem 0;
}

.djTurnSong {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.42rem 0.55rem;
  border-radius: 9px;
  background: rgba(15, 23, 42, 0.5);
}

.djTurnSong strong {
  color: #93c5fd;
  font-size: 10px;
  text-transform: uppercase;
  padding-top: 0.12rem;
}

.djTurnSong span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.28;
  max-height: 2.56em;
  text-overflow: ellipsis;
  white-space: normal;
  text-transform: uppercase;
  word-break: break-word;
}

.djTurnSong em {
  display: none;
}

.djTurnSong.current {
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: rgba(22, 163, 74, 0.16);
}

.djTurnSong.upcoming {
  border: 1px dashed rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.12);
}

.djTurnSong.upcoming strong {
  color: #fbbf24;
}

.queue-item--sameTurn {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(245, 158, 11, 0.08);
}

.djSongCountdownWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  text-align: center;
}

.djSongCountdownWrap[hidden] {
  display: none !important;
}

.djSongCountdown {
  display: block;
  width: 100%;
  color: #facc15;
  font-size: clamp(2.1rem, 8vw, 2.85rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 18px rgba(250, 204, 21, 0.35);
}

.djSongCountdownWrap.ending .djSongCountdown {
  color: #ef4444;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.45);
}

.djSongCountdownLabel {
  color: var(--muted);
  font-size: 11px;
}

.djSessionStatsPanel {
  display: none;
  flex-direction: column;
  min-height: min(42vh, 360px);
  margin-bottom: 0.85rem;
}

.djContainer.is-stats-mode .djSessionStatsPanel:not([hidden]) {
  display: flex !important;
}

.djContainer.is-stats-mode .djBoardGrid {
  display: none !important;
}

.djSessionStatsGrid {
  display: grid;
  flex: 1;
  /* Mobile-first: stack. Desktop cols-* only apply from 901px up. */
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: stretch;
  min-height: 220px;
  padding: 0.5rem 0 1rem;
}

.djSessionStatsGrid.djSessionStatsGrid--cols-1 {
  grid-template-columns: 1fr;
}

@media (min-width: 901px) {
  .djSessionStatsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .djSessionStatsGrid.djSessionStatsGrid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .djSessionStatsGrid.djSessionStatsGrid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.djSessionStatsCard {
  display: grid;
  gap: 0.35rem;
  padding: 1.6rem 1.2rem;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.62);
  text-align: center;
  min-width: 0;
}

.djSessionStatsCard span {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.djSessionStatsCard strong {
  color: #f8fafc;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.djSessionStatsCard small {
  color: var(--muted);
  font-size: 11px;
}

.djSessionStatsEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  padding: 1rem 0.5rem;
}

.djStatsRankColumn--empty .djSessionStatsEmpty {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0 0.15rem;
  text-align: left;
}

.djStatsRankColumn {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  padding: 0.85rem 0.75rem 0.65rem;
}

.djStatsSummaryCard {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.55);
  padding: 1rem 1.1rem;
}

.djStatsSummaryCard h3 {
  margin: 0 0 0.5rem;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.djStatsSummaryCard p {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.djStatsSummaryCard small {
  color: var(--muted);
  font-size: 12px;
}

.djStatsRankColumn h3 {
  margin: 0 0 0.65rem;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.djStatsRankList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  max-height: min(42vh, 360px);
  overflow-y: auto;
}

.djStatsRankList li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.55rem 0.45rem;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.35);
}

.djStatsRankNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 800;
}

.djStatsRankBody {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.djStatsRankBody strong {
  color: #f8fafc;
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.djStatsRankBody small {
  color: var(--muted);
  font-size: 11px;
}

.djContainer.is-stats-mode .djSessionStatsPanel {
  min-height: min(48vh, 420px);
}

.customerApp .youtubeResult {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.adminContainer > #desktopClientPanel {
  display: none !important;
}

.customerApp .youtubeResultThumb {
  width: 100%;
}

.customerApp .youtubeResultThumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.customerApp .youtubeResultBody {
  min-height: 0;
  padding: 0.75rem 0.85rem 0.85rem;
}

.customerApp .youtubeResultTitle {
  font-size: 15px;
  line-height: 1.4;
}

.customerApp .youtubeResultChannel {
  font-size: 12px;
}

.customerApp .youtubeResult .favoriteHeartBtn {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  margin: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.myQueueSection {
  margin-top: 0.95rem;
  padding-top: 0.15rem;
}

.myQueueSection.is-empty {
  margin-top: 0.35rem;
}

.myQueueHeader[hidden],
.myQueue[hidden] {
  display: none !important;
}

.myQueueHeader {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.myQueueHeader h2 {
  margin: 0;
  color: #f1f5f9;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.queueCount {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.customerEmpty {
  padding: 0.85rem 0.75rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.manualRequestSection {
  margin-top: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.72);
}

/* ===== DJ manual entry spreadsheet ===== */
.manualDjMode {
  display: flex;
  flex-direction: column;
}

.manualDjMode .customerShell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0.45rem clamp(0.75rem, 1.5vw, 1.15rem) 0.65rem;
}

.manualDjMode .customerStickyHead {
  flex: 0 0 auto;
  margin-bottom: 0.35rem;
}

.manualDjMode .contextBackBar {
  flex: 0 0 auto;
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.65rem;
  font-size: 13px;
}

.manualDjMode .customerTopbar {
  display: none !important;
}

.manualEntrySheet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  margin-top: 0;
}

.manualSheetToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.manualSheetToolbar h1 {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
}

.manualSheetHint {
  margin: 0.12rem 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

.manualDraftCount {
  flex: 0 0 auto;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.manualSheetEntryWrap {
  flex: 0 0 auto;
  overflow: visible;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.78));
  padding: 0.75rem 0.85rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.manualEntryFields {
  display: grid;
  grid-template-columns:
    48px
    minmax(110px, 0.95fr)
    minmax(170px, 1.5fr)
    minmax(150px, 1.3fr)
    minmax(170px, 1.45fr)
    minmax(210px, 1.2fr);
  gap: 0.65rem 0.65rem;
  align-items: start;
}

.manualEntryField {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.manualEntryField--table {
  width: 48px;
  max-width: 48px;
}

.manualEntryLabel {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  min-height: 1.2em;
}

.manualEntryControl {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.manualEntryControl--select {
  position: relative;
}

.manualEntryControl--select::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.manualEntryControl--search {
  padding-left: 0.55rem;
  gap: 0.35rem;
}

.manualEntryControl--selected {
  padding: 0 0.5rem;
  overflow: hidden;
}

.manualEntrySearchIcon {
  flex: 0 0 auto;
  color: #64748b;
}

.manualSheetEntry input {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #f8fafc;
  font-size: 14px;
}

.manualEntryControl--select input {
  padding: 0.55rem 1.1rem 0.55rem 0.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.manualEntryControl--search input {
  padding-left: 0.15rem;
}

.manualSheetEntry input:focus {
  outline: none;
}

.manualEntryControl:focus-within {
  border-color: rgba(96, 165, 250, 0.75);
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.25),
    0 0 0 3px rgba(37, 99, 235, 0.18);
  background: rgba(15, 23, 42, 0.95);
}

.manualSheetEntry input:disabled {
  color: rgba(148, 163, 184, 0.55);
  cursor: not-allowed;
}

.manualEntryField--selected .manualSelectedSongs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.manualSheetEntry.manualFullSelectedCol .manualEntryControl--selected,
.manualEntryField--selected:has(.manualSelectedLine) .manualEntryControl--selected {
  height: auto;
  max-height: 4.6rem;
  min-height: 44px;
  align-items: stretch;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.manualSheetEntry.manualFullSelectedCol .manualEntryField--selected .manualSelectedSongs,
.manualEntryField--selected .manualSelectedSongs:has(.manualSelectedLine) {
  justify-content: flex-start;
  overflow: auto;
}

.manualEntryField--actions .manualSheetActions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.4rem;
  width: auto;
  min-width: 0;
  height: 44px;
  padding: 0;
}

.manualEntryField--actions .manualActionBtn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0.55rem 0.65rem;
}

.manualHistoryPanel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.manualHistoryScroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.manualSheetTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.manualSheetTable th,
.manualSheetTable td {
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  vertical-align: middle;
}

.manualSheetTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.45rem 0.6rem;
  border-bottom: 2px solid rgba(96, 165, 250, 0.35);
  background: #1e293b;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.manualIconBtn,
.manualActionBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  border-radius: 9px;
  line-height: 1;
  cursor: pointer;
  font: inherit;
}

.manualIconBtn {
  flex: 1 1 0;
  min-width: 34px;
  max-width: 40px;
  min-height: 36px;
  padding: 0.45rem 0.3rem;
  line-height: 0;
}

.manualActionBtn {
  width: 100%;
  min-height: 34px;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.manualActionBtn span:not(.manualActionCount) {
  line-height: 1.1;
}

.manualActionBtn svg {
  display: block;
  flex: 0 0 auto;
}

.manualActionSearch {
  border-color: rgba(96, 165, 250, 0.55);
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #eff6ff;
}

.manualActionSearch:hover {
  filter: brightness(1.06);
}

.manualActionReset {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.95);
  color: #e2e8f0;
}

.manualActionReset:hover {
  background: rgba(51, 65, 85, 0.95);
}

.manualActionSend {
  border-color: rgba(167, 139, 250, 0.55);
  background: linear-gradient(180deg, #8b5cf6, #7c3aed);
  color: #f5f3ff;
}

.manualActionSend:hover:not(:disabled) {
  filter: brightness(1.06);
}

.manualActionSend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.manualIconBtn svg {
  display: block;
  flex: 0 0 auto;
}

.manualIconBtn.is-loading svg,
.manualActionBtn.is-loading svg {
  opacity: 0.35;
}

.manualIconBtn.is-loading::after,
.manualActionBtn.is-loading::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: manualIconSpin 0.7s linear infinite;
}

.manualIconBtn.manualActionReadonly,
.manualActionBtn.manualActionReadonly {
  opacity: 0.55;
}

.manualActionCount {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ffffff;
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 900;
  line-height: 15px;
  text-align: center;
}

@keyframes manualIconSpin {
  to {
    transform: rotate(360deg);
  }
}

.manualSelectedSongs {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: auto;
}

.manualSheetEntry.manualHideSong1Col .manualColSong1,
.manualSheetEntry.manualHideSong2Col .manualColSong2 {
  display: none;
}

.manualSheetEntry.manualFullSelectedCol .manualEntryFields {
  grid-template-columns:
    48px
    minmax(110px, 0.95fr)
    minmax(240px, 2.4fr)
    minmax(210px, 1.2fr);
}

.manualSelectedLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 0;
  color: #bbf7d0;
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
}

.manualSelectedLine span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.manualSelectedEmpty {
  display: block;
  width: 100%;
  color: rgba(148, 163, 184, 0.5);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.08em;
}

.manualSelectedRemove {
  flex: 0 0 auto;
  width: 20px;
  min-height: 20px;
  padding: 0;
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-radius: 6px;
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.manualHistoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(15, 23, 42, 0.88);
}

.manualHistoryTabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.manualHistoryTab {
  appearance: none;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.45rem 0.15rem 0.55rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.manualHistoryTab:hover {
  background: transparent;
  color: #f8fafc;
}

.manualHistoryTab.is-active {
  background: transparent;
  border-color: transparent;
  color: #c4b5fd;
}

.manualHistoryTab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: #8b5cf6;
}

.manualHistoryHeader h2 {
  margin: 0;
  font-size: 15px;
}

.manualHistoryBadges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.manualSourceBadge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.manualSourceBadge--manual {
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(37, 99, 235, 0.22);
  color: #bfdbfe;
}

.manualSourceBadge--online {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(185, 28, 28, 0.22);
  color: #fecaca;
}

.manualSourceBadge--blocked {
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(180, 83, 9, 0.28);
  color: #fde68a;
}

.manualHistoryHeader .queueCount {
  display: none !important;
}

.manualHistoryBadges .srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.manualHistoryPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  border-top: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(15, 23, 42, 0.72);
}

.manualHistoryPager[hidden] {
  display: none;
}

.manualHistoryPagerBtn,
.manualHistoryPageBtn {
  appearance: none;
  min-width: 30px;
  min-height: 30px;
  padding: 0 0.45rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.manualHistoryPagerBtn:disabled,
.manualHistoryPageBtn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.manualHistoryPageBtn.is-active {
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(124, 58, 237, 0.35);
  color: #f5f3ff;
}

.manualHistoryPageNumbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.blockedRequestCount {
  background: rgba(127, 29, 29, 0.55);
  border-color: rgba(248, 113, 113, 0.45);
}

.manualBlockedHint {
  margin: 0;
  padding: 0.45rem 0.7rem 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

.manualCellBlockedReason {
  min-width: 120px;
}

.manualRequestStatus.blocked-location_outside_radius,
.manualRequestStatus.blocked-location_low_accuracy,
.manualRequestStatus.blocked-location_coords_invalid {
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

.manualRequestStatus.blocked-qr_token_missing,
.manualRequestStatus.blocked-qr_token_invalid,
.manualRequestStatus.blocked-qr_token_expired,
.manualRequestStatus.blocked-qr_table_mismatch {
  background: rgba(120, 53, 15, 0.45);
  color: #fed7aa;
}

.manualRequestStatus.blocked-active_turn_exists,
.manualRequestStatus.blocked-queue_full {
  background: rgba(30, 58, 138, 0.35);
  color: #bfdbfe;
}

.manualRequestStatus.blocked-awaiting_dj,
.manualRequestStatus.blocked-no_session,
.manualRequestStatus.blocked-requests_paused,
.manualRequestStatus.blocked-hours_ended {
  background: rgba(51, 65, 85, 0.55);
  color: #cbd5e1;
}

.manualHistoryMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
  margin-top: 0.15rem;
}

.manualTodayDate {
  display: inline;
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}

.manualTodayDate:not(:last-child)::after {
  content: " ·";
  color: #64748b;
}

.manualDjMode .manualDashboardNotices {
  gap: 0.3rem;
  margin-top: 0.35rem;
  max-height: 4.5rem;
  overflow: auto;
}

.manualDjMode .manualDashboardNotice {
  padding: 0.4rem 0.55rem;
  font-size: 12px;
  line-height: 1.35;
}

.manualCellSource {
  width: 84px;
  white-space: nowrap;
}

.manualRequestSource {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.manualRequestStatus.status-stopped {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}

.manualStopTiming {
  display: block;
  margin-top: 0.25rem;
  color: #cbd5e1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.manualRequestSource.source-manual {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.manualRequestSource.source-app {
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}

.manualSheetHistory {
  flex: 1 1 auto;
}

.manualSheetHistory td {
  padding: 0.42rem 0.55rem;
  background: rgba(15, 23, 42, 0.72);
  vertical-align: top;
}

.manualSheetHistory tbody tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.45);
}

.manualHistoryEmpty td {
  padding: 0.85rem;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.manualCellTime {
  width: 108px;
  color: #94a3b8;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.35;
}

.manualCellTable {
  width: 56px;
  color: #facc15;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.manualCellSinger {
  min-width: 110px;
  max-width: 160px;
  color: #f8fafc;
  font-weight: 700;
}

.manualCellSingerInner {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.manualCellSingerIcon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #94a3b8;
}

.manualCellSingerName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manualCellSong {
  min-width: 180px;
}

.manualCellSongList {
  display: grid;
  gap: 0.2rem;
}

.manualCellSongLine {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  word-break: break-word;
}

.manualCellSongTitle {
  display: block;
}

.manualCellSongSub {
  display: block;
  margin-top: 0.12rem;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.manualRequestStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 26px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.manualRequestStatus.status-done {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.manualRequestStatus.status-done::before {
  content: "✓";
  font-size: 11px;
  font-weight: 900;
}

.manualRequestStatus.status-playing {
  color: #86efac;
  background: rgba(22, 163, 74, 0.18);
}

.manualRequestStatus.status-skip,
.manualRequestStatus.status-cancelled {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.15);
}

.manualSheetStatus {
  flex: 0 0 auto;
  min-height: 16px;
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

.manualResultsSection {
  flex: 0 0 auto;
  max-height: 28vh;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  overflow: auto;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
}

.manualResultsLabel {
  margin-bottom: 0.45rem;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manualDjMode .manualSheetResults.youtubeResults {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.45rem;
  margin-top: 0;
}

@media (min-width: 1280px) {
  .manualEntryFields {
    gap: 0.75rem 0.85rem;
  }

  .manualEntryField--actions .manualActionBtn {
    padding: 0.55rem 0.85rem;
  }
}

@media (max-width: 1180px) {
  .manualEntryFields {
    grid-template-columns:
      48px
      minmax(100px, 0.9fr)
      minmax(140px, 1.35fr)
      minmax(130px, 1.2fr)
      minmax(150px, 1.3fr)
      minmax(190px, 1.15fr);
  }
}

@media (max-width: 900px) {
  .manualSheetToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .manualDraftCount {
    align-self: flex-start;
  }

  .manualEntryFields,
  .manualSheetEntry.manualFullSelectedCol .manualEntryFields {
    grid-template-columns: 48px 1fr;
  }

  .manualEntryField--table {
    width: 48px;
    max-width: 48px;
  }

  .manualEntryField--song,
  .manualEntryField--selected,
  .manualEntryField--actions {
    grid-column: 1 / -1;
  }

  .manualEntryField--actions .manualSheetActions {
    flex-wrap: nowrap;
  }

  .manualEntryField--actions .manualActionBtn {
    flex: 1 1 0;
  }

  .manualHistoryHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .manualHistoryScroller {
    overflow-x: auto;
  }

  .manualSheetHistory th,
  .manualSheetHistory td {
    white-space: nowrap;
  }

  .manualCellSong {
    white-space: normal;
    min-width: 11rem;
  }
}

.manualRequestSection .myQueueHeader > div {
  min-width: 0;
}

.manualRequestSection .myQueueHeader small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 11px;
}

.manualRequestSection .queueCount {
  flex: 0 0 auto;
  margin-left: auto;
}

.manualRequestList {
  display: grid;
  gap: 0.55rem;
  max-height: 420px;
  overflow-y: auto;
}

.manualRequestItem {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.45);
}

.manualRequestTable {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 11px;
  background: rgba(37, 99, 235, 0.18);
}

.manualRequestTable small {
  color: #93c5fd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.manualRequestTable strong {
  font-size: 18px;
}

.manualRequestDetails {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.manualRequestDetails strong,
.manualRequestDetails span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manualRequestDetails span,
.manualRequestDetails small {
  color: var(--muted);
  font-size: 11px;
}

.manualRequestSection .manualRequestStatus {
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.18);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.manualRequestSection .manualRequestStatus.status-playing {
  color: #86efac;
  background: rgba(22, 163, 74, 0.18);
}

.manualRequestSection .manualRequestStatus.status-done {
  color: #cbd5e1;
  background: rgba(100, 116, 139, 0.2);
}

.manualRequestSection .manualRequestStatus.status-skip,
.manualRequestSection .manualRequestStatus.status-cancelled {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.15);
}

@media (max-width: 480px) {
  .manualRequestItem {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .manualRequestSection .manualRequestStatus {
    grid-column: 2;
    justify-self: start;
  }
}


@media (min-width: 560px) {
  .customerApp .youtubeResults {
    grid-template-columns: 1fr;
  }
}

/* ===== In-app update dialog ===== */
.appUpdateOverlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 6, 23, 0.78);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity 0.18s ease;
}

.appUpdateOverlay.show {
  opacity: 1;
}

.appUpdateCard {
  width: min(100%, 390px);
  padding: 1.4rem;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 22px;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.22), transparent 180px),
    #111827;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.appUpdateOverlay.show .appUpdateCard {
  transform: translateY(0) scale(1);
}

.appUpdateIcon {
  margin-bottom: 0.55rem;
  font-size: 38px;
}

.appUpdateCard h2 {
  margin: 0;
  font-size: 22px;
}

.appUpdateCard p {
  margin: 0.55rem 0 1.1rem;
  line-height: 1.5;
}

.appUpdateNow,
.appUpdateLater {
  width: 100%;
  min-height: 50px;
}

.appUpdateNow {
  font-size: 16px;
}

.appUpdateLater {
  margin-top: 0.55rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}

/* ===== Desktop activation token modal ===== */
.desktopTokenOverlay {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(2, 6, 23, 0.82);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: opacity 0.18s ease;
}

.desktopTokenOverlay.show {
  opacity: 1;
}

.desktopTokenCard {
  width: min(100%, 460px);
  padding: 1.35rem 1.4rem 1.2rem;
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 22px;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.22), transparent 180px),
    #111827;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.18s ease;
}

.desktopTokenOverlay.show .desktopTokenCard {
  transform: translateY(0) scale(1);
}

.desktopTokenEyebrow {
  margin: 0 0 0.25rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
}

.desktopTokenCard h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.desktopTokenLead {
  margin: 0.65rem 0 1rem;
  line-height: 1.55;
  color: var(--muted);
}

.desktopTokenSmartScreen {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.08);
  color: #fde68a;
  font-size: 13px;
  line-height: 1.5;
}

.desktopTokenField {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.desktopTokenField > span {
  font-size: 13px;
  color: var(--muted);
}

.desktopTokenValue {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-all;
}

.desktopTokenValue:focus {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: 2px;
}

.desktopTokenActions {
  display: grid;
  gap: 0.55rem;
}

.desktopTokenCopyBtn,
.desktopTokenCloseBtn {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  font-size: 16px;
}

.desktopTokenCopyBtn {
  font-weight: 700;
}

.desktopTokenCopyBtn.copied {
  background: #15803d;
  border-color: #15803d;
}

.desktopTokenCloseBtn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}

/* ===== Premium brand and Priority Pass ===== */
.customerTopbar {
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  min-height: 72px;
  background:
    radial-gradient(circle at left, rgba(59, 130, 246, 0.2), transparent 70%),
    rgba(15, 23, 42, 0.88);
}

.customerTenantBrand {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.7rem;
}

.customerTenantBrand img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.06);
}

.customerTenantBrandCopy {
  display: grid;
  min-width: 0;
  justify-items: start;
  gap: 0.12rem;
}

.customerTenantBrand strong {
  max-width: 100%;
  overflow: hidden;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.customerAppMark {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.customerAppMark span {
  color: #60a5fa;
}

.customerTopbar .langSwitch {
  align-self: start;
  margin: 0.1rem 0 0;
}

@media (max-width: 420px) {
  .customerTenantBrand {
    gap: 0.5rem;
  }

  .customerTenantBrand img {
    width: 42px;
    height: 42px;
  }

  .customerTenantBrand strong {
    font-size: 13px;
  }

  .quickSearchRow {
    grid-template-columns: 1fr;
  }

  .quickSearchRow button {
    width: 100%;
    min-height: 50px;
  }
}

.customerStickyHead .identitySummary,
.customerShell > .identitySummary {
  width: fit-content;
  max-width: min(100%, 22rem);
  margin: 0.35rem auto 0;
  justify-self: center;
}

.priorityPreviewOverlay {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: flex;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    max(0.75rem, env(safe-area-inset-top))
    max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom))
    max(0.75rem, env(safe-area-inset-left));
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

body.priorityModalOpen {
  overflow: hidden;
}

.priorityPreviewCard {
  width: min(400px, calc(100vw - 1.5rem));
  max-width: 100%;
  max-height: calc(100dvh - 1.5rem);
  flex: 0 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.35rem;
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 24px;
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, 0.2), transparent 190px),
    #111827;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.66);
  text-align: center;
}

.priorityPreviewIcon {
  font-size: 42px;
}

.priorityPreviewCard h2 {
  margin: 0.2rem 0;
  font-size: 25px;
}

.priorityPreviewSong {
  overflow: hidden;
  margin: 0.3rem 0 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.priorityPreviewCard > p:not(.priorityPreviewSong) {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.priorityFacts {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(250, 204, 21, 0.2);
  border-radius: 15px;
  background: rgba(245, 158, 11, 0.08);
}

.priorityFacts strong {
  color: #fde68a;
  font-size: 16px;
}

.priorityFacts span {
  font-size: 24px;
  font-weight: 900;
}

.priorityPayButton,
.priorityCloseButton {
  width: 100%;
  min-height: 49px;
}

.priorityPayButton {
  margin-top: 0.4rem;
  background: linear-gradient(115deg, #f59e0b, #7c3aed);
}

.priorityPayButton:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.7;
}

.priorityCloseButton {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}

.priorityDemoBadge {
  display: inline-flex;
  margin-bottom: 0.7rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.12);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.priorityPaymentAmount {
  display: grid;
  gap: 0.15rem;
  margin: 0.8rem 0;
  padding: 0.9rem;
  border: 1px solid rgba(250, 204, 21, 0.22);
  border-radius: 15px;
  background: rgba(245, 158, 11, 0.08);
}

.priorityPaymentAmount small {
  color: var(--muted);
}

.priorityPaymentAmount strong {
  color: #fde68a;
  font-size: 28px;
}

.priorityPaymentMethods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

.priorityPaymentMethod {
  min-width: 0;
  min-height: 54px;
  padding: 0.55rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(15, 23, 42, 0.82);
  font-size: 12px;
}

.priorityPaymentMethod.selected {
  border-color: rgba(250, 204, 21, 0.65);
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.16);
}

.prioritySuccessIcon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  color: #052e16;
  background: #4ade80;
  box-shadow: 0 0 42px rgba(74, 222, 128, 0.32);
  font-size: 36px;
  font-weight: 900;
}

.priorityPaymentReference {
  display: block;
  overflow-wrap: anywhere;
  margin: 0.85rem 0;
  padding: 0.65rem;
  border-radius: 10px;
  color: #bfdbfe;
  background: rgba(15, 23, 42, 0.9);
  font-size: 11px;
}

@media (max-width: 480px) {
  .priorityPreviewOverlay {
    align-items: flex-end;
    padding:
      max(0.6rem, env(safe-area-inset-top))
      max(0.6rem, env(safe-area-inset-right))
      max(0.6rem, env(safe-area-inset-bottom))
      max(0.6rem, env(safe-area-inset-left));
  }

  .priorityPreviewCard {
    width: calc(100vw - 1.2rem);
    max-height: calc(100dvh - 1.2rem);
    padding: 1rem;
    border-radius: 20px;
  }

  .priorityPreviewIcon {
    font-size: 34px;
  }

  .priorityPreviewCard h2 {
    font-size: 22px;
  }

  .priorityFacts {
    margin-bottom: 0.65rem;
    padding: 0.7rem;
  }

  .priorityPaymentMethods {
    grid-template-columns: 1fr;
  }

  .priorityPaymentMethod {
    min-height: 46px;
  }
}

.adminContainer {
  width: 100%;
  max-width: none;
  padding: 0.85rem clamp(0.8rem, 1.4vw, 1.5rem) 2rem;
}

.demoOnboardingBanner {
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.35));
}

.demoOnboardingBannerHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.demoOnboardingBannerHead strong {
  display: block;
  color: #fde68a;
  font-size: 15px;
}

.demoOnboardingBannerHead p {
  margin: 0.25rem 0 0;
  color: #cbd5e1;
  font-size: 13px;
}

.demoOnboardingBadge {
  flex-shrink: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.demoOnboardingSteps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.demoOnboardingSteps article {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.demoOnboardingSteps article > span {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 800;
}

.demoOnboardingSteps strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.demoOnboardingSteps small {
  display: block;
  margin-top: 0.15rem;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
}

.demoOnboardingOptional > span {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

@media (max-width: 760px) {
  .demoOnboardingSteps {
    grid-template-columns: 1fr;
  }
}

.adminHelpdeskFooter {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  display: grid;
  gap: 0.85rem;
}

.adminHelpdeskFooterInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 16px;
  background: rgba(20, 83, 45, 0.12);
}

.adminHelpdeskFooterInner strong {
  display: block;
  font-size: 14px;
  color: #bbf7d0;
}

.adminHelpdeskFooterInner p {
  margin: 0.25rem 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.adminHelpdeskWhatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.24);
  white-space: nowrap;
}

.adminHelpdeskWhatsapp:hover {
  color: #fff;
  filter: brightness(1.05);
}

.adminHelpdeskFooter .borneovibesCredit {
  font-size: 10px;
  text-align: center;
}

.adminContainer .navLabelShort {
  display: none;
}

.adminContainer .navLabelFull {
  display: inline;
}

.djUnifiedHeader .navLabelShort {
  display: none;
}

.djUnifiedHeader .navLabelFull {
  display: inline;
}

@media (max-width: 900px) {
  .adminContainer > .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    position: static;
    top: auto;
  }

  .adminContainer > .topbar .systemBrand {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .adminContainer > .topbar .systemBrand > div {
    min-width: 0;
    flex: 1;
  }

  .adminContainer > .topbar .systemBrand strong {
    display: block;
    font-size: clamp(0.95rem, 4.2vw, 1.05rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .adminContainer > .topbar .systemBrand span {
    display: none;
  }

  .adminContainer > .topbar .systemOfficialIcon,
  .adminContainer > .topbar .tenantHeaderIcon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .adminContainer > .topbar .nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 0.45rem;
  }

  .adminContainer > .topbar .nav > a.pill,
  .adminContainer > .topbar .nav > form {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    margin: 0;
  }

  .adminContainer > .topbar .nav > a.pill,
  .adminContainer > .topbar .nav .pill {
    width: 100%;
    min-height: 38px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    font-size: 11px;
    padding: 0.5rem 0.45rem;
  }

  .adminContainer > .topbar .staffAppVersion {
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }

  .adminContainer > .topbar .staffExeDownload {
    line-height: 1.25;
  }

  .adminContainer > .topbar .navLabelShort {
    display: none;
  }

  .adminContainer > .topbar .navLabelFull {
    display: inline;
  }
}

@media (max-width: 420px) {
  .adminContainer > .topbar .nav > a.pill,
  .adminContainer > .topbar .nav > form {
    flex: 1 1 100%;
  }

  .adminContainer > .topbar .navLabelShort {
    display: inline;
  }

  .adminContainer > .topbar .navLabelFull {
    display: none;
  }

  .djUnifiedHeader .navLabelShort {
    display: inline;
  }

  .djUnifiedHeader .navLabelFull {
    display: none;
  }
}

.adminSummaryLayout {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(680px, 2fr);
  gap: 1rem;
  margin: 1rem 0;
}

.adminHero {
  display: flex;
  min-height: 126px;
  align-items: center;
  margin: 0;
}

.adminHeroEyebrow {
  display: block;
  margin-bottom: 0.4rem;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.adminKpiGrid {
  grid-template-columns: repeat(4, minmax(125px, 1fr));
}

.adminKpiGrid .kpiCard {
  display: grid;
  min-height: 126px;
  align-content: center;
  background:
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.13), transparent 48%),
    rgba(15, 23, 42, 0.72);
}

.adminKpiGrid .value {
  font-size: clamp(28px, 2.4vw, 42px);
}

.adminSetupLayout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.adminSetupLayout > .card {
  height: 100%;
  margin: 0;
}

.adminBrandingCard,
.adminBackdropCard {
  display: grid;
  grid-template-columns: 86px minmax(180px, 0.7fr) minmax(420px, 1.5fr);
  align-items: center;
  gap: 1rem;
}

.adminSetupLayout .adminBrandingCard,
.adminSetupLayout .adminBackdropCard {
  grid-template-columns: 86px minmax(0, 1fr);
  align-content: center;
}

.adminSetupLayout .adminLogoForm {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.adminLogoPreview {
  display: grid;
  place-items: center;
  width: 86px;
  height: 70px;
  overflow: hidden;
  border: 1px dashed rgba(96, 165, 250, 0.4);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(37, 99, 235, 0.08);
  font-size: 11px;
  font-weight: 800;
}

.adminLogoPreview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.adminBackdropPreview {
  display: grid;
  place-items: center;
  width: 86px;
  height: 70px;
  overflow: hidden;
  border: 1px dashed rgba(167, 139, 250, 0.45);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(124, 58, 237, 0.09);
  font-size: 9px;
  font-weight: 800;
}

.adminBackdropPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adminBackdropLibraryCard {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
}

.adminBackdropDash {
  display: grid;
  gap: 1rem;
}

.adminBackdropOpsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.adminBackdropOpsCard {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  min-height: 0;
}

.adminBackdropOpsHead {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.adminBackdropOpsHead h3 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e2e8f0;
  flex: 1 1 auto;
}

.adminBackdropOpsStatus {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 700;
}

.adminBackdropDot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #64748b;
}

.adminBackdropDot.is-on {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.adminBackdropNowStage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.adminBackdropNowStage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adminBackdropNowEmpty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.82rem;
  padding: 1rem;
  text-align: center;
}

.adminBackdropBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.adminBackdropBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.adminBackdropBadge.is-on {
  color: #bbf7d0;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(22, 101, 52, 0.35);
}

.adminBackdropBadge.is-info {
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(30, 64, 175, 0.35);
}

.adminBackdropStopBtn,
.adminBackdropQrPowerBtn {
  appearance: none;
  width: 100%;
  border-radius: 11px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.55);
  color: #fecaca;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}

.adminBackdropStopBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.adminBackdropQrPowerBtn {
  border-color: rgba(248, 113, 113, 0.55);
  background: transparent;
}

.adminBackdropQrPowerBtn[data-enabled="0"] {
  border-color: rgba(59, 130, 246, 0.55);
  color: #bfdbfe;
  background: rgba(30, 64, 175, 0.28);
}

.adminBackdropQrPosition {
  display: grid;
  gap: 0.35rem;
  width: 100%;
}

.adminBackdropQrPositionLabel {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
}

.adminBackdropQrPositionOptions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.adminBackdropQrPositionBtn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  border-radius: 10px;
  padding: 0.55rem 0.4rem;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  gap: 0.2rem;
  justify-items: center;
}

.adminBackdropQrPosIcon {
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
}

.adminBackdropQrPositionBtn:hover {
  border-color: rgba(96, 165, 250, 0.55);
}

.adminBackdropQrPositionBtn.is-active {
  border-color: rgba(59, 130, 246, 0.85);
  background: rgba(37, 99, 235, 0.35);
  color: #eff6ff;
}

.adminBackdropQrPositionBtn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.adminBackdropQrHint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.adminBackdropStatusPill {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 1;
  display: inline-flex;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #052e16;
  background: #4ade80;
}

.adminBackdropMessage {
  display: block;
  min-height: 1.1em;
  font-size: 12px;
}

.adminBackdropLiveCard .adminBackdropLivePill {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #f5d0fe;
  background: rgba(147, 51, 234, 0.35);
  border: 1px solid rgba(216, 180, 254, 0.4);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
}

.adminBackdropLiveStage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.adminBackdropLiveBg {
  position: absolute;
  inset: 0;
  background: #020617 center / cover no-repeat;
}

.adminBackdropLiveIdle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 0.8rem;
  padding: 1rem;
  text-align: center;
  background: rgba(2, 6, 23, 0.72);
}

.adminBackdropLiveQrWrap {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  width: min(34%, 150px);
}

.adminBackdropLiveStage[data-position="bottom-left"] .adminBackdropLiveQrWrap {
  left: 4%;
  bottom: 6%;
  width: min(28%, 120px);
}

.adminBackdropLiveStage[data-position="bottom-right"] .adminBackdropLiveQrWrap {
  right: 4%;
  bottom: 6%;
  width: min(28%, 120px);
}

.adminBackdropLiveStage[data-position="center"] .adminBackdropLiveQrWrap {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(42%, 180px);
}

.adminBackdropLiveBrand {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0f172a;
}

.adminBackdropLiveBrandQ {
  color: #2563eb;
}

.adminBackdropLiveQrWrap img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: #fff;
}

.adminBackdropLiveQrLabel {
  margin: 0;
  font-size: 0.55rem;
  font-weight: 700;
  text-align: center;
  color: #334155;
  line-height: 1.25;
}

.adminBackdropLiveFoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  font-size: 0.72rem;
  color: #94a3b8;
}

.adminBackdropLiveState {
  color: #86efac;
  font-weight: 700;
}

.adminBackdropLiveRes {
  margin-right: auto;
}

.adminBackdropOpenScreen {
  color: #93c5fd;
  font-weight: 700;
  text-decoration: none;
}

.adminBackdropOpenScreen:hover {
  text-decoration: underline;
}

.adminBackdropLibraryHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.adminBackdropLibraryHead h3 {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adminBackdropPickBtn {
  appearance: none;
  border: 0;
  border-radius: 11px;
  background: #2563eb;
  color: #eff6ff;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
}

.adminBackdropRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 240px);
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
}

.adminBackdropEmpty {
  grid-column: 1 / -1;
  padding: 1.2rem;
  text-align: center;
  color: #64748b;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 12px;
}

.adminBackdropItem {
  display: grid;
  gap: 0.55rem;
  padding: 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.45);
  scroll-snap-align: start;
}

.adminBackdropItem.is-active {
  border-color: rgba(74, 222, 128, 0.75);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.25);
}

.adminBackdropThumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #020617;
}

.adminBackdropThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adminBackdropMeta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.adminBackdropName {
  font-size: 0.78rem;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminBackdropMeta small {
  color: #64748b;
  font-size: 0.68rem;
}

.adminBackdropActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.adminBackdropActions a,
.adminBackdropActions button {
  flex: 1 1 auto;
  font-size: 0.72rem;
  padding: 0.45rem 0.5rem;
}

.adminBackdropPreviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(8px);
}

.adminBackdropPreviewOverlay[hidden] {
  display: none !important;
}

body.adminBackdropPreviewOpen {
  overflow: hidden;
}

.adminBackdropPreviewSheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.85rem;
  width: min(100%, 1080px);
  max-height: min(94vh, 94dvh);
  padding: 0.9rem;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #0b1220;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.adminBackdropPreviewHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.adminBackdropPreviewEyebrow {
  margin: 0 0 0.15rem;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.adminBackdropPreviewHead strong {
  display: block;
  color: #f8fafc;
  font-size: 0.95rem;
  line-height: 1.3;
  word-break: break-word;
}

.adminBackdropPreviewBack {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(37, 99, 235, 0.22);
  color: #e0f2fe;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.adminBackdropPreviewBack:hover,
.adminBackdropPreviewBack:focus-visible {
  background: rgba(37, 99, 235, 0.38);
  outline: none;
}

.adminBackdropPreviewStage {
  min-height: 0;
  overflow: auto;
  border-radius: 14px;
  background: #020617;
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.adminBackdropPreviewStage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78vh, 78dvh);
  margin: 0 auto;
  object-fit: contain;
  background: #020617;
}

@media (max-width: 720px) {
  .adminBackdropPreviewOverlay {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .adminBackdropPreviewSheet {
    width: 100%;
    max-height: 100dvh;
    height: 100%;
    border-radius: 0;
    border: 0;
  }

  .adminBackdropPreviewBack {
    width: 100%;
  }
}

.adminBackdropUploadCard {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
}

.adminBackdropUploadCard h3 {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.adminBackdropUploadGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 0.85rem;
  align-items: stretch;
}

.adminBackdropUploadForm {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.adminBackdropDropzone {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  align-content: center;
  min-height: 160px;
  padding: 1.2rem;
  border-radius: 14px;
  border: 1.5px dashed rgba(96, 165, 250, 0.45);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  cursor: pointer;
  text-align: center;
}

.adminBackdropDropzone.is-drag {
  border-color: #60a5fa;
  background: rgba(30, 64, 175, 0.25);
}

.adminBackdropDropIcon {
  font-size: 1.4rem;
  color: #93c5fd;
}

.adminBackdropPickFile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: #2563eb;
  color: #eff6ff;
  font-weight: 700;
  font-size: 0.82rem;
}

.adminBackdropUploadTips {
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(160deg, rgba(76, 29, 149, 0.28), rgba(15, 23, 42, 0.75));
  padding: 1rem;
}

.adminBackdropUploadTips h4 {
  margin: 0 0 0.55rem;
  color: #e9d5ff;
  font-size: 0.85rem;
}

.adminBackdropUploadTips ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #cbd5e1;
  font-size: 0.78rem;
  line-height: 1.45;
  display: grid;
  gap: 0.35rem;
}

@media (max-width: 1100px) {
  .adminBackdropOpsGrid {
    grid-template-columns: 1fr;
  }

  .adminBackdropUploadGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .adminBackdropRail {
    grid-auto-columns: minmax(170px, 78vw);
  }
}


.adminBrandingCopy h2,
.adminBrandingCopy p {
  margin: 0;
}

.adminBrandingCopy p {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 12px;
}

.adminLogoForm {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(120px, 0.55fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.adminLogoForm input {
  min-width: 0;
}

.adminLogoForm input[type="file"] {
  min-height: 44px;
  padding: 0.3rem;
}

.adminLogoForm input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 0.65rem;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: 8px;
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.22);
  font-weight: 800;
  cursor: pointer;
}

.adminLogoForm button {
  min-height: 44px;
  white-space: nowrap;
}

.adminLogoForm small {
  grid-column: 1 / -1;
}

.qrGeneratorCard {
  margin-top: 1rem;
  border-color: rgba(34, 211, 238, 0.28);
  background:
    radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 310px),
    rgba(31, 41, 55, 0.72);
}

.adminSetupLayout .qrGeneratorCard {
  grid-column: 1 / -1;
  margin-top: 0;
}

.adminSecurityNotice {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.42);
  background: rgba(180, 83, 9, 0.14);
  color: #fef3c7;
}

.adminSecurityNotice strong {
  color: #fde68a;
  font-size: 13px;
}

.adminSecurityNotice p {
  margin: 0;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.55;
}

.adminSecurityNotice ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
  color: #fef9c3;
  font-size: 12px;
  line-height: 1.5;
}

.adminSecurityNotice li::marker {
  color: #fbbf24;
}

.adminSetupLayout .tableTierSection {
  grid-column: 1 / -1;
  margin-top: 0;
}

.adminSetupLayout .adminCustomerAdsCard {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.75rem;
}

.adminCustomerAdsCard {
  display: grid;
  gap: 0.85rem;
}

.adminAdsToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.customerAdsUploadForm {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.adminAdsDropzone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px dashed rgba(125, 211, 252, 0.35);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.72));
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.adminAdsDropzone:hover,
.adminAdsDropzone:focus-within {
  border-color: rgba(56, 189, 248, 0.7);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.adminAdsDropzone.isDragging {
  border-color: rgba(56, 189, 248, 0.95);
  background: rgba(14, 165, 233, 0.12);
}

.adminAdsDropzone.hasFiles {
  border-style: solid;
  border-color: rgba(56, 189, 248, 0.45);
}

.adminAdsFileInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.adminAdsDropVisual {
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 12px;
  color: #7dd3fc;
  background: rgba(14, 165, 233, 0.14);
}

.adminAdsDropVisual svg {
  width: 1.25rem;
  height: 1.25rem;
}

.adminAdsDropCopy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.adminAdsDropCopy strong {
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 700;
}

.adminAdsDropCopy small {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

.adminAdsBrowseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.16);
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.adminAdsSelected {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.55);
}

.adminAdsSelectedSummary {
  margin: 0;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.adminAdsSelectedList {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adminAdsSelectedList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  color: #e2e8f0;
  font-size: 12px;
}

.adminAdsSelectedList strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.adminAdsSelectedList span {
  flex: 0 0 auto;
  color: #94a3b8;
}

.adminAdsActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.adminAdsActions button[type="submit"] {
  min-height: 42px;
}

.adminAdsCountPill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

.adminAdsHint {
  margin: 0;
}

.adminAdsMessage {
  display: block;
  min-height: 1.1em;
}

.adminAdsEmpty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.customerAdsLibrary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.customerAdAdminItem {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  padding: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.35);
}

.customerAdAdminItem.is-active {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.2);
}

.customerAdAdminItem.is-inactive {
  opacity: 0.78;
}

.customerAdAdminThumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: #0b1220;
}

.customerAdAdminThumb img,
.customerAdAdminItem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.customerAdAdminMeta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.customerAdAdminName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.customerAdAdminStatus {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #94a3b8;
}

.customerAdAdminItem.is-active .customerAdAdminStatus {
  color: #86efac;
}

.customerAdAdminMeta small {
  color: var(--muted);
  font-size: 11px;
}

.customerAdWhatsappField {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.35rem;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
}

.customerAdWhatsappInput {
  width: 100%;
  min-height: 36px;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.55);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

.customerAdOrderToggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.2rem 0 0;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 650;
}

.customerAdOrderToggle input {
  width: 1rem;
  height: 1rem;
  accent-color: #22c55e;
}

.adminAdsOrderHint {
  margin: 0.35rem 0 0.75rem;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

.adminOrderSettingsCard {
  display: grid;
  gap: 1rem;
  max-width: 720px;
}

.adminOrderExplain {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.45;
}

.adminOrderSettingsForm {
  display: grid;
  gap: 0.9rem;
}

.adminOrderFeatureToggle {
  width: fit-content;
}

.adminOrderField {
  display: grid;
  gap: 0.35rem;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
}

.adminOrderField input,
.adminOrderField textarea {
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-weight: 500;
}

.adminOrderField textarea {
  resize: vertical;
  min-height: 96px;
}

.adminOrderActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.adminOrderSettingsMessage {
  color: #86efac;
  font-size: 12px;
}

.adminOrderStatsCard {
  display: grid;
  gap: 0.65rem;
  max-width: 720px;
}

.adminOrderStatsCard h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e2e8f0;
}

.adminOrderStatsNote {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.4;
}

.adminOrderStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  margin: 0;
}

.adminOrderStatsGrid div {
  min-width: 0;
}

.adminOrderStatsGrid dt {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.adminOrderStatsGrid dd {
  margin: 0.15rem 0 0;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .adminOrderStatsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminOrderStatsGrid div:nth-child(n + 4) {
    grid-column: span 1;
  }
}

@media (min-width: 900px) {
  .adminOrderSettingsForm {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .adminOrderFeatureToggle,
  .adminOrderActions {
    grid-column: 1 / -1;
  }

  .adminOrderField:has(textarea) {
    grid-column: 1 / -1;
  }
}

.customerAdAdminActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.customerAdAdminActions button {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding: 0.35rem 0.55rem;
}

.qrSectionTitle {
  margin-bottom: 0.15rem;
}

.qrSectionTitle h2 {
  margin-bottom: 0.15rem;
}

.qrGeneratorControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.qrControlPanel {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.42);
}

.qrControlPanel--wall {
  border-color: rgba(34, 211, 238, 0.24);
}

.qrControlPanel--table {
  border-color: rgba(96, 165, 250, 0.24);
}

.qrControlPanelHead {
  display: grid;
  gap: 0.28rem;
}

.qrControlPanelHead strong {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.qrControlPanel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.qrControlBadge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  color: #a5f3fc;
  background: rgba(34, 211, 238, 0.14);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qrControlBadge--table {
  color: #bfdbfe;
  background: rgba(59, 130, 246, 0.16);
}

.qrControlActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qrControlActions button {
  min-height: 42px;
  flex: 1 1 auto;
}

.qrPanelPrintButton {
  border-color: rgba(34, 197, 94, 0.42) !important;
  color: #bbf7d0 !important;
  background: rgba(22, 163, 74, 0.18) !important;
}

.qrPanelPrintButton:hover {
  background: rgba(22, 163, 74, 0.28) !important;
}

.qrTableRange {
  grid-template-columns: 1fr;
}

.qrTableInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.qrTableInputs label {
  margin: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.qrPreviewSection {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.95rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.tableQrStatus {
  display: none;
  margin: 0 0 0.75rem;
}

.tableQrStatus.is-visible {
  display: block;
}

.tableQrStatusBanner {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
}

.tableQrStatusBanner strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
}

.tableQrStatusBanner p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.tableQrStatusBanner--pending {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(180, 83, 9, 0.22);
}

.tableQrStatusBanner--pending strong {
  color: #fde68a;
}

.tableQrStatusBanner--ready {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(22, 163, 74, 0.18);
}

.tableQrStatusBanner--ready strong {
  color: #86efac;
}

.tableQrEmptyPreview {
  display: none;
  margin-top: 0.95rem;
  padding: 1.15rem 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  text-align: center;
}

.tableQrEmptyPreview.is-visible {
  display: block;
}

.tableQrEmptyPreview strong {
  display: block;
  color: #e2e8f0;
  font-size: 0.95rem;
}

.tableQrEmptyPreview p {
  margin: 0.4rem 0 0;
  color: #94a3b8;
  font-size: 0.82rem;
  line-height: 1.4;
}

.qrPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.qrPreviewHeader strong {
  display: block;
  font-size: 0.95rem;
}

.qrPreviewHeader small {
  display: block;
  margin-top: 0.15rem;
}

.qrGeneratorMessage {
  margin: 0;
  font-size: 0.82rem;
}

.qrGeneratorMessage:empty {
  display: none;
}

.tableTierSection {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.adminSetupLayout .tableTierSection {
  margin-top: 0;
}

.tableTierIntro p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.tableTierForms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.tableTierPanel {
  align-content: start;
}

.tableTierPanel strong {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.tableTierPanel.vip {
  border-color: rgba(168, 85, 247, 0.35);
}

.tableTierPanel.vvip {
  border-color: rgba(250, 204, 21, 0.35);
}

.tableTierListField small {
  color: var(--muted);
  font-size: 10px;
}

.tableTierForm {
  grid-template-columns: minmax(180px, 1fr) minmax(95px, 0.4fr) minmax(95px, 0.4fr) minmax(105px, 0.45fr) minmax(105px, 0.45fr) auto;
}

.tableTierIntro {
  grid-column: 1 / -1;
}

.tableTierList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.tableTierChip {
  display: grid;
  gap: 0.15rem;
  min-width: 150px;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.34);
}

.tableTierChip strong {
  font-size: 12px;
}

.tableTierChip small {
  color: var(--muted);
  font-size: 10px;
}

.tableTierChip.vip {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(88, 28, 135, 0.18);
}

.tableTierChip.vvip {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(161, 98, 7, 0.18);
}

.tableTierChip button {
  justify-self: start;
  margin-top: 0.25rem;
}

.tableTierEditRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.tableTierEditRow input {
  width: 4.5rem;
  min-width: 0;
}

.qrTableRange label {
  margin: 0;
}

.qrPreviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
  scroll-margin-top: 1rem;
}

.qrPreviewGrid:has(.qrPrintSheet) {
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
}

.qrPreviewItem {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  width: 100%;
}

.qrCardToolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.qrExportButton {
  min-height: 38px;
  padding: 0.45rem 0.35rem;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.qrExportButton.primary {
  color: #ffffff;
  background: linear-gradient(115deg, var(--primary), #7c3aed);
}

.qrExportButton.secondary {
  color: var(--text);
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.28);
}

.qrExportButton:disabled {
  opacity: 0.65;
  cursor: wait;
}

.qrPrintCard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 210 / 297;
  min-width: 0;
  margin: 0 auto;
  padding: clamp(0.75rem, 2.5vw, 1rem);
  border: 2px solid #111111;
  border-radius: 14px;
  color: #111111;
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.qrPosterHeader {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 2vw, 0.65rem);
  width: 100%;
  text-align: left;
}

.qrPosterLogo {
  width: clamp(42px, 11vw, 56px);
  height: clamp(42px, 11vw, 56px);
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f8fafc;
}

.qrPosterBrand {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.qrPosterBrand strong {
  font-size: clamp(0.82rem, 2.4vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.12;
  word-break: break-word;
}

.qrPosterBrand span {
  color: #444444;
  font-size: clamp(0.62rem, 1.8vw, 0.74rem);
  font-weight: 600;
}

.qrPosterRule {
  width: 100%;
  height: 1px;
  margin: clamp(0.45rem, 1.6vw, 0.65rem) 0;
  background: #d1d5db;
}

.qrPosterHero {
  display: grid;
  gap: clamp(0.15rem, 0.8vw, 0.28rem);
  margin-bottom: clamp(0.45rem, 1.6vw, 0.65rem);
}

.qrPosterScanLine {
  margin: 0;
  font-size: clamp(0.68rem, 2vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.qrPosterHeroTitle {
  margin: 0;
  font-size: clamp(1.35rem, 5.2vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.98;
  text-transform: uppercase;
  word-break: break-word;
}

.qrPosterSubtitle {
  margin: 0;
  color: #555555;
  font-size: clamp(0.58rem, 1.7vw, 0.72rem);
  font-weight: 500;
  line-height: 1.35;
}

.qrPosterQrFrame {
  display: grid;
  place-items: center;
  width: min(100%, clamp(170px, 52vw, 240px));
  aspect-ratio: 1;
  margin: 0 auto clamp(0.45rem, 1.6vw, 0.65rem);
  padding: clamp(0.35rem, 1.2vw, 0.55rem);
  border: 2px solid #111111;
  border-radius: 12px;
}

.qrCodeImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qrPosterSteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(0.45rem, 1.6vw, 0.65rem);
}

.qrPosterStep {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.12rem, 0.6vw, 0.2rem);
  padding: 0 clamp(0.15rem, 1vw, 0.35rem);
}

.qrPosterStep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  right: 0;
  width: 1px;
  height: calc(100% - 0.3rem);
  background: #e5e7eb;
}

.qrPosterStepIcon {
  display: grid;
  width: clamp(26px, 7vw, 34px);
  height: clamp(26px, 7vw, 34px);
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #111111;
}

.qrPosterStepIcon svg {
  width: clamp(14px, 3.8vw, 18px);
  height: clamp(14px, 3.8vw, 18px);
}

.qrPosterStep strong {
  font-size: clamp(0.48rem, 1.4vw, 0.58rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

.qrPosterStep p {
  margin: 0;
  color: #555555;
  font-size: clamp(0.44rem, 1.25vw, 0.54rem);
  line-height: 1.25;
  text-align: center;
}

.qrPosterFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: auto;
  padding: clamp(0.4rem, 1.4vw, 0.55rem) clamp(0.45rem, 1.6vw, 0.65rem);
  border-radius: 10px;
  color: #ffffff;
  background: #111111;
}

.qrPosterFooterTag {
  font-size: clamp(0.44rem, 1.25vw, 0.54rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.qrPosterFooterThanks {
  font-size: clamp(0.66rem, 2vw, 0.82rem);
  font-style: italic;
  font-weight: 500;
  font-family: Georgia, "Times New Roman", serif;
  white-space: nowrap;
}

.qrPosterDevCredit {
  margin-top: auto;
  padding-top: clamp(0.25rem, 0.8vw, 0.4rem);
  color: #111111;
  font-size: clamp(0.58rem, 1.65vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
}

.qrPosterDevCredit strong {
  font-weight: 900;
}

.qrPrintSheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.qrPrintSheet .qrPreviewItem {
  min-width: 0;
  width: auto;
  padding: 0.35rem;
  box-sizing: border-box;
}

.qrPrintSheet .qrPrintCard {
  max-width: none;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  padding: clamp(0.35rem, 1.2vw, 0.5rem);
  border-radius: 0;
  box-shadow: none;
}

.qrPrintSheet .qrCardToolbar {
  display: none;
}

.qrPrintCutGuide {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.qrCutLine {
  position: absolute;
  pointer-events: none;
}

.qrCutLine--v {
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 0;
  border-left: 1px dashed rgba(100, 116, 139, 0.65);
  transform: translateX(-50%);
}

.qrCutLine--h {
  left: 6%;
  right: 6%;
  top: 50%;
  height: 0;
  border-top: 1px dashed rgba(100, 116, 139, 0.65);
  transform: translateY(-50%);
}

.qrCutTick {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.qrCutTick--pageTL {
  top: 4px;
  left: 4px;
  border-top: 1.5px solid rgba(15, 23, 42, 0.75);
  border-left: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--pageTR {
  top: 4px;
  right: 4px;
  border-top: 1.5px solid rgba(15, 23, 42, 0.75);
  border-right: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--pageBL {
  bottom: 4px;
  left: 4px;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.75);
  border-left: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--pageBR {
  bottom: 4px;
  right: 4px;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.75);
  border-right: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--crossTL {
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border-top: 1.5px solid rgba(15, 23, 42, 0.75);
  border-left: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--crossTR {
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: 0;
  border-top: 1.5px solid rgba(15, 23, 42, 0.75);
  border-right: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--crossBL {
  top: 50%;
  left: 50%;
  margin-top: 0;
  margin-left: -8px;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.75);
  border-left: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrCutTick--crossBR {
  top: 50%;
  left: 50%;
  margin-top: 0;
  margin-left: 0;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.75);
  border-right: 1.5px solid rgba(15, 23, 42, 0.75);
}

.qrPrintCard--compact .qrPosterHeroTitle {
  font-size: clamp(0.95rem, 3.2vw, 1.2rem);
}

.qrPrintCard--compact .qrPosterQrFrame {
  width: min(100%, clamp(90px, 28vw, 120px));
}

.qrPrintCard--compact .qrPosterDevCredit {
  font-size: clamp(0.48rem, 1.35vw, 0.58rem);
}

@media (max-width: 1180px) {
  .adminSummaryLayout,
  .adminSetupLayout {
    grid-template-columns: 1fr;
  }

  .adminKpiGrid {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .adminKpiGrid .kpiCard {
    min-height: 96px;
  }

  .adminSetupLayout .adminBrandingCard,
  .adminSetupLayout .adminBackdropCard {
    grid-template-columns: 86px minmax(180px, 0.7fr) minmax(420px, 1.5fr);
  }

  .adminSetupLayout .adminLogoForm {
    grid-column: auto;
    grid-template-columns: minmax(190px, 1fr) minmax(120px, 0.55fr) auto;
  }
}

@media (max-width: 900px) {
  .adminBrandingCard,
  .adminBackdropCard,
  .adminLogoForm {
    grid-template-columns: 1fr;
  }

  .adminSetupLayout .adminBrandingCard,
  .adminSetupLayout .adminBackdropCard,
  .adminSetupLayout .adminLogoForm {
    grid-template-columns: 1fr;
  }

  .adminSetupLayout .adminLogoForm {
    grid-column: 1 / -1;
  }

  .customerAdsUploadForm {
    width: 100%;
  }

  .adminAdsDropzone {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .adminAdsBrowseBtn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .adminAdsActions {
    align-items: stretch;
  }

  .adminAdsCountPill {
    margin-left: 0;
    align-self: flex-start;
  }

  .adminLogoForm small {
    grid-column: auto;
  }

  .qrGeneratorControls,
  .qrTableInputs,
  .qrTableRange,
  .tableTierForm,
  .tableTierForms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .adminKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.priorityAdminCard {
  border-color: rgba(250, 204, 21, 0.25);
}

.priorityPriceAdmin {
  color: #fde68a;
  font-size: 22px;
  font-weight: 900;
}

.statusOn {
  color: #86efac;
}

.statusOff {
  color: #fca5a5;
}

.priorityAdminReason {
  padding: 0.7rem;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.09);
  color: #fecaca;
  font-size: 13px;
}

.adminSettingsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.adminSettingsGrid label {
  margin: 0;
}

.adminToggle {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.6rem;
}

.adminToggle input {
  width: 20px;
  min-height: 20px;
  margin: 0;
}

.adminLedOverlayOptions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.34);
}

.adminLedOverlayOptions legend {
  padding: 0 0.4rem;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.adminLedOverlayOptions .adminToggle {
  grid-column: auto;
}

.adminSettingsDivider {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.adminSettingsDivider h3 {
  margin: 0;
  font-size: 17px;
}

.adminSettingsDivider p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 12px;
}

.adminWideField {
  grid-column: 1 / -1;
}

.adminSettingsGrid button {
  align-self: end;
  min-height: 46px;
}

.adminSettingsActions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.35rem;
}

.adminSettingsMessage {
  margin: 0;
  min-height: 0;
  line-height: 1.45;
}

.adminSettingsMessage:not(:empty) {
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(134, 239, 172, 0.28);
}

.adminSettingsMessage--error:not(:empty) {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(254, 202, 202, 0.35);
}

.adminSettingsActions button {
  width: min(100%, 260px);
}

@media (max-width: 600px) {
  .adminSettingsActions {
    justify-content: stretch;
  }

  .adminSettingsActions button {
    width: 100%;
  }
}

.intermissionUploadPanel {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(240px, 0.8fr) minmax(360px, 1.2fr);
  align-items: end;
  gap: 0.75rem 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.45);
}

.intermissionUploadPanel[hidden],
#djFillerYoutubeField[hidden] {
  display: none;
}

.intermissionUploadPanel p {
  margin: 0.25rem 0;
  color: var(--muted);
  font-size: 12px;
}

.intermissionUploadPanel small {
  color: var(--muted);
}

.intermissionUploadControls {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.intermissionUploadControls input {
  min-width: 0;
}

#intermissionUploadMessage {
  grid-column: 1 / -1;
}

.intermissionMediaLibrary {
  display: grid;
  grid-column: 1 / -1;
  gap: 0.55rem;
}

.intermissionMediaItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.32);
}

.intermissionYoutubeHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.intermissionYoutubeHeader > div {
  min-width: 0;
  flex: 1 1 240px;
}

.intermissionYoutubeRefreshAll {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0.4rem 0.75rem;
  font-size: 11px;
}

.intermissionYoutubeMessage {
  display: block;
  min-height: 1.1em;
}

.intermissionYoutubeLibrary {
  gap: 0.65rem;
}

.intermissionYoutubeCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.32);
}

.intermissionYoutubeCard.active {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(22, 163, 74, 0.08);
}

.intermissionYoutubeCardBody {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.intermissionYoutubeCardBody .intermissionYoutubeTitleEdit {
  width: 100%;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}

.intermissionYoutubeCardMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  min-width: 0;
}

.intermissionYoutubeId,
.intermissionYoutubeUrl {
  display: inline-block;
  max-width: min(100%, 42rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-decoration: none;
}

.intermissionYoutubeUrl:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.intermissionYoutubeLinkBtn {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #93c5fd;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.intermissionYoutubeLinkBtn:hover {
  color: #bfdbfe;
  text-decoration: underline;
}

.intermissionYoutubeLinkBtn[hidden] {
  display: none !important;
}

.intermissionYoutubeCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.intermissionYoutubeCardActions button {
  min-height: 34px;
  padding: 0.4rem 0.7rem;
  font-size: 11px;
}

@media (max-width: 760px) {
  .intermissionYoutubeCard {
    grid-template-columns: 1fr;
  }

  .intermissionYoutubeCardActions {
    justify-content: flex-start;
  }
}

.intermissionMediaItem.active {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(22, 163, 74, 0.08);
}

.intermissionMediaItem > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.intermissionMediaItem > div strong,
.intermissionMediaItem > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intermissionMediaType,
.intermissionActiveBadge {
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  font-size: 10px;
  font-weight: 900;
}

.intermissionActiveBadge {
  color: #86efac;
  background: rgba(22, 163, 74, 0.14);
}

.intermissionMediaItem button {
  min-height: 34px;
  padding: 0.4rem 0.65rem;
  font-size: 11px;
}

.intermissionLibraryEmpty {
  margin: 0;
  padding: 0.8rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}

@media (max-width: 760px) {
  .intermissionUploadPanel,
  .intermissionUploadControls {
    grid-template-columns: 1fr;
  }

  .intermissionMediaItem {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ===== Second monitor / LED screen ===== */
.ledScreen {
  --led-footer-height: clamp(72px, 8.2vh, 104px);
  --led-safe-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  --led-safe-top: max(10px, env(safe-area-inset-top, 10px));
  --led-safe-left: max(clamp(16px, 2.2vw, 36px), env(safe-area-inset-left, 0px));
  --led-safe-right: max(clamp(16px, 2.2vw, 36px), env(safe-area-inset-right, 0px));
  --led-footer-total: calc(var(--led-footer-height) + var(--led-safe-bottom));
  /* Pilihan 1: video hampir ke top skrin; footer bawah kekal dilindungi inset bottom */
  --led-video-top-offset: var(--led-safe-top, 0px);
  --led-backdrop-image: url("/assets/led-default-backdrop.png");
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  cursor: none;
  user-select: none;
  background:
    radial-gradient(circle at 25% 20%, rgba(37, 99, 235, 0.26), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.2), transparent 35%),
    #020617;
  color: #fff;
}

.ledScreen * {
  cursor: none !important;
}

.ledVideoLayer,
.ledShade {
  position: fixed;
  inset:
    var(--led-video-top-offset, var(--led-footer-total))
    0
    var(--led-footer-total, calc(var(--led-footer-height) + var(--led-safe-bottom)))
    0;
  transition: none;
}

.ledVideoLayer {
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  container-type: size;
  /* Option 3: side gaps use existing LED backdrop (no second YouTube iframe) */
  background-color: #020617;
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.72)),
    var(--led-backdrop-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Host YT.Player isi jalur video */
.ledVideoLayer > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ledVideoLayer iframe,
.ledUploadedVideo {
  display: block;
  border: 0;
  background: #000;
  pointer-events: none;
}

/*
 * Option 3: fit-to-video-band / contain / no crop / no distortion.
 * Maximize 16:9 inside .ledVideoLayer; side gaps acceptable; full width only when math allows.
 * Priority: no crop > no distortion > 16:9 > maximize > side gap OK > footer safe.
 */
.ledVideoLayer iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

@supports (width: 1cqw) {
  .ledVideoLayer iframe {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16));
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
  }
}

.ledUploadedVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.ledUploadedAudio {
  display: none;
}

.ledScreen.hasCustomLedBackdrop {
  background: #020617;
}

.ledScreen.hasCustomLedBackdrop .ledStandby,
.ledScreen.hasCustomLedBackdrop .ledSystemWordmark {
  display: none !important;
}

/* Image-only idle (default or custom PNG): never stack HTML brand splash */
.ledScreen:has(.ledVideoLayer.standbyBackdrop) .ledStandby {
  display: none !important;
}

.ledScreen.hasCustomLedBackdrop .ledActivateOverlay {
  background: rgba(2, 6, 23, 0.78);
}

.ledVideoLayer.audioIntermission,
.ledVideoLayer.standbyBackdrop {
  inset: 0;
  background-image: var(
    --led-backdrop-image,
    url("/assets/led-default-backdrop.png")
  );
  background-position: center;
  background-size: cover;
}

.ledVideoLayer.standbyBackdrop.hasCustomBackdrop,
.ledVideoLayer.audioIntermission.hasCustomBackdrop {
  background-color: #020617;
  background-repeat: no-repeat;
}

.ledVideoLayer.standbyBackdrop.hasCustomBackdrop {
  background-image: var(--led-backdrop-image);
  background-size: cover;
  background-position: center;
}

.ledVideoLayer.audioIntermission.hasCustomBackdrop {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.42)),
    var(--led-backdrop-image);
  background-size: cover, cover;
}

/* Audio-only interlude: keep FULL-SIZE YouTube/player under opaque backdrop cover.
   Shrinking (2px) or opacity:0 lets Chromium suspend audio → bar silent when Q empty.
   Cover visually; player stays "visible" and audible to the browser. */
.ledVideoLayer.audioIntermission iframe,
.ledVideoLayer.audioIntermission .ledUploadedVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.ledVideoLayer.audioIntermission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: #020617;
  background-image: var(
    --led-backdrop-image,
    url("/assets/led-default-backdrop.png")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ledVideoLayer.audioIntermission.hasCustomBackdrop::before {
  background-image:
    linear-gradient(rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.42)),
    var(--led-backdrop-image);
  background-size: cover, cover;
}

.ledVideoLayer.audioIntermission::after {
  content: "♫";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: rgba(255, 255, 255, 0.13);
  font-size: min(44vw, 560px);
  line-height: 1;
  text-shadow: 0 0 80px rgba(96, 165, 250, 0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ledVideoLayer.audioIntermission.hasCustomBackdrop::after {
  display: none;
}

.ledShade {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.42), transparent 16%),
    linear-gradient(0deg, rgba(2, 6, 23, 0.52), transparent 22%);
}

.ledQrOverlay {
  position: fixed;
  right: max(4%, var(--led-safe-right));
  bottom: calc(var(--led-footer-total) + 5%);
  z-index: 6;
  pointer-events: none;
}

.ledQrOverlay[data-position="bottom-left"] {
  right: auto;
  left: max(4%, var(--led-safe-left));
  transform: none;
}

.ledQrOverlay[data-position="bottom-right"] {
  left: auto;
  right: max(4%, var(--led-safe-right));
  transform: none;
}

.ledQrOverlay[data-position="center"] {
  left: 50%;
  right: auto;
  bottom: calc(var(--led-footer-total) + 7%);
  transform: translateX(-50%);
}

.ledQrOverlayCard {
  width: clamp(220px, 20vw, 360px);
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.ledQrOverlay[data-position="center"] .ledQrOverlayCard {
  width: clamp(280px, 34vw, 520px);
  padding: clamp(16px, 1.6vw, 26px);
  border-radius: 18px;
  gap: 0.55rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

.ledQrOverlay[data-position="center"] .ledQrOverlayBrand {
  font-size: clamp(18px, 2vw, 28px);
}

.ledQrOverlay[data-position="center"] .ledQrOverlayLabel {
  font-size: clamp(13px, 1.25vw, 18px);
}

.ledQrOverlayBrand {
  margin: 0 0 0.15rem;
  color: #0f172a;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.55vw, 22px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1;
  text-transform: uppercase;
}

.ledQrOverlayBrandText,
.ledQrOverlayBrandQ {
  display: inline;
  vertical-align: baseline;
}

.ledQrOverlayBrandQ {
  font-size: 1.3em;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 0.85;
}

.ledQrOverlayCard img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  background: #ffffff;
}

.ledQrOverlayLabel {
  margin: 0.1rem 0 0;
  color: #0f172a;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.2;
}

.ledHeader {
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding:
    max(clamp(16px, 2vw, 30px), var(--led-safe-top))
    clamp(22px, 3vw, 48px)
    clamp(16px, 2vw, 30px);
}

.ledBrand {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  font-size: clamp(24px, 2.6vw, 44px);
  font-weight: 950;
  letter-spacing: -0.06em;
  text-shadow: 0 8px 32px rgba(59, 130, 246, 0.5);
}

.ledBrand #ledCompanyLogo {
  display: block;
  width: auto;
  max-width: min(220px, 24vw);
  height: clamp(42px, 6vw, 72px);
  object-fit: contain;
  object-position: left center;
}

.ledBrand.companyNameRight {
  width: 100%;
}

.ledBrand.companyNameRight #ledBrandText {
  margin-left: auto;
  text-align: right;
}

.ledBrand .systemOfficialIcon {
  width: clamp(46px, 5.5vw, 76px);
  height: clamp(46px, 5.5vw, 76px);
  border-radius: clamp(12px, 1.2vw, 20px);
}

.ledBrand .systemOfficialIcon[hidden],
.ledBrand #ledCompanyLogo[hidden],
.ledBrand > span[hidden] {
  display: none;
}

.ledBrand span {
  color: #60a5fa;
}

#ledBrandText {
  overflow: hidden;
  max-width: min(72vw, 900px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledStage {
  position: fixed;
  z-index: 4;
  inset:
    var(--led-video-top-offset, var(--led-footer-total))
    0
    var(--led-footer-total, calc(var(--led-footer-height) + var(--led-safe-bottom)))
    0;
  pointer-events: none;
}

.ledStandby {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(90vw, 850px);
  text-align: center;
  transform: translate(-50%, -50%);
}

.ledOfficialIcon {
  width: clamp(190px, 24vw, 360px);
  height: clamp(190px, 24vw, 360px);
  margin-bottom: clamp(-26px, -2vw, -12px);
  border-radius: clamp(28px, 4vw, 64px);
  object-fit: cover;
  filter: drop-shadow(0 24px 70px rgba(59, 130, 246, 0.36));
}

.ledOfficialIcon.tenantStandbyLogo {
  border-radius: clamp(16px, 2vw, 34px);
  object-fit: contain;
}

.ledStandby[hidden],
.ledNow[hidden],
.ledBobouStage[hidden] {
  display: none !important;
}

.ledBobouStage {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 28, 135, 0.45), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(30, 58, 138, 0.35), transparent 38%),
    linear-gradient(180deg, #12091f 0%, #090b1d 52%, #06070f 100%);
}

.ledBobouBackdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ledBobouSpotlight {
  position: absolute;
  top: -8%;
  width: 48%;
  height: 58%;
  opacity: 0.55;
  filter: blur(8px);
}

.ledBobouSpotlightLeft {
  left: -6%;
  background: radial-gradient(circle at 70% 30%, rgba(168, 85, 247, 0.55), transparent 68%);
}

.ledBobouSpotlightRight {
  right: -6%;
  background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.5), transparent 68%);
}

.ledBobouEq {
  position: absolute;
  top: 8%;
  bottom: 16%;
  width: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 0.7vh, 8px);
}

.ledBobouEq span {
  display: block;
  height: clamp(10px, 1.6vh, 22px);
  border-radius: 999px;
  background: linear-gradient(180deg, #c084fc, #6366f1);
  opacity: 0.85;
  animation: ledBobouEqPulse 1.1s ease-in-out infinite;
}

.ledBobouEqLeft {
  left: clamp(10px, 2vw, 28px);
}

.ledBobouEqRight {
  right: clamp(10px, 2vw, 28px);
}

.ledBobouEqLeft span:nth-child(odd),
.ledBobouEqRight span:nth-child(even) {
  animation-duration: 0.85s;
}

.ledBobouEq span:nth-child(1) { animation-delay: 0s; }
.ledBobouEq span:nth-child(2) { animation-delay: 0.08s; }
.ledBobouEq span:nth-child(3) { animation-delay: 0.16s; }
.ledBobouEq span:nth-child(4) { animation-delay: 0.24s; }
.ledBobouEq span:nth-child(5) { animation-delay: 0.32s; }
.ledBobouEq span:nth-child(6) { animation-delay: 0.4s; }
.ledBobouEq span:nth-child(7) { animation-delay: 0.48s; }
.ledBobouEq span:nth-child(8) { animation-delay: 0.56s; }
.ledBobouEq span:nth-child(9) { animation-delay: 0.64s; }
.ledBobouEq span:nth-child(10) { animation-delay: 0.72s; }

@keyframes ledBobouEqPulse {
  0%,
  100% {
    transform: scaleY(0.45);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.ledBobouContent {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vh, 24px);
  padding:
    clamp(48px, 7vh, 88px)
    clamp(72px, 10vw, 140px)
    clamp(24px, 4vh, 48px);
  text-align: center;
}

.ledBobouTagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: 0.28em;
}

.ledBobouTopBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
}

.ledBobouTopPill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 999px;
  color: #f5f3ff;
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(76, 29, 149, 0.35);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.18);
}

.ledBobouThanks {
  color: #fff;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1;
}

.ledBobouModeBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(4px, 1vh, 12px);
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(192, 132, 252, 0.55);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 800;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(126, 34, 206, 0.85), rgba(76, 29, 149, 0.92));
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.35);
}

.ledBobouModeIcon {
  font-size: 1.15em;
}

.ledBobouCountdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  color: #fef08a;
  font-size: 0.95em;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.45);
}

.ledBobouTable {
  margin: clamp(8px, 1.5vh, 18px) 0 0;
  color: transparent;
  font-size: clamp(56px, 10vw, 132px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fde68a 0%, #f59e0b 42%, #b45309 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 8px 18px rgba(245, 158, 11, 0.35));
}

.ledBobouSingerRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  width: min(92vw, 980px);
}

.ledBobouWave {
  flex: 1;
  max-width: clamp(80px, 14vw, 180px);
  height: clamp(18px, 2.2vh, 32px);
  background:
    repeating-linear-gradient(
      90deg,
      #38bdf8 0 6px,
      transparent 6px 10px
    );
  opacity: 0.85;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.ledBobouWaveRight {
  transform: scaleX(-1);
}

.ledBobouSinger {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 8px 32px rgba(59, 130, 246, 0.35);
}

.ledBobouSongCard {
  width: min(88vw, 920px);
  margin-top: clamp(8px, 1.5vh, 18px);
  padding: clamp(18px, 2.5vh, 28px) clamp(20px, 3vw, 36px);
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: clamp(18px, 2vw, 28px);
  background: rgba(15, 23, 42, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 50px rgba(2, 6, 23, 0.45);
}

.ledBobouSongTitle {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.ledBobouFooter {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.2fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding:
    clamp(14px, 2vh, 22px)
    clamp(18px, 3vw, 36px)
    max(clamp(14px, 2vh, 22px), var(--led-safe-bottom));
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(10px);
}

.ledBobouFooterBlock {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.ledBobouFooterLeft {
  justify-content: flex-start;
}

.ledBobouFooterCenter {
  justify-content: center;
  color: #fff;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 800;
  white-space: nowrap;
}

.ledBobouFooterRight {
  justify-content: flex-end;
  text-align: right;
}

.ledBobouFooterIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4vw, 56px);
  height: clamp(42px, 4vw, 56px);
  border-radius: 999px;
  font-size: clamp(18px, 2vw, 24px);
  background: rgba(30, 41, 59, 0.8);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

.ledBobouFooterLeft strong,
.ledBobouFooterLeft span,
.ledBobouFooterRight span {
  display: block;
}

.ledBobouFooterLeft strong,
.ledBobouFooterRight time {
  color: #fff;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ledBobouFooterLeft span,
.ledBobouFooterRight span {
  color: rgba(191, 219, 254, 0.88);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.08em;
}

.ledBobouFooterRight time {
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.04em;
}

body.ledAutoDjAnnounceActive .ledStandby,
body.ledAutoDjAnnounceActive .ledHeader,
body.ledAutoDjAnnounceActive .ledBottomBar,
body.ledAutoDjAnnounceActive .ledShade {
  display: none !important;
}

body.ledAutoDjAnnounceActive .ledVideoLayer {
  opacity: 0;
}

.ledSystemWordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(86px, 15vw, 230px);
  font-weight: 700;
  letter-spacing: -0.1em;
  line-height: 1;
  text-shadow:
    0 5px 0 rgba(255, 255, 255, 0.08),
    0 0 32px rgba(255, 255, 255, 0.2),
    0 0 90px rgba(37, 99, 235, 0.32);
}

.ledSystemWordmark::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: -4%;
  left: 10%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
  box-shadow: 0 0 22px rgba(96, 165, 250, 0.8);
}

.ledSystemWordmark span {
  color: #60a5fa;
  text-shadow:
    0 0 28px rgba(96, 165, 250, 0.65),
    0 0 90px rgba(37, 99, 235, 0.48);
}

.ledNow {
  position: relative;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(56vw, 760px);
  padding:
    clamp(6px, 0.75vh, 12px)
    clamp(12px, 1.4vw, 22px)
    clamp(6px, 0.75vh, 12px)
    0;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  background: #020617;
}

.ledNow > [hidden],
.ledNowMeta > [hidden],
.ledNowPrimary > [hidden] {
  display: none !important;
}

.ledNowMeta {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: clamp(3px, 0.4vh, 6px);
}

.ledNowPrimary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  min-width: 0;
}

.ledNowChip {
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(18px, 1.85vw, 32px);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-shadow: 0 4px 18px #000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ledNowSinger {
  flex: 1 1 auto;
  color: #fff;
}

.ledNowLive {
  flex: 0 0 auto;
  padding: 0.35rem 0.72rem;
  border: 1px solid rgba(248, 113, 113, 0.72);
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.78);
  color: #fff;
  letter-spacing: 0.14em;
  text-shadow: none;
  font-size: clamp(16px, 1.55vw, 26px);
}

.ledNowTable {
  flex: 0 0 auto;
}

.ledNowTableMeja {
  color: #facc15;
}

.ledNowTableMeta {
  color: #93c5fd;
}

.ledNowSong {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #fde68a;
  font-size: clamp(16px, 1.55vw, 28px);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-shadow: 0 4px 18px #000;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.ledNowSong[hidden] {
  display: none !important;
}

.ledBottomBar {
  position: fixed;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  min-height: var(--led-footer-height);
  overflow: hidden;
  contain: layout style;
  padding:
    clamp(6px, 0.8vh, 12px)
    var(--led-safe-right)
    var(--led-safe-bottom)
    var(--led-safe-left);
  border-top: 1px solid rgba(96, 165, 250, 0.3);
  background: #020617;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.32);
}

.ledFooterClock {
  display: grid;
  flex: 0 0 auto;
  align-content: center;
  justify-items: end;
  min-width: clamp(120px, 11vw, 180px);
  padding: clamp(4px, 0.55vh, 10px) clamp(6px, 0.8vw, 14px);
  border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.ledFooterClock time {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.ledScreen.ledFooterHasNow .ledFooterClock {
  min-width: clamp(132px, 12vw, 200px);
  padding: clamp(5px, 0.65vh, 12px) clamp(6px, 0.8vw, 14px);
}

.ledScreen.ledFooterHasNow .ledFooterClock time {
  font-size: clamp(24px, 2.4vw, 44px);
}

.ledTickerViewport {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

.ledScreen.ledFooterHasNow .ledTickerViewport {
  padding-left: clamp(8px, 1vw, 14px);
}

.ledNextList {
  display: flex;
  flex: 0 0 max-content;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.ledNextList.isSlide {
  display: block;
  position: relative;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100%;
  height: clamp(28px, 3.4vh, 46px);
  overflow: hidden;
  white-space: normal;
  animation: none;
}

.ledNextList.isSlide .ledSlideTrack {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  will-change: transform;
  transition: transform 0.45s ease;
}

.ledNextList.isSlide .ledSlideTrack.isSnap {
  transition: none;
}

.ledNextList.isSlide .ledSlideItem {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  box-sizing: border-box;
  width: 100%;
  height: clamp(28px, 3.4vh, 46px);
  min-width: 0;
  overflow: hidden;
  padding-right: 0.35rem;
  color: #e2e8f0;
  font-size: clamp(16px, 1.55vw, 28px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledNextList.isSlide .ledSlideItem.ledNextEmpty {
  justify-content: center;
  color: #93c5fd;
  font-weight: 900;
}

.ledNextList.isSlide .ledNextItem::after {
  display: none;
}

.ledNextList.isEmpty.isSlide {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  transform: none;
}

.ledNextItem {
  display: inline-flex;
  flex: 0 0 auto;
  gap: clamp(10px, 1vw, 16px);
  align-items: center;
  font-size: clamp(18px, 1.7vw, 30px);
}

.ledNextItem::after {
  content: "◆";
  margin-left: clamp(18px, 2vw, 34px);
  color: rgba(96, 165, 250, 0.5);
  font-size: 0.55em;
}

.ledNextNumber {
  color: rgba(147, 197, 253, 0.65);
  font-size: 1em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ledNextSinger {
  color: #fff;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ledNextTable {
  color: #facc15;
  font-size: 1em;
  font-weight: 700;
}

.ledNextPriority {
  color: #fde68a;
  font-size: 0.65em;
  font-weight: 900;
}

.ledNextSongCount {
  padding: 0.18em 0.45em;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.28);
  font-size: 0.58em;
  font-weight: 900;
  white-space: nowrap;
}

.ledNextEmpty {
  width: 100%;
  max-width: calc(100vw - var(--led-safe-left) - var(--led-safe-right) - 220px);
  padding: 0 clamp(10px, 1.2vw, 20px);
  color: #cbd5e1;
  font-size: clamp(16px, 1.55vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.ledActivateOverlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(circle at center, rgba(37, 99, 235, 0.24), transparent 45%),
    rgba(2, 6, 23, 0.96);
}

.ledActivateCard {
  width: min(100%, 540px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 28px;
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.ledActivateIcon {
  font-size: 54px;
}

.ledActivateCard h1 {
  margin: 0.45rem 0;
  font-size: clamp(30px, 5vw, 50px);
}

.ledActivateCard p {
  margin: 0.5rem 0 1.3rem;
  line-height: 1.6;
}

.ledActivateCard button {
  width: 100%;
  min-height: 58px;
  font-size: 17px;
}

.ledScreenLink {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.2);
}

@media (max-width: 900px) {
  .ledNow {
    max-width: 38vw;
    padding: 0 12px;
  }

  .ledFooterClock {
    min-width: 130px;
    padding: 0 12px;
  }

}

/* ===== Queue components ===== */
.queue-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: var(--card2);
}

.queue-item + .queue-item {
  margin-top: 0.65rem;
}

.queue-item--readonlyPlaying {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.06);
  opacity: 0.92;
}

/* ===== DJ queue density (desktop control room) ===== */
.djQueuePanel--now .djNowPlaying {
  overflow: visible;
  flex: 0 0 auto;
}

.djQueuePanel--now,
.djQueuePanel--next,
.fullQueuePanel {
  align-self: stretch;
  min-height: 0;
}

.queue-item--now {
  gap: 0.35rem;
  padding: 0.65rem 0.72rem;
}

.queue-item--compact {
  gap: 0.28rem;
  padding: 0.5rem 0.62rem;
}

.queue-item--compact + .queue-item--compact {
  margin-top: 0.45rem;
}

.queue-item--compact .queue-rowHeading {
  font-size: 12px;
}

.queue-item--compact .badge {
  padding: 0.12rem 0.4rem;
  font-size: 9px;
}

.queue-item--compact .badge.warn,
.queue-item--compact .badge.playing {
  display: none;
}

.djQueueSongLine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.34rem 0.48rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
}

.djQueueSongLine.is-live {
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(22, 163, 74, 0.12);
}

.djQueueSongPos {
  color: #93c5fd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.djQueueSongTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.djQueueSongLive {
  color: #86efac;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.djQueueScore {
  margin-top: -0.05rem;
  font-size: 10px;
}

.djNowControls {
  display: grid;
  gap: 0.38rem;
  margin-top: 0.1rem;
}

.btnRow--compact,
.btnRow--nowMain,
.btnRow--nowSub {
  display: grid;
  gap: 0.38rem;
}

.btnRow--compact {
  grid-template-columns: 1fr 1fr;
}

.btnRow--nowMain {
  grid-template-columns: 1fr 1fr;
}

.btnRow--nowSub {
  grid-template-columns: 1.15fr 1fr 0.85fr;
}

.btnRow--compact button,
.btnRow--nowMain button,
.btnRow--nowSub button {
  min-height: 34px;
  padding: 0.4rem 0.45rem;
  font-size: 11px;
  line-height: 1.15;
}

.djQueuePanel .sectionTitle {
  margin-bottom: 0.55rem;
}

.djQueuePanel .sectionTitle h2 {
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (min-width: 901px) and (min-height: 901px) {
  .djBoardGrid {
    --dj-compact-item: 5.35rem;
    --dj-compact-gap: 0.45rem;
    height: 100%;
    overflow: hidden;
  }

  .djScrollableList--next {
    max-height: calc(var(--dj-compact-item) * 5 + var(--dj-compact-gap) * 4);
    flex: 0 1 auto;
  }

  .djScrollableList--full {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .djQueuePanel--next,
  .fullQueuePanel {
    min-height: 0;
  }
}

/* Android car player / head unit: 7" 800×480 & 1024×600, 9–10.1" 1280×720 & 1280×800 */
html.car-player,
html.dj-head-unit {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.car-player,
html.car-player body,
html.dj-head-unit,
html.dj-head-unit body {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
}

html.car-player .djContainer,
html.dj-head-unit .djContainer {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  max-width: none;
  padding: 0.28rem 0.4rem 0.28rem;
  overflow: hidden;
  gap: 0.28rem;
}

html.car-player .djContainer > .topbar,
html.dj-head-unit .djContainer > .topbar {
  grid-row: 1;
}

html.car-player .djContainer > .planQuotaHeaderNotice,
html.dj-head-unit .djContainer > .planQuotaHeaderNotice {
  grid-row: 2;
}

html.car-player .djContainer > .djKpiSection,
html.dj-head-unit .djContainer > .djKpiSection {
  grid-row: 3;
}

html.car-player .djContainer > .djBoardGrid,
html.car-player .djContainer > .djSessionStatsPanel,
html.dj-head-unit .djContainer > .djBoardGrid,
html.dj-head-unit .djContainer > .djSessionStatsPanel {
  grid-row: 4;
  min-height: 0;
}

html.car-player .djContainer > .djClockFooter,
html.dj-head-unit .djContainer > .djClockFooter {
  grid-row: 5;
}

html.car-player .djContainer > .topbar,
html.car-player .djContainer > .djKpiSection,
html.car-player .djContainer > .djClockFooter,
html.dj-head-unit .djContainer > .topbar,
html.dj-head-unit .djContainer > .djKpiSection,
html.dj-head-unit .djContainer > .djClockFooter {
  margin: 0;
}

html.car-player .djContainer > .topbar.djUnifiedHeader,
html.dj-head-unit .djContainer > .topbar.djUnifiedHeader {
  position: static;
  top: auto;
  margin: 0;
}

html.car-player .djUnifiedHeader,
html.dj-head-unit .djUnifiedHeader {
  flex-wrap: wrap;
  align-items: center;
  padding: 0.35rem 0.45rem;
  row-gap: 0.28rem;
}

html.car-player .djHeaderCopy .companyBrandText span,
html.dj-head-unit .djHeaderCopy .companyBrandText span {
  display: none;
}

html.car-player .djHeaderCopy .systemOfficialIcon,
html.car-player .djHeaderCopy .djCompanyLogo,
html.dj-head-unit .djHeaderCopy .systemOfficialIcon,
html.dj-head-unit .djHeaderCopy .djCompanyLogo {
  width: 28px;
  height: 28px;
}

html.car-player .djUnifiedHeader .nav,
html.dj-head-unit .djUnifiedHeader .nav {
  flex: 1 1 auto;
  width: auto;
  justify-content: flex-start;
  gap: 0.28rem;
}

html.car-player .djSessionControl,
html.dj-head-unit .djSessionControl {
  width: auto;
  flex: 1 1 auto;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 0.22rem;
  gap: 0.28rem;
}

html.car-player .djSessionControl button,
html.car-player .djUnifiedHeader .nav > a.pill,
html.car-player .djUnifiedHeader .nav .pill,
html.car-player .djUnifiedHeader .nav > form,
html.dj-head-unit .djSessionControl button,
html.dj-head-unit .djUnifiedHeader .nav > a.pill,
html.dj-head-unit .djUnifiedHeader .nav .pill,
html.dj-head-unit .djUnifiedHeader .nav > form {
  flex: 1 1 calc(25% - 0.28rem);
  min-width: 6.4rem;
}

html.car-player .djUnifiedHeader .nav > a.pill,
html.car-player .djUnifiedHeader .nav .pill,
html.car-player .djSessionControl button,
html.dj-head-unit .djUnifiedHeader .nav > a.pill,
html.dj-head-unit .djUnifiedHeader .nav .pill,
html.dj-head-unit .djSessionControl button {
  min-height: 38px;
  justify-content: center;
  text-align: center;
  padding: 0.28rem 0.4rem;
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
}

html.car-player #djAutoDjToggle,
html.car-player #djAutoDjModeToggle,
html.dj-head-unit #djAutoDjToggle,
html.dj-head-unit #djAutoDjModeToggle {
  min-height: 40px;
  font-size: 12px;
  font-weight: 800;
}

html.car-player .djUnifiedHeader .navLabelShort,
html.dj-head-unit .djUnifiedHeader .navLabelShort {
  display: inline;
}

html.car-player .djUnifiedHeader .navLabelFull,
html.dj-head-unit .djUnifiedHeader .navLabelFull {
  display: none;
}

html.car-player .djKpiSection,
html.dj-head-unit .djKpiSection {
  gap: 0.25rem;
  padding: 0;
  min-width: 0;
}

html.car-player .djKpiGrid,
html.dj-head-unit .djKpiGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.28rem;
}

html.car-player .djKpiCard,
html.dj-head-unit .djKpiCard {
  min-height: 0;
  padding: 0.28rem 0.4rem;
}

html.car-player .djKpiCard .label,
html.dj-head-unit .djKpiCard .label {
  font-size: 9px;
  line-height: 1.15;
}

html.car-player .kpiCard.djKpiCard .value,
html.dj-head-unit .kpiCard.djKpiCard .value {
  margin-top: 0.08rem;
  font-size: clamp(16px, 1.8vw, 22px);
}

html.car-player .djKpiCard small,
html.dj-head-unit .djKpiCard small {
  display: none;
}

html.car-player .djBoardGrid,
html.dj-head-unit .djBoardGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  min-height: 0;
  height: auto;
  overflow: hidden;
}

html.car-player .djQueuePanel,
html.dj-head-unit .djQueuePanel {
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

html.car-player .djScrollableList,
html.car-player .djNowPlaying,
html.car-player .djScrollableList--full,
html.dj-head-unit .djScrollableList,
html.dj-head-unit .djNowPlaying,
html.dj-head-unit .djScrollableList--full {
  max-height: none;
  min-height: 0;
  overflow-y: auto;
}

.djLedOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: #020617;
}

.djLedOverlay[hidden] {
  display: none !important;
}

.djLedOverlay.is-mini {
  inset: auto 0.45rem 0.45rem auto;
  width: min(280px, 46vw);
  height: 158px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  overflow: hidden;
  z-index: 81;
  cursor: pointer;
}

.djLedOverlayBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0.25rem 0.4rem;
  background: #0b1220;
  color: #e2e8f0;
}

.djKaraokeOverlayLabel {
  min-width: 0;
  padding: 0 0.35rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #93c5fd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.djLedOverlayBarActions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.djLedIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.djLedIconBtn svg {
  width: 18px;
  height: 18px;
}

.djLedPowerOff {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}

.djLedMinimize {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
}

.djLedOverlay.is-mini .djLedMinimize {
  display: none;
}

.djKaraokePlayPause {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(202, 138, 4, 0.2);
  color: #fde68a;
}

body.djKaraokeMini .djContainer {
  padding-bottom: 7.5rem;
}

@media (max-width: 430px) {
  .nav .djKaraokePresentToggle {
    display: none !important;
  }

  .nav .djKaraokeToggle {
    padding: 0.5rem 0.55rem;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  body.djKaraokePlayer .djLedOverlay.is-mini {
    inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto;
    width: min(168px, 44vw);
    height: 118px;
    border-radius: 10px;
  }

  body.djKaraokePresent .djLedOverlay:not(.is-mini) {
    inset: 0;
  }

  body.djKaraokePresent .djLedOverlayBar {
    min-height: 36px;
  }
}

.djLedFrame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  border: 0;
  background: #000;
}

.nav .djLedScreenToggle.is-on {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
}

.djLedConfirmDialog {
  width: min(calc(100% - 1.5rem), 26rem);
  padding: 0;
  border: none;
  color: var(--text);
  background: transparent;
}

.planQuotaFab {
  position: fixed;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.96);
  color: #e2e8f0;
  cursor: pointer;
}

/* DJ dashboard: sit beside session QR in clock footer */
.planQuotaFab.planQuotaFab--djFooter {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 2;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

.planQuotaFab.planQuotaFab--djFooter[hidden] {
  display: none !important;
}

.planQuotaFab:hover {
  border-color: rgba(147, 197, 253, 0.55);
  color: #fff;
}

.planQuotaFab.isLimited {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.92);
  color: #fecaca;
}

.planQuotaFab.isActive,
.planQuotaFab.isPaid {
  border-color: rgba(74, 222, 128, 0.55);
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.95), rgba(21, 128, 61, 0.98));
  color: #dcfce7;
}

.planQuotaFab.isDueSoon {
  --plan-due-urgency: 0.35;
  border-color: color-mix(
    in srgb,
    #f59e0b calc((1 - var(--plan-due-urgency)) * 100%),
    #7f1d1d calc(var(--plan-due-urgency) * 100%)
  );
  background: color-mix(
    in srgb,
    rgba(146, 64, 14, 0.94) calc((1 - var(--plan-due-urgency)) * 100%),
    rgba(127, 29, 29, 0.98) calc(var(--plan-due-urgency) * 100%)
  );
  color: color-mix(
    in srgb,
    #ffedd5 calc((1 - var(--plan-due-urgency)) * 100%),
    #fecaca calc(var(--plan-due-urgency) * 100%)
  );
}

.planQuotaFab.isDueCritical,
.planQuotaFab.isOverdue,
.planQuotaFab.isPay {
  border-color: rgba(248, 113, 113, 0.65);
  background: linear-gradient(145deg, rgba(153, 27, 27, 0.96), rgba(127, 29, 29, 0.98));
  color: #fecaca;
}

.planQuotaFabIcon {
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.planQuotaFabBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.planQuotaFab.isPaid .planQuotaFabBadge {
  background: #16a34a;
}

.planQuotaFab.isPay .planQuotaFabIcon,
.planQuotaFab.isDueSoon .planQuotaFabIcon,
.planQuotaFab.isOverdue .planQuotaFabIcon {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.planQuotaHeaderNotice {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(120, 53, 15, 0.55);
  color: #fde68a;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
}

.planQuotaHeaderNotice[data-tone="critical"] {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(127, 29, 29, 0.55);
  color: #fecaca;
}

.planQuotaHeaderNotice[hidden] {
  display: none !important;
}

/* Hide legacy long package strips + old separate RM FAB */
.planQuotaFooter,
.planQuotaBanner,
.planQuotaPayIcon {
  display: none !important;
}

.planQuotaOpenPackages,
.planQuotaPkgBtn {
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(51, 65, 85, 0.95);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.planQuotaPkgBtnFree {
  background: rgba(37, 99, 235, 0.85);
  border-color: transparent;
}

.planQuotaPkgBtnPaid {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-color: transparent;
}

.planQuotaPayIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(120, 53, 15, 0.55);
  color: #fde68a;
  cursor: pointer;
}

.planQuotaPayGlyph {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.planQuotaModal {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  place-items: center;
  padding: 0.65rem;
  background: rgba(2, 6, 23, 0.78);
}

.planQuotaModalCard {
  width: min(100%, 760px);
  max-height: min(96dvh, 900px);
  overflow: visible;
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #111827;
}

.planQuotaModalCard h2 {
  margin: 0 0 0.25rem;
  font-size: 17px;
}

.planQuotaModalCard > p {
  margin: 0 0 0.7rem;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}

.planQuotaWinBack {
  color: #fecaca !important;
}

.planQuotaRenewSoon {
  color: #fde68a !important;
}

.planQuotaSetupFee {
  color: #93c5fd !important;
}

.superAdminPlanQuotaPanel {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.superAdminPlanQuotaMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.superAdminPlanQuotaPrimary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.superAdminPlanQuotaPrimary .superAdminPlanQuotaBtn {
  min-height: 34px;
  padding: 0.35rem 0.6rem;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
}

.superAdminPlanQuotaMore {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.35);
  padding: 0.15rem 0.45rem 0.35rem;
}

.superAdminPlanQuotaMore > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.1rem;
}

.superAdminPlanQuotaMore > summary::-webkit-details-marker {
  display: none;
}

.superAdminPlanQuotaMore > summary::before {
  content: "▸ ";
  color: #64748b;
}

.superAdminPlanQuotaMore[open] > summary::before {
  content: "▾ ";
}

.superAdminPlanQuotaMoreBody {
  display: grid;
  gap: 0.55rem;
  padding: 0.15rem 0 0.2rem;
}

.superAdminPlanQuotaGroup {
  display: grid;
  gap: 0.25rem;
}

.superAdminPlanQuotaGroupLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
}

.superAdminPlanQuotaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.superAdminPlanQuotaActions .superAdminPlanQuotaBtn {
  min-height: 30px;
  padding: 0.22rem 0.5rem;
  font-size: 11px;
}

.planQuotaPackageList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.planQuotaPackage {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 0.2rem;
  min-height: 0;
  padding: 0.55rem 0.65rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.65);
}

.planQuotaPackage.isCurrent {
  border-color: rgba(96, 165, 250, 0.55);
}

.planQuotaPackageHead {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  align-items: baseline;
}

.planQuotaPackageHead strong {
  font-size: 13px;
}

.planQuotaPackageHead span {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.planQuotaPackage p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #e2e8f0;
}

.planQuotaPackage small {
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.3;
}

.planQuotaPackage .planQuotaPkgBtn {
  align-self: end;
  width: 100%;
  margin-top: 0.35rem;
  min-height: 34px;
  font-size: 12px;
}

.planQuotaPackage--wide {
  grid-column: 1 / -1;
}

.planQuotaModalClose {
  width: 100%;
  margin-top: 0.7rem;
  min-height: 38px;
}

.planQuotaModalStatus {
  margin: 0.55rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(30, 58, 138, 0.35);
  color: #bfdbfe;
  font-size: 12px;
  line-height: 1.35;
}

.planQuotaModalStatus[data-kind="error"] {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
}

.planQuotaModalStatus[data-kind="loading"] {
  border-color: rgba(250, 204, 21, 0.35);
  background: rgba(113, 63, 18, 0.35);
  color: #fde68a;
}

.planQuotaModalCard--pay {
  width: min(100%, 400px);
  padding: 1rem 1.05rem 1.05rem;
}

.planQuotaPayHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.planQuotaPayHeaderText h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

.planQuotaPayEyebrow {
  margin: 0 0 0.15rem;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.planQuotaPayAmount {
  margin: 0.1rem 0 0.55rem;
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
}

.planQuotaPayLines {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.72);
}

.planQuotaPayLine {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.35;
}

.planQuotaPayLine strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.planQuotaPayBreakdown,
.planQuotaPayHint {
  margin: 0 0 0.75rem;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.45;
}

.planQuotaPayHint {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
}

.planQuotaPayChooseOne {
  margin: 0 0 0.55rem;
  text-align: center;
  color: #fde68a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.planQuotaPayTabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}

.planQuotaPayTab {
  min-height: 36px;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.planQuotaPayTab:hover {
  border-color: rgba(96, 165, 250, 0.45);
  color: #f8fafc;
}

.planQuotaPayTab.isActive {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(30, 64, 175, 0.35);
  color: #f8fafc;
}

.planQuotaPayTabPanels {
  display: grid;
}

.planQuotaPayTabPanel[hidden] {
  display: none !important;
}

.planQuotaPayQrWrap--manual {
  border-color: rgba(244, 114, 182, 0.35);
}

.planQuotaPayQr--manual {
  object-fit: contain;
}

.planQuotaPayHint--pending {
  color: #fde68a;
}

.planQuotaPayQrWrap {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin: 0.15rem auto 0.7rem;
  padding: 0.85rem 0.85rem 1rem;
  width: fit-content;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.35);
}

.planQuotaPayMerchant {
  margin: 0;
  max-width: 220px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #0f172a;
  text-transform: uppercase;
}

.planQuotaPayQr {
  width: 220px;
  height: 220px;
  display: block;
}

.planQuotaPayActions {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}

.planQuotaPayIconBtn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.95);
  color: #e2e8f0;
  cursor: pointer;
}

.planQuotaPayIconBtn:hover {
  background: rgba(51, 65, 85, 0.98);
  color: #fff;
}

.planQuotaPayIconBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.planQuotaPayCopyBtn.isCopied {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(6, 78, 59, 0.85);
  color: #a7f3d0;
}

.planQuotaPayCloseBtn {
  flex: 0 0 auto;
}

.planQuotaPayPrimary {
  display: grid;
  gap: 0.35rem;
  margin: 0.4rem 0 0.7rem;
  padding: 0.75rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.65);
}

.planQuotaPayPrimary strong {
  font-size: 15px;
}

.planQuotaPayPrimary span {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
}

.planQuotaPayPrimary p {
  margin: 0;
  color: #e2e8f0;
  font-size: 12px;
}

.planQuotaPayPrimaryBtn {
  margin-top: 0.35rem;
  width: 100%;
  min-height: 42px;
}

.planQuotaMorePackages {
  margin: 0.35rem 0 0.7rem;
  color: #94a3b8;
  font-size: 12px;
}

.planQuotaMorePackages summary {
  cursor: pointer;
  margin-bottom: 0.4rem;
}

.planQuotaMorePackages .planQuotaPkgBtn {
  width: 100%;
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .planQuotaModalCard {
    width: min(100%, 420px);
    max-height: 94dvh;
    overflow: auto;
  }

  .planQuotaPackageList {
    grid-template-columns: 1fr;
  }

  .planQuotaPackage--wide {
    grid-column: auto;
  }
}

body.planQuotaModalOpen {
  overflow: hidden;
}

.djLedConfirmDialog::backdrop {
  background: rgba(2, 6, 23, 0.78);
}

.djLedConfirmPanel {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.05rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: #111827;
}

.djLedConfirmPanel strong {
  font-size: 15px;
}

.djLedConfirmPanel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #cbd5e1;
}

.djLedConfirmWarn {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fecaca !important;
  font-weight: 600;
}

.djLedConfirmActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.djLedConfirmActions button {
  min-height: 40px;
}

.djLedConfirmProceed {
  background: rgba(37, 99, 235, 0.22);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: #dbeafe;
}

body.ledEmbed {
  overflow: hidden;
}

body.ledEmbed .ledActivateOverlay {
  padding: 0.45rem;
}

body.ledEmbed .ledActivateCard {
  width: min(100%, 420px);
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
}

body.ledEmbed .ledActivateIcon {
  font-size: 28px;
}

body.ledEmbed .ledActivateCard h1 {
  margin: 0.2rem 0 0.25rem;
  font-size: 16px;
}

body.ledEmbed .ledActivateCard p {
  margin: 0 0 0.65rem;
  font-size: 12px;
  line-height: 1.35;
}

body.ledEmbed .ledActivateCard button.ledActivatePlay {
  width: 72px;
  height: 72px;
  min-height: 72px;
  margin: 0.15rem auto 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0;
}

body.ledEmbed .ledActivateCard button.ledActivatePlay svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

body.ledKaraoke .ledActivateCard button.ledActivateKaraoke {
  width: auto;
  min-width: 12rem;
  max-width: calc(100% - 1rem);
  height: auto;
  min-height: 48px;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

body.ledKaraoke .ledActivateCard button.ledActivateKaraoke svg {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
}

html.car-player .btnRow--compact button,
html.car-player .btnRow--nowMain button,
html.car-player .btnRow--nowSub button,
html.dj-head-unit .btnRow--compact button,
html.dj-head-unit .btnRow--nowMain button,
html.dj-head-unit .btnRow--nowSub button {
  min-height: 36px;
  font-size: 11px;
}

html.car-player .djClockFooter,
html.dj-head-unit .djClockFooter {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.3rem;
  margin: 0;
  padding: 0.22rem 0.5rem;
  min-height: 0;
}

html.car-player .djFooterSongCountdown,
html.dj-head-unit .djFooterSongCountdown {
  font-size: clamp(16px, 2.8vw, 24px);
}

html.car-player .djClockFooter time,
html.dj-head-unit .djClockFooter time {
  font-size: clamp(15px, 2.4vw, 22px);
}

html.car-player .djSessionQrThumb,
html.dj-head-unit .djSessionQrThumb {
  width: 36px;
  height: 36px;
}

/* Side-by-side QR dialog: short landscape / head-unit only — NOT phone portrait */
@media (max-height: 800px) and (min-width: 720px) {
  .djSessionQrDialog {
    width: calc(100% - 0.7rem);
    max-width: 980px;
    max-height: calc(100dvh - 0.5rem);
    border-radius: 14px;
  }

  .djSessionQrDialogShell {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0.65rem 0.55rem;
    max-height: calc(100dvh - 0.5rem);
  }

  .djSessionQrDialogHeader {
    grid-column: 2;
    grid-row: 1;
  }

  .djSessionQrDialogHint {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.35;
  }

  .djSessionQrPreviewWrap {
    grid-column: 1;
    grid-row: 1 / 4;
    min-height: 0;
    height: 100%;
    padding: 0.3rem;
  }

  .djSessionQrPreview,
  .djSessionQrPreview .qrPrintCard {
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .djSessionQrPreview .qrPosterSteps,
  .djSessionQrPreview .qrPosterFooter {
    display: none;
  }

  .djSessionQrPreview .qrPosterHeroTitle {
    font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  }

  .djSessionQrPreview .qrPosterQrFrame {
    width: min(100%, 46vh, 280px);
    max-width: none;
    margin-bottom: 0.2rem;
  }

  .djSessionQrStatus {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
  }

  .djSessionQrDialogActions {
    grid-column: 2;
    grid-row: 3;
    gap: 0.35rem;
  }

  .djSessionQrDialogActions button {
    flex: 1 1 auto;
    min-height: 40px;
  }
}

/* Phone / narrow browsers: single-column, no overlap */
@media (max-width: 640px) {
  .djSessionQrDialog {
    width: calc(100% - 1rem);
    max-width: 100%;
    max-height: calc(100dvh - 1rem);
    margin: auto;
    border-radius: 16px;
  }

  .djSessionQrDialogShell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 0.85rem 0.95rem;
    max-height: calc(100dvh - 1rem);
    overflow: auto;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .djSessionQrDialogHeader,
  .djSessionQrPreviewWrap,
  .djSessionQrStatus,
  .djSessionQrDialogActions {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .djSessionQrDialogHeading {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .djSessionQrDialogHeader h2 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .djSessionQrAutoHide {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .djSessionQrDialogHint {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: 12px;
    line-height: 1.45;
  }

  .djSessionQrPreviewWrap {
    padding: 0.45rem;
    overflow: hidden;
  }

  .djSessionQrPreview {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .djSessionQrPreview .qrPrintCard {
    width: 100%;
    max-width: 320px;
    max-height: none;
    height: auto;
    aspect-ratio: 210 / 297;
    margin: 0 auto;
  }

  .djSessionQrPreview .qrPosterSteps {
    display: none;
  }

  .djSessionQrPreview .qrPosterFooter {
    display: none;
  }

  .djSessionQrPreview .qrPosterHeroTitle {
    font-size: clamp(0.95rem, 5vw, 1.2rem);
  }

  .djSessionQrPreview .qrPosterQrFrame {
    width: min(100%, 58vw, 220px);
    max-width: none;
    margin-inline: auto;
    margin-bottom: 0.35rem;
  }

  .djSessionQrDialogActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    position: sticky;
    bottom: 0;
    padding-top: 0.15rem;
    background: linear-gradient(180deg, transparent, #0f172a 28%);
  }

  .djSessionQrDialogActions button {
    width: 100%;
    min-height: 44px;
  }
}

html.car-player[data-car-player="short"] .djSessionControl button,
html.car-player[data-car-player="short"] .djUnifiedHeader .nav > a.pill,
html.car-player[data-car-player="short"] .djUnifiedHeader .nav .pill,
html.car-player[data-car-player="short"] .djUnifiedHeader .nav > form {
  flex: 1 1 calc(50% - 0.3rem);
  min-width: 0;
}

html.car-player[data-car-player="short"] .djKpiGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

html.car-player[data-car-player="short"] .djKpiCard small {
  display: none;
}

html.car-player[data-car-player="short"] .djBoardGrid {
  grid-template-columns: 1fr;
}

html.car-player[data-car-player="short"] .djQueuePanel {
  min-height: 0;
}

html.car-player[data-car-player="short"] .djScrollableList,
html.car-player[data-car-player="short"] .djNowPlaying,
html.car-player[data-car-player="short"] .djScrollableList--full {
  max-height: none;
}

html.car-player[data-car-player="wide"] .djBoardGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.car-player[data-car-player="wide"] .djScrollableList,
html.car-player[data-car-player="wide"] .djNowPlaying,
html.car-player[data-car-player="wide"] .djScrollableList--full {
  max-height: none;
}

html.car-player .tenantLoginShell {
  min-height: 100dvh;
  padding: 0.55rem;
  gap: 0.55rem;
}

html.car-player .tenantLoginCard {
  width: min(100%, 720px);
  padding: 0.9rem 1rem;
  gap: 0.7rem;
  border-radius: 18px;
}

html.car-player .loginOfficialIcon {
  width: 52px;
  height: 52px;
  margin-bottom: 0.3rem;
  border-radius: 14px;
}

html.car-player .tenantLoginCard h1 {
  font-size: 1.25rem;
}

html.car-player .tenantLoginForm input,
html.car-player .tenantLoginForm button {
  min-height: 48px;
  font-size: 16px;
}

html.car-player[data-car-player="short"] .tenantLoginForm {
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

html.car-player[data-car-player="short"] .tenantLoginForm button {
  grid-column: 1 / -1;
}

html.car-player .customerApp {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.car-player .customerShell {
  width: min(100%, 880px);
}

/* Staff manual request is a desktop workflow — never letterbox like car head-unit. */
html.car-player body.manualDjMode .customerShell,
body.manualDjMode .customerShell {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

html.car-player .customerMainTab,
html.car-player #submitTurn,
html.car-player #saveIdentity,
html.car-player #searchSong {
  min-height: 48px;
}

/* ===== Tenant authentication and accounts ===== */
.tenantLoginPage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.25), transparent 42%),
    #070b14;
}

.tenantLoginShell {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.tenantLoginCard {
  display: grid;
  width: min(100%, 460px);
  gap: 1.2rem;
  padding: clamp(1.4rem, 5vw, 2.2rem);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 26px;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
}

.tenantLoginBrand {
  display: grid;
  justify-items: start;
}

.loginOfficialIcon {
  width: 82px;
  height: 82px;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(96, 165, 250, 0.34);
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 16px 42px rgba(59, 130, 246, 0.25);
}

.loginPremiseLogo {
  padding: 0.25rem;
  background: rgba(2, 6, 23, 0.82);
  object-fit: contain;
}

.tenantLoginBrand strong {
  font-size: 32px;
  letter-spacing: -0.08em;
}

.tenantLoginBrand strong span {
  color: #60a5fa;
}

.tenantLoginBrand small,
.tenantLoginCard p {
  color: var(--muted);
}

.tenantLoginLabel {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.tenantLoginLabel.premiseType.pa_system {
  color: #fde68a;
}

.tenantLoginLabel.premiseType.personal {
  color: #fbcfe8;
}

.tenantLoginLabel.premiseType.demo {
  color: #99f6e4;
}

.tenantLoginLabel.premiseType.organization {
  color: #c4b5fd;
}

.tenantLoginCard h1 {
  margin: 0.25rem 0;
}

.tenantLoginCard p {
  margin: 0;
}

.tenantLoginForm {
  display: grid;
  gap: 0.85rem;
}

.tenantLoginError {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(248, 113, 113, 0.38);
  border-radius: 12px;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.2);
  font-size: 13px;
}

.tenantLoginPending {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 12px;
  color: #fde68a;
  background: rgba(120, 53, 15, 0.24);
  font-size: 13px;
  line-height: 1.45;
}

.tenantCustomerLink {
  color: #93c5fd;
  text-align: center;
}

.tenantLoginFooter {
  width: min(100%, 460px);
  color: #64748b;
  font-size: 10px;
  text-align: center;
}

.tenantLoginFooter a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tenantLoginFooter a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

.tenantRegisterPage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.12), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(124, 58, 237, 0.14), transparent 32rem),
    linear-gradient(180deg, #050811 0%, #070b14 48%, #050811 100%);
}

.tenantRegisterShell {
  width: min(100% - 2rem, 1120px);
  margin: 0 auto;
  padding: 1.25rem 0 2.5rem;
}

.tenantRegisterTopbar,
.tenantFindHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0 1.35rem;
}

.tenantRegisterBrand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.tenantRegisterBrand img {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  border: 1px solid rgba(96, 165, 250, 0.32);
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.18);
}

.tenantRegisterBrand strong {
  display: block;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -0.07em;
}

.tenantRegisterBrand strong span {
  color: #60a5fa;
}

.tenantRegisterBrand small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tenantRegisterNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
}

.tenantRegisterNav a {
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tenantRegisterNav a:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(37, 99, 235, 0.18);
  color: #eff6ff;
}

.tenantRegisterGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.tenantRegisterIntro {
  padding: 0.75rem 0 0;
}

.tenantRegisterEyebrow {
  display: inline-flex;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.1);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.tenantRegisterIntro h1 {
  margin: 1rem 0 0.85rem;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.tenantRegisterIntro p {
  margin: 0;
  color: #94a3b8;
  max-width: 36rem;
  line-height: 1.65;
  font-size: 15px;
}

.tenantRegisterHighlights {
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.72rem;
}

.tenantRegisterHighlights li {
  position: relative;
  padding-left: 1.45rem;
  color: #dbeafe;
  font-size: 14px;
  line-height: 1.45;
}

.tenantRegisterHighlights li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #34d399;
  font-weight: 900;
}

.tenantRegisterIntroLinks {
  margin-top: 1.35rem;
}

.tenantRegisterIntroLinks a {
  color: #93c5fd;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.tenantRegisterIntroLinks a:hover {
  color: #dbeafe;
  text-decoration: underline;
}

.tenantRegisterCard {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.78));
  box-shadow:
    0 24px 60px rgba(2, 6, 23, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 1.35rem 1.35rem 1.45rem;
}

.tenantRegisterCardHead h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.tenantRegisterCardHead p {
  margin: 0.4rem 0 1.1rem;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

.tenantRegisterForm {
  display: grid;
  gap: 0.75rem;
}

.tenantRegisterForm label {
  display: grid;
  gap: 0.38rem;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.01em;
}

.tenantRegisterForm input,
.tenantRegisterForm select,
.tenantRegisterForm button {
  margin: 0;
}

.tenantRegisterForm input,
.tenantRegisterForm select {
  width: 100%;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.55);
  color: #f8fafc;
  padding: 0.72rem 0.85rem;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tenantRegisterForm input:focus,
.tenantRegisterForm select:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.tenantRegisterForm small {
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.tenantRegisterPremiseHint {
  display: block;
  margin-top: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: #94a3b8;
  font-size: var(--font-xs);
  line-height: 1.5;
}

.tenantRegisterPremiseHint[hidden] {
  display: none !important;
}

.tenantRegisterFullField {
  grid-column: 1 / -1;
}

.tenantRegisterContactFieldset {
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  padding: 0.85rem 0.9rem 0.95rem;
  margin: 0;
  background: rgba(15, 23, 42, 0.35);
}

.tenantRegisterContactFieldset legend {
  padding: 0 0.35rem;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
}

.tenantRegisterContactHint {
  margin: 0 0 0.75rem;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}

.tenantRegisterSplit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tenantRegisterForm button[type="submit"] {
  margin-top: 0.1rem;
}

.tenantRegisterForm button {
  grid-column: 1 / -1;
  border: none;
  border-radius: 14px;
  padding: 0.95rem 1rem;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.tenantRegisterForm button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.34);
}

.tenantRegisterForm button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.tenantRegisterHoneypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tenantRegisterTurnstile {
  display: flex;
  justify-content: center;
  min-height: 0;
  margin: 0.1rem 0 0;
}

.tenantRegisterTurnstile:not([hidden]) {
  min-height: 65px;
}

.tenantRegisterTurnstile[hidden] {
  display: none !important;
}

.tenantRegisterMessage {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  font-size: 13px;
}

.tenantRegisterMessage[hidden],
.tenantRegisterSuccess[hidden],
.tenantRegisterForm[hidden] {
  display: none !important;
}

.tenantRegisterMessage.isError {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.28);
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.tenantRegisterMessage.isSuccess {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.28);
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.tenantRegisterSuccess {
  display: grid;
  gap: 0.75rem;
  padding: 0.35rem 0 0.15rem;
  text-align: center;
}

.tenantRegisterSuccessIcon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20, 83, 45, 0.28);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #86efac;
  font-size: 24px;
  font-weight: 900;
}

.tenantRegisterSuccess strong {
  font-size: 20px;
  color: #86efac;
}

.tenantRegisterSuccess p {
  margin: 0;
  color: #94a3b8;
  line-height: 1.55;
  font-size: 14px;
}

.tenantRegisterLoginLink {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.45);
  color: #dbeafe;
  font-weight: 800;
  text-decoration: none;
}

.tenantRegisterFooter {
  margin-top: 1.75rem;
  text-align: center;
}

.tenantRegisterFooter a {
  color: #64748b;
  font-size: 12px;
  text-decoration: none;
}

.tenantRegisterForm--simple {
  gap: 0.85rem;
}

.tenantRegisterSplit--simple {
  grid-template-columns: 1fr;
}

.tenantRegisterFootnote {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.tenantFindPage .tenantLandingHeader {
  justify-content: space-between;
}

.tenantFindPage .tenantLandingShell {
  width: min(100% - 2rem, 1080px);
}

@media (max-width: 860px) {
  .tenantRegisterGrid {
    grid-template-columns: 1fr;
  }

  .tenantRegisterSplit {
    grid-template-columns: 1fr;
  }

  .tenantRegisterTopbar,
  .tenantFindHeader {
    flex-direction: column;
    align-items: flex-start;
  }

  .tenantRegisterNav {
    width: 100%;
    justify-content: flex-start;
  }
}

.tenantAccountsCard,
.adminAccountsCard {
  margin-top: 1rem;
}

.adminAccountsLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.adminAccountsMain {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.adminPanelHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.adminPanelHeading h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
}

.adminCountBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
}

.adminEmptyState {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.adminSubPanel {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.42);
}

.adminSubPanelHead h3 {
  margin: 0;
  font-size: 16px;
}

.adminSubPanelHead p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.adminStaffFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.adminStaffFormPassword {
  grid-column: 1 / -1;
}

.adminStaffForm label,
.adminPasswordForm label {
  margin: 0;
}

.adminStaffForm input,
.adminStaffForm select,
.adminPasswordForm input {
  min-height: 46px;
  margin-bottom: 0;
}

.adminFieldHint {
  display: block;
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
}

.adminSubPanelActions {
  display: flex;
  justify-content: flex-end;
}

.adminSubPanelActions button {
  min-width: 180px;
  min-height: 46px;
}

.adminSecurityPanel {
  position: sticky;
  top: 0.85rem;
}

.adminSecurityPanelInner {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(76, 29, 149, 0.16), rgba(15, 23, 42, 0.55));
}

.adminSecurityEyebrow {
  display: inline-block;
  color: #c4b5fd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.adminSecurityPanelInner h3 {
  margin: 0;
  font-size: 18px;
}

.adminSecurityUser {
  margin: 0;
  color: #cbd5e1;
  font-size: 13px;
}

.adminSecurityUser strong {
  color: #f8fafc;
}

.adminSecurityNote {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.adminPasswordForm {
  display: grid;
  gap: 0.75rem;
}

.adminPasswordForm button {
  min-height: 46px;
  margin-top: 0.15rem;
}

.adminFormMessage {
  margin: 0;
  min-height: 0;
  font-size: 12px;
  line-height: 1.45;
}

.adminFormMessage:not(:empty) {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
}

.adminFormMessage--success:not(:empty) {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(134, 239, 172, 0.28);
}

.adminFormMessage--error:not(:empty) {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(254, 202, 202, 0.28);
}

.adminDialog {
  width: min(calc(100% - 2rem), 440px);
  padding: 0;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 18px;
  color: var(--text);
  background: #0f172a;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.7);
}

.adminDialog::backdrop {
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(5px);
}

.adminDialog form {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
}

.adminDialogHead h2 {
  margin: 0.25rem 0 0;
  font-size: 22px;
}

.adminDialogActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.adminSetupLauncher {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.55);
  color: #fecaca;
  cursor: pointer;
  flex-shrink: 0;
}

.adminSetupLauncher svg {
  width: 1.15rem;
  height: 1.15rem;
}

.adminSetupLauncher.is-incomplete {
  animation: adminSetupPulse 1.8s ease-in-out infinite;
}

.adminSetupLauncherCount {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

@keyframes adminSetupPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
  }
}

.adminSetupDialog {
  width: min(calc(100% - 1.25rem), 560px);
  max-height: min(92vh, 760px);
  overflow: auto;
  padding: 0;
}

.adminSetupDialogInner {
  display: grid;
  gap: 0.95rem;
  padding: 1.15rem 1.15rem 1.25rem;
}

.adminSetupEyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
}

.adminSetupProgress {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: #cbd5e1;
}

.adminSetupList {
  display: grid;
  gap: 0.55rem;
}

.adminSetupItem {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: 0.7rem;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
  color: inherit;
  cursor: pointer;
}

.adminSetupItem:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 41, 59, 0.9);
}

.adminSetupItem.is-done {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(6, 78, 59, 0.22);
}

.adminSetupItemCheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  font-size: 0.78rem;
  color: #86efac;
}

.adminSetupItem.is-done .adminSetupItemCheck {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.2);
}

.adminSetupItemCopy {
  display: grid;
  gap: 0.15rem;
}

.adminSetupItemCopy strong {
  font-size: 0.95rem;
}

.adminSetupItemCopy small {
  color: #94a3b8;
  line-height: 1.35;
}

.adminSetupItemMeta {
  font-size: 0.72rem;
  color: #fca5a5;
  white-space: nowrap;
}

.adminSetupItem.is-done .adminSetupItemMeta {
  color: #86efac;
}

.adminSetupActions {
  grid-template-columns: 1fr;
}

@media (max-width: 720px) {
  .adminSetupItem {
    grid-template-columns: 1.4rem 1fr;
  }

  .adminSetupItemMeta {
    grid-column: 2;
  }
}

.tenantAccountForm {
  display: grid;
  grid-template-columns:
    minmax(220px, 1.4fr)
    minmax(150px, 0.65fr)
    minmax(220px, 1.4fr)
    minmax(150px, auto);
  align-items: end;
  gap: 0.75rem;
}

.tenantAccountForm label {
  min-width: 0;
  margin: 0;
}

.tenantAccountForm input,
.tenantAccountForm select,
.tenantAccountForm button {
  min-height: 46px;
  margin-bottom: 0;
}

.tenantAccountForm button {
  white-space: nowrap;
}

.passwordChangeForm {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, 0.8fr);
}

.tenantAccountForm > small {
  grid-column: 1 / -1;
}

.tenantUserList {
  display: grid;
  gap: 0.65rem;
}

.tenantUserRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.38);
}

.tenantUserAvatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  color: #bfdbfe;
  font-size: 16px;
  font-weight: 900;
}

.tenantUserIdentity {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.tenantUserIdentity strong {
  font-size: 15px;
  word-break: break-word;
}

.tenantUserActions {
  display: flex;
  justify-content: flex-end;
}

.tenantUserResetButton {
  min-height: 38px;
  white-space: nowrap;
}

.tenantUserRow > div {
  display: grid;
  gap: 0.12rem;
}

.tenantUserRow small {
  color: var(--muted);
}

.tenantRole {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.2);
  font-size: var(--font-2xs);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tenantRole-admin {
  color: #ddd6fe;
  background: rgba(124, 58, 237, 0.2);
}

/* ===== Super Admin platform management ===== */
.superAdminPage {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.16), transparent 34rem),
    radial-gradient(circle at 90% 12%, rgba(37, 99, 235, 0.14), transparent 32rem),
    #050811;
}

.superAdminContainer {
  width: min(100% - 1.5rem, 1480px);
  padding-block: 0.8rem 2rem;
}

.superAdminTopbar {
  border-color: rgba(167, 139, 250, 0.28);
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.88), rgba(8, 20, 42, 0.92));
}

.superAdminTopbar .topActions {
  flex-shrink: 0;
}

.superAdminTopbar .topActions form {
  display: flex;
  margin: 0;
}

.superAdminHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0;
  padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.2), rgba(30, 64, 175, 0.12));
}

.superAdminHero > div:first-child > span {
  color: #c4b5fd;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.superAdminHero h1 {
  margin: 0.25rem 0;
}

.superAdminHero p {
  margin: 0;
}

.superAdminHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.superAdminOpenMonitorGrid {
  min-height: 42px;
  margin-top: 0.35rem;
}

.superAdminMonitorSourceField {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.15rem;
}

.superAdminMonitorSourceLabel {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.superAdminMonitorSourceSwitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.28rem;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(2, 6, 23, 0.72);
}

.superAdminMonitorSourceOption {
  min-height: 38px;
  padding: 0.45rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.superAdminMonitorSourceOption:hover {
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.72);
}

.superAdminMonitorSourceOption.isActive[data-monitor-source="local"] {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.34), rgba(29, 78, 216, 0.22));
  color: #dbeafe;
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.12);
}

.superAdminMonitorSourceOption.isActive[data-monitor-source="live"] {
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.34), rgba(4, 120, 87, 0.22));
  color: #bbf7d0;
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.12);
}

.superAdminMonitorLiveHint {
  margin: 0;
  line-height: 1.45;
}

.superAdminMonitorLiveHint code {
  font-size: 11px;
  word-break: break-all;
}

.superAdminSecurityNote {
  display: grid;
  min-width: 270px;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 13px;
  background: rgba(6, 78, 59, 0.16);
}

.superAdminSecurityNote span {
  color: #a7f3d0;
  font-size: 11px;
}

.superAdminKpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.8rem;
}

.superAdminKpiGrid article {
  display: grid;
  gap: 0.2rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.82);
}

.superAdminKpiGrid span {
  color: var(--muted);
  font-size: 11px;
}

.superAdminKpiGrid strong {
  color: #f8fafc;
  font-size: 28px;
}

.superAdminClientCard {
  margin-bottom: 0.8rem;
}

.superAdminClientMeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 0.75rem;
  align-items: stretch;
}

.superAdminClientMeta article {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
}

.superAdminClientMeta span {
  color: var(--muted);
  font-size: 11px;
}

.superAdminClientMeta strong {
  color: #f8fafc;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.superAdminExeDownload {
  align-self: center;
  justify-self: end;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #eff6ff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.superAdminExeDownload:hover {
  filter: brightness(1.08);
}

.superAdminVersion {
  align-self: center;
}

.superAdminGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.7fr);
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.superAdminForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.superAdminForm.singleColumn {
  grid-template-columns: 1fr;
}

.superAdminForm label {
  min-width: 0;
  margin: 0;
}

.superAdminForm label small {
  display: block;
  margin-top: 0.3rem;
  color: #64748b;
}

.superAdminFullField {
  grid-column: 1 / -1;
}

.superAdminForm > p {
  min-height: 1.2em;
  margin: 0;
}

.superAdminTenantsCard,
.superAdminAuditCard {
  margin-top: 0.8rem;
}

.superAdminSearch {
  width: min(100%, 330px);
  margin: 0;
}

.superAdminSearch input {
  margin: 0;
}

.superAdminPremiseTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0.85rem;
}

.superAdminPremiseTab {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  padding: 0.38rem 0.85rem;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.superAdminPremiseTab.isActive {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.22);
  color: #eff6ff;
}

.superAdminWorkspaceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.85rem 0 0.2rem;
}

.superAdminWorkspaceTab {
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.82);
  color: #cbd5e1;
  padding: 0.55rem 1rem;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.superAdminWorkspaceTab.isActive {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.34), rgba(124, 58, 237, 0.24));
  color: #f8fafc;
}

.superAdminBlockedCard {
  margin-top: 0.75rem;
}

.superAdminBlockedSummary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.superAdminBlockedCategoryTabs {
  margin-top: 0.35rem;
}

.superAdminBlockedToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0.75rem 0 0.85rem;
}

.superAdminBlockedFilter {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 320px);
  font-size: 12px;
  color: #94a3b8;
}

.superAdminBlockedFilter select {
  margin: 0;
}

.superAdminBlockedTableWrap {
  overflow-x: auto;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.35);
}

.superAdminBlockedTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.superAdminBlockedTable th,
.superAdminBlockedTable td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.1);
  text-align: left;
  vertical-align: top;
}

.superAdminBlockedTable th {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.superAdminBlockedTable td {
  color: #e2e8f0;
  font-size: 12px;
}

.superAdminBlockedTable td small {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 10px;
}

.superAdminBlockedEmpty {
  text-align: center;
  color: #64748b;
  padding: 1.2rem !important;
}

.superAdminBlockedError {
  display: block;
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 10px;
}

.tenantBadge.blockedReason {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.28);
  color: #fecaca;
}

.tenantBadge.premiseType.karaoke {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(30, 64, 175, 0.28);
  color: #bfdbfe;
}

.tenantBadge.premiseType.pa_system {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(146, 64, 14, 0.28);
  color: #fde68a;
}

.tenantBadge.premiseType.personal {
  border-color: rgba(244, 114, 182, 0.42);
  background: rgba(131, 24, 67, 0.24);
  color: #fbcfe8;
}

.tenantBadge.premiseType.demo {
  border-color: rgba(45, 212, 191, 0.42);
  background: rgba(15, 118, 110, 0.22);
  color: #99f6e4;
}

.tenantBadge.premiseType.organization {
  border-color: rgba(167, 139, 250, 0.42);
  background: rgba(76, 29, 149, 0.24);
  color: #ddd6fe;
}

.tenantBadge.registrationSource {
  border-color: rgba(52, 211, 153, 0.42);
  background: rgba(6, 95, 70, 0.28);
  color: #a7f3d0;
}

.tenantBadge.pendingApproval {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(120, 53, 15, 0.28);
  color: #fde68a;
}

.tenantBadge.hiddenPremise {
  border-color: rgba(148, 163, 184, 0.5);
  background: rgba(51, 65, 85, 0.45);
  color: #cbd5e1;
}

.superAdminTenantItem.is-hidden {
  opacity: 0.72;
  border-style: dashed;
}

.superAdminPremiseTypeField {
  display: grid;
  gap: 0.25rem;
  min-width: 150px;
}

.superAdminPremiseTypeLabel {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.superAdminPremiseTypeSelect {
  min-height: 34px;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  font: inherit;
}

.superAdminTenantList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.superAdminMonitorWall .superAdminTenantList {
  align-items: stretch;
}

.superAdminMonitorCard.superAdminTenantItem {
  min-height: 0;
  padding: 0.75rem;
  border-color: rgba(96, 165, 250, 0.22);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(2, 6, 23, 0.72) 100%
  );
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
  transition: border-color 0.18s ease;
}

.superAdminMonitorCard.superAdminTenantItem:hover {
  border-color: rgba(96, 165, 250, 0.42);
}

.superAdminMonitorCardHeader {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.superAdminMonitorCardHeader .superAdminTenantIdentity > img,
.superAdminMonitorCardHeader .superAdminTenantIdentity > span {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.superAdminMonitorCardHeader .superAdminTenantIdentity strong {
  font-size: 13px;
  line-height: 1.25;
}

.superAdminMonitorCardHeader .superAdminTenantIdentity small {
  font-size: 10px;
}

.superAdminMonitorStatusRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.monitorStatusDot {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: var(--font-2xs);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.monitorStatusDot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.monitorStatusDot.online {
  color: #4ade80;
  background: rgba(22, 163, 74, 0.16);
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.monitorStatusDot.offline {
  color: #94a3b8;
  background: rgba(51, 65, 85, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.superAdminMonitorCardBody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.55rem;
  flex: 1;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.superAdminMonitorRow {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.superAdminMonitorLabel {
  color: #64748b;
  font-size: var(--font-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.superAdminMonitorValue {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superAdminMonitorValue.isActive {
  color: #86efac;
}

.superAdminMonitorSinger {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.superAdminMonitorDetails {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  padding-top: 0.25rem;
  margin-top: 0.15rem;
}

.superAdminMonitorManagement > summary {
  cursor: pointer;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
  user-select: none;
  padding: 0.2rem 0;
}

.superAdminMonitorManagementBody {
  display: grid;
  gap: 0.55rem;
  padding: 0.45rem 0 0.15rem;
}

.superAdminMonitorManagementMeta {
  display: grid;
  gap: 0.35rem;
}

.superAdminMonitorManagementActions {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.superAdminMonitorManagementActions .superAdminPremiseTypeField {
  min-width: 0;
}

.superAdminMonitorActionGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.superAdminMonitorActionGroup button,
.superAdminMonitorActionGroup a {
  flex: 1 1 calc(50% - 0.35rem);
  min-width: 7.5rem;
  padding: 0.42rem 0.55rem;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

.superAdminMonitorMetricsCompact {
  margin-bottom: 0;
  gap: 0.25rem;
  font-size: 11px;
}

.superAdminMonitorMetricsCompact .sessionMetric {
  font-size: 10px;
  line-height: 1.35;
}

.superAdminMonitorDetails > summary::-webkit-details-marker {
  display: none;
}

.superAdminMonitorDetails > summary::before {
  content: "▸ ";
  color: #60a5fa;
}

.superAdminMonitorDetails[open] > summary::before {
  content: "▾ ";
}

.superAdminMonitorMetaBadges {
  margin: 0;
  justify-content: flex-start;
}

.superAdminMonitorCardFooter {
  margin-top: auto;
}

.superAdminTenantPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.superAdminTenantPagination span {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  min-width: 8rem;
  text-align: center;
}

.superAdminTenantPagination button {
  min-width: 6.5rem;
}

.superAdminTenantItem {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 15px;
  background: rgba(2, 6, 23, 0.42);
}

.superAdminTenantMain {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.superAdminTenantBadges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.tenantBadge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: var(--font-2xs);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.tenantBadge.active,
.tenantBadge.live,
.tenantBadge.sessionActive {
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
}

.tenantBadge.inactive,
.tenantBadge.offline,
.tenantBadge.sessionIdle {
  color: #94a3b8;
  background: rgba(51, 65, 85, 0.55);
}

.tenantBadge.live {
  color: #fde68a;
  background: rgba(180, 83, 9, 0.22);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}

.superAdminTenantCreated {
  width: 100%;
  color: #64748b;
  font-size: 9px;
  text-align: right;
}

.superAdminTenantFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(96, 165, 250, 0.12);
}

.superAdminSearchLogsCard {
  margin-top: 0.8rem;
}

.superAdminSearchLogsList {
  display: grid;
  gap: 0.55rem;
}

.superAdminSearchLogItem {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 12px;
  background: rgba(2, 6, 23, 0.35);
}

.superAdminSearchLogMain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.superAdminSearchLogMatches,
.superAdminSearchLogMeta {
  color: #64748b;
  font-size: 10px;
}

.superAdminTenantItem.inactive {
  opacity: 0.68;
  border-color: rgba(248, 113, 113, 0.2);
}

.superAdminTenantItem[hidden] {
  display: none;
}

.superAdminTenantIdentity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.superAdminTenantIdentity > img,
.superAdminTenantIdentity > span {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.16);
  object-fit: contain;
  font-weight: 900;
}

.superAdminTenantIdentity > div {
  display: grid;
  min-width: 0;
}

.superAdminTenantIdentity strong,
.superAdminTenantIdentity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.superAdminTenantIdentity small {
  color: #64748b;
}

.superAdminTenantMetrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.superAdminTenantMetrics span {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.72);
  font-size: 10px;
}

.superAdminTenantMetrics span.active {
  color: #86efac;
  background: rgba(22, 163, 74, 0.14);
}

.superAdminTenantMetrics span.sessionMetric {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.16);
}

.superAdminTenantMetrics span.sessionMetric.active {
  color: #86efac;
  background: rgba(22, 163, 74, 0.14);
}

.superAdminTenantMetrics span.sessionMetric.idle {
  color: #94a3b8;
  background: rgba(51, 65, 85, 0.45);
}

.superAdminTenantMetrics span.lifetimeMetric {
  color: #cbd5e1;
  background: rgba(30, 41, 59, 0.72);
}

.superAdminTenantMetrics span.lifetimeMetric strong {
  color: #e2e8f0;
}

.superAdminTenantContactMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.55rem;
  font-size: 12px;
  color: #94a3b8;
}

.superAdminTenantContactMeta strong {
  color: #e2e8f0;
}

.superAdminTenantContactMeta a {
  color: #86efac;
  text-decoration: none;
}

.superAdminTenantContactMeta a:hover {
  text-decoration: underline;
}

.superAdminTenantStatus {
  display: grid;
  gap: 0.25rem;
}

.superAdminTenantStatus > span {
  width: fit-content;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.superAdminTenantStatus > span.active {
  color: #86efac;
  background: rgba(22, 163, 74, 0.16);
}

.superAdminTenantStatus > span.inactive {
  color: #fecaca;
  background: rgba(220, 38, 38, 0.14);
}

.superAdminTenantStatus small {
  color: #64748b;
  font-size: 9px;
}

.superAdminTenantAccounts,
.superAdminTenantActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  align-items: stretch;
}

.superAdminTenantAccounts button,
.superAdminTenantActions button,
.superAdminTenantActions a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  height: 100%;
  margin: 0;
  padding: 0.48rem 0.65rem;
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  flex: unset;
  min-width: 0;
}

.superAdminTenantActions a {
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.3);
  font-weight: 700;
  text-decoration: none;
}

.superAdminAuditList {
  display: grid;
  gap: 0.45rem;
}

.superAdminAuditList > div {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(140px, 0.6fr) minmax(240px, 1fr);
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.42);
}

.superAdminAuditList span,
.superAdminAuditList small {
  color: var(--muted);
}

.superAdminFooter {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0;
  color: #64748b;
  font-size: 10px;
}

.superAdminFooter a {
  color: #94a3b8;
  text-decoration: none;
}

.superAdminDialog {
  width: min(calc(100% - 2rem), 440px);
  padding: 0;
  border: 1px solid rgba(139, 92, 246, 0.42);
  border-radius: 18px;
  color: var(--text);
  background: #0f172a;
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.7);
}

.superAdminInsightsDialog {
  width: min(calc(100% - 1.5rem), 980px);
  max-height: calc(100vh - 2rem);
}

.superAdminInsightsShell {
  display: grid;
  gap: 0;
  max-height: calc(100vh - 2rem);
}

.superAdminInsightsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.2rem 0.9rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.superAdminInsightsHeader h2 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
}

.superAdminInsightsBody {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.2rem 1.2rem;
  overflow: auto;
}

.superAdminInsightsSection {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
}

.superAdminInsightsSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.superAdminInsightsSectionHead h3 {
  margin: 0;
  font-size: 0.98rem;
}

.superAdminInsightsSectionHead small {
  color: #94a3b8;
}

.superAdminInsightsStatus {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.superAdminInsightsStatus strong {
  font-size: 1rem;
}

.superAdminInsightsStatus span {
  color: #94a3b8;
  font-size: 0.88rem;
}

.superAdminInsightsStatus.active {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(22, 101, 52, 0.18);
}

.superAdminInsightsStatus.warning {
  border-color: rgba(250, 204, 21, 0.35);
  background: rgba(113, 63, 18, 0.18);
}

.superAdminInsightsStatus.inactive {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.55);
}

.superAdminInsightsMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}

.superAdminInsightsMetric {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.superAdminInsightsMetric span {
  color: #94a3b8;
  font-size: 0.78rem;
}

.superAdminInsightsMetric strong {
  font-size: 1.15rem;
}

.superAdminInsightsMetric small {
  color: #64748b;
  font-size: 0.74rem;
}

.superAdminInsightsMetric.active {
  border-color: rgba(74, 222, 128, 0.28);
}

.superAdminInsightsTierList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.superAdminTierChip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.72);
}

.superAdminTierChip.vip {
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}

.superAdminTierChip.vvip {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
}

.superAdminInsightsTableWrap {
  overflow: auto;
}

.saRequestViewersTableWrap {
  overflow: auto;
  margin-top: 0.75rem;
}

.saRequestViewersTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.saRequestViewersTable th,
.saRequestViewersTable td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
  vertical-align: top;
}

.saRequestViewersTable th {
  color: #94a3b8;
  font-weight: 600;
}

.superAdminInsightsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.superAdminInsightsTable th,
.superAdminInsightsTable td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
  white-space: nowrap;
}

.superAdminInsightsTable th {
  color: #94a3b8;
  font-weight: 600;
}

.superAdminSessionChip {
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  background: rgba(51, 65, 85, 0.8);
}

.superAdminSessionChip.active {
  background: rgba(22, 101, 52, 0.35);
  color: #86efac;
}

.superAdminSessionChip.closed {
  background: rgba(51, 65, 85, 0.8);
  color: #cbd5e1;
}

.superAdminInsightsUsers {
  display: grid;
  gap: 0.55rem;
}

.superAdminInsightsUsers article {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.72);
}

.superAdminInsightsUsers small {
  color: #94a3b8;
}

.superAdminInspectTenant {
  border-color: rgba(96, 165, 250, 0.35);
}

.superAdminDialog::backdrop {
  background: rgba(2, 6, 23, 0.76);
  backdrop-filter: blur(5px);
}

.superAdminDialog form {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
}

.superAdminDialogActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.superAdminLoginCard {
  border-color: rgba(139, 92, 246, 0.42);
  box-shadow: 0 28px 90px rgba(76, 29, 149, 0.26);
}

@media (max-width: 1100px) {
  .superAdminTenantList {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .superAdminTenantFooter {
    flex-direction: column;
  }

  .superAdminTenantActions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 760px) {
  .superAdminTenantList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .superAdminHero,
  .superAdminFooter {
    align-items: stretch;
    flex-direction: column;
  }

  .superAdminSecurityNote {
    min-width: 0;
  }

  .superAdminKpiGrid,
  .superAdminGrid,
  .superAdminForm,
  .superAdminClientMeta,
  .superAdminAuditList > div {
    grid-template-columns: 1fr;
  }

  .superAdminTenantMain,
  .superAdminTenantFooter,
  .superAdminTenantBadges {
    align-items: stretch;
  }

  .superAdminTenantBadges {
    justify-content: flex-start;
  }

  .superAdminTenantCreated {
    text-align: left;
  }

  .superAdminTenantActions {
    justify-content: flex-start;
  }

  .superAdminTenantActions button,
  .superAdminTenantActions a,
  .superAdminTenantAccounts button {
    flex: unset;
    min-width: 0;
    white-space: normal;
    text-align: center;
    height: 100%;
    min-height: 36px;
  }

  .superAdminFullField {
    grid-column: auto;
  }

  .superAdminExeDownload {
    justify-self: stretch;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .superAdminTenantList {
    grid-template-columns: 1fr;
  }

  .superAdminMonitorCard {
    min-height: 0;
  }
}

.tenantPasswordDialog {
  width: min(92vw, 430px);
  padding: 0;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 20px;
  color: var(--text);
  background: #0f172a;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65);
}

.tenantPasswordDialog::backdrop {
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(6px);
}

.tenantPasswordDialog form {
  display: grid;
  gap: 0.85rem;
  padding: 1.2rem;
}

.tenantPasswordDialog h2,
.tenantPasswordDialog p {
  margin: 0;
}

.tenantPasswordDialog p {
  color: var(--muted);
}

@media (max-width: 800px) {
  .tenantAccountForm {
    grid-template-columns: 1fr;
  }

  .tenantAccountForm > small {
    grid-column: auto;
  }

  .adminAccountsLayout {
    grid-template-columns: 1fr;
  }

  .adminSecurityPanel {
    position: static;
  }

  .adminStaffFormGrid {
    grid-template-columns: 1fr;
  }

  .tenantUserRow {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar identity"
      "role actions";
  }

  .tenantUserAvatar {
    grid-area: avatar;
  }

  .tenantUserIdentity {
    grid-area: identity;
  }

  .tenantUserRow > .tenantRole {
    grid-area: role;
    justify-self: start;
  }

  .tenantUserActions {
    grid-area: actions;
    justify-self: end;
  }

  .adminSubPanelActions,
  .adminSubPanelActions button {
    width: 100%;
  }
}

.queue-rowTitle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.queue-rowHeading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.queueTableLabel {
  color: #facc15;
  font-weight: 700;
}

.queueNameSep {
  color: #64748b;
}

.queueSingerName {
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.18);
  color: #a7f3d0;
}

.badge.warn {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.badge.playing {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.22);
  color: #bfdbfe;
}

.badge.tierVip {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(88, 28, 135, 0.22);
  color: #e9d5ff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge.tierVvip {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(161, 98, 7, 0.22);
  color: #fde68a;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.smallMuted {
  color: var(--muted);
  font-size: 12.5px;
}

.btnRow {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.sectionTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.sectionTitle h2 {
  margin: 0;
  font-size: 18px;
}

.djNowMeta[hidden] {
  display: none !important;
}

.listPlain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tableItem {
  display: grid;
  grid-template-columns: 90px 1fr 56px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.tableItem:last-child {
  border-bottom: none;
}
.barWrap {
  height: 7px;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.7);
}
.bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6, #22d3ee);
}

.emptyState {
  color: var(--muted);
  padding: 0.7rem 0.2rem;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 12px;
}

/* ===== Toast ===== */
.toast {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  max-width: 360px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.88);
  color: var(--text);
  padding: 0.9rem 1rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.formGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.songPicker {
  min-width: 0;
}

.songSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
}

.songSearchRow input {
  margin-top: 0;
}

.songSearchRow button {
  min-height: 46px;
}

.youtubeResults {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.youtubeResults[hidden] {
  display: none;
}

.youtubeResult {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.75);
  color: var(--text);
  text-align: left;
}

.youtubeResult:hover,
.youtubeResult.selected {
  border-color: rgba(96, 165, 250, 0.8);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.youtubeResult img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.youtubeResultBody {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem;
}

.youtubeResultTitle {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.youtubeResultChannel {
  color: var(--muted);
  font-size: 11px;
}

.footerHint {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(148, 163, 184, 0.2);
}
.toast strong {
  display: block;
  margin-bottom: 0.15rem;
}
.toast.show {
  display: block;
  animation: toastIn 0.18s ease-out;
}
@keyframes toastIn {
  from {
    transform: translateY(6px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Manual DJ: center toast so it is not clipped by FAB / footer */
.customerApp.manualDjMode .toast {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  max-width: min(22rem, calc(100vw - 2rem));
  width: max-content;
  text-align: center;
  z-index: 120;
  transform: translate(-50%, -50%);
}
.customerApp.manualDjMode .toast.show {
  animation: toastInCenter 0.18s ease-out;
}
@keyframes toastInCenter {
  from {
    transform: translate(-50%, calc(-50% + 8px));
    opacity: 0.7;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .songSearchRow {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .songSearchRow button {
    min-height: 48px;
    padding-inline: 0.7rem;
  }

  .youtubeResults {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

.adminTabBar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.adminTab {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.adminTab:hover {
  background: rgba(59, 130, 246, 0.12);
  color: #eff6ff;
}

.adminTab.is-active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25);
}

.adminTabPanel:not(.is-active) {
  display: none;
}

.adminProspectsCard {
  margin-top: 0;
}

.superAdminProspectsCard {
  margin-bottom: 1rem;
}

.adminProspectsForm {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.adminProspectSearchRow {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}

.adminProspectSearchRow .adminProspectsActions {
  margin: 0;
}

.adminProspectStatusMsg {
  margin: 0;
  min-height: 1.15em;
  color: #94a3b8;
  font-size: 0.9rem;
}

.adminProspectStatusMsg.is-error {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.32);
  border: 1px solid rgba(248, 113, 113, 0.32);
  padding: 0.65rem 0.85rem;
  border-radius: 0.65rem;
}

.adminProspectStatusMsg.is-success {
  color: #86efac;
}

.adminProspectInviteDetails {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 0.75rem;
  padding: 0.45rem 0.9rem 0.8rem;
}

.adminProspectInviteDetails summary {
  cursor: pointer;
  color: #cbd5e1;
  font-weight: 600;
  padding: 0.35rem 0;
}

.adminProspectInviteDetails textarea {
  margin-top: 0.5rem;
}

.adminProspectTypesHint {
  margin: 0 0 0.65rem;
}

.adminProspectSmartFilters[hidden],
.adminProspectFilters[hidden],
.adminProspectsSummary[hidden],
#venueProspectCustomDistrictWrap[hidden] {
  display: none !important;
}

.adminProspectsForm label {
  display: grid;
  gap: 0.35rem;
}

.adminProspectsForm select,
.adminProspectsForm input,
.adminProspectsForm textarea {
  width: 100%;
}

.adminProspectsActions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem;
}

.adminProspectsActions > button {
  min-height: 40px;
  flex: 1 1 auto;
}

.saProspectStepHead #venueProspectSavedListButtonAlt {
  margin-top: 0.45rem;
}

.adminProspectsSummary {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.adminProspectSummaryHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.adminProspectCacheNote {
  font-size: 0.78rem;
  color: #93c5fd;
}

.adminProspectWarnNote {
  color: #fcd34d;
}

.adminProspectStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.adminProspectStat {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.adminProspectStatValue {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.1;
}

.adminProspectStatLabel {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.25;
}

.adminProspectFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.45);
  border: 1px dashed rgba(148, 163, 184, 0.18);
}

.adminProspectFilter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: #cbd5e1;
  cursor: pointer;
}

.adminProspectFilter input {
  width: auto;
  margin: 0;
}

.adminProspectsResults {
  display: grid;
  gap: 0.75rem;
}

.adminProspectCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.adminProspectCard--existing {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(20, 83, 45, 0.14);
}

.adminProspectCardBody {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.adminProspectCardTitleRow {
  display: grid;
  gap: 0.35rem;
  align-items: start;
  justify-content: stretch;
}

.adminProspectName {
  display: block;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  color: #f8fafc;
  overflow-wrap: anywhere;
}

.adminProspectStatus {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.adminProspectStatus--existing {
  color: #86efac;
  background: rgba(20, 83, 45, 0.35);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.adminProspectStatus--new {
  color: #cbd5e1;
  background: rgba(51, 65, 85, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.adminProspectDetails {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.adminProspectDetailRow {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.adminProspectDetailRow dt {
  margin: 0;
  font-size: 0.78rem;
  color: #94a3b8;
}

.adminProspectDetailRow dd {
  margin: 0;
  font-size: 0.88rem;
  color: #e2e8f0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.adminProspectCardMain {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 260px);
  flex: 1 1 260px;
}

.adminProspectAddress {
  margin: 0;
  line-height: 1.4;
  font-size: 0.84rem;
  color: #cbd5e1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.adminProspectMeta {
  line-height: 1.35;
}

.adminProspectEmpty {
  margin: 0;
  padding: 0.75rem 0.2rem;
}

.adminProspectCardActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.adminProspectCardActions .pill,
.adminProspectCardActions .primary,
.adminProspectCardActions .saProspectInviteBtn {
  min-height: 2rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.adminProspectWhatsApp {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: transparent;
}

.adminProspectWhatsApp:hover {
  filter: brightness(1.05);
}

.adminProspectNoWa {
  padding: 0.35rem 0.2rem;
}

.adminProspectModeTabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  flex-wrap: wrap;
}

.adminProspectModeTab {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.35);
  color: #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}

.adminProspectModeTab.is-active {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(14, 116, 144, 0.35);
  color: #f0f9ff;
}

.adminProspectSmartFilters {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  margin: 0 0 0.85rem;
}

.adminProspectSmartFilters legend {
  padding: 0 0.35rem;
  color: #cbd5e1;
  font-weight: 600;
}

.adminProspectTypeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.75rem;
}

.adminProspectTypeGrid label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.adminProspectSmartMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
}

.adminProspectSmartMeta input[type="number"] {
  width: 5rem;
}

.adminProspectFilter--disabled {
  opacity: 0.65;
}

.adminProspectScoreRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.adminProspectBand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.adminProspectBand--hot {
  color: #fb923c;
}

.adminProspectBand--high {
  color: #fbbf24;
}

.adminProspectBand--medium {
  color: #93c5fd;
}

.adminProspectBand--low {
  color: #94a3b8;
}

.adminProspectCard.adminProspectBand--hot {
  border-color: rgba(251, 146, 60, 0.45);
}

.adminProspectScoreBreakdown,
.adminProspectContactFlags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0.35rem 0;
}

.adminProspectContactFlags .is-on {
  color: #86efac;
}

.adminProspectReasons {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: #cbd5e1;
}

.adminProspectReasons ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}

.adminProspectEvidenceDialog {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.85rem;
  background: #0f172a;
  color: #e2e8f0;
  padding: 0;
  max-width: min(36rem, 92vw);
  width: 100%;
}

.adminProspectEvidencePanel {
  padding: 1rem 1.1rem 1.15rem;
}

.adminProspectEvidencePanel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.adminProspectEvidenceItem {
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  padding: 0.7rem 0;
  font-size: 0.88rem;
}

.adminProspectEvidenceItem a {
  color: #7dd3fc;
  word-break: break-all;
}

@media (max-width: 640px) {
  .adminTabBar {
    border-radius: 0.85rem;
  }

  .adminTab {
    flex: 1 1 calc(50% - 0.25rem);
    text-align: center;
  }

  .adminProspectStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminProspectSearchRow {
    grid-template-columns: 1fr;
  }

  .adminProspectCard {
    grid-template-columns: 1fr;
  }

  .adminProspectCardActions {
    width: 100%;
  }

  .adminProspectCardActions .pill,
  .adminProspectCardActions .adminProspectWhatsApp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .adminProspectDetailRow {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ===== Cari & Jemput Premis redesign (Scope B) ===== */
.saProspectWorkspace {
  --sp-bg: #0b1020;
  --sp-panel: #111827;
  --sp-border: rgba(148, 163, 184, 0.18);
  --sp-accent: #7c5cff;
  --sp-accent-2: #6366f1;
  --sp-ok: #22c55e;
  --sp-wa: #16a34a;
  --sp-warn: #f59e0b;
  --sp-radius: 12px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.92), rgba(11, 16, 32, 0.96));
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 1.25rem;
  margin-bottom: 5.5rem;
}

.saProspectPageHeader h2 {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
}

.saProspectSubtitle {
  margin: 0;
  color: #94a3b8;
  font-size: 0.92rem;
}

.saProspectKpiRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.1rem;
}

.saProspectKpiCard {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border-radius: var(--sp-radius);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--sp-border);
}

.saProspectKpiCard strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #f8fafc;
}

.saProspectKpiCard span:last-child {
  color: #94a3b8;
  font-size: 0.78rem;
}

.saProspectKpiIcon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  background: rgba(124, 92, 255, 0.18);
  color: #c4b5fd;
  flex: 0 0 auto;
}

.saProspectKpiIcon--wa { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.saProspectKpiIcon--ok { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.saProspectKpiIcon--hot { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }

.saProspectGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: 1rem;
  align-items: start;
}

.saProspectPanel {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  padding: 0.95rem;
  min-width: 0;
}

.saProspectStepHead {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
}

.saProspectStepHead h3 {
  margin: 0;
  font-size: 1.02rem;
}

.saProspectStepHead p {
  margin: 0.2rem 0 0;
  color: #94a3b8;
  font-size: 0.84rem;
}

.saProspectStepNum {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

.saProspectChipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.saProspectChip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: #cbd5e1;
  font-size: 0.84rem;
  cursor: pointer;
  min-height: 44px;
}

.saProspectChip input {
  width: auto;
  margin: 0;
}

.saProspectChip:has(input:checked) {
  border-color: rgba(124, 92, 255, 0.7);
  background: rgba(124, 92, 255, 0.22);
  color: #ede9fe;
}

.saProspectMapBlock {
  margin-top: 0.85rem;
}

.saProspectMapLabel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
}

.saProspectMap {
  height: 280px;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  overflow: hidden;
  background: #0f172a;
}

.saProspectMapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  margin-top: 0.55rem;
}

.saProspectLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #94a3b8;
  font-size: 0.78rem;
}

.saProspectLegendItem i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  display: inline-block;
}

.saProspectLocation {
  margin: 0.15rem 0 0;
  color: #93c5fd;
  font-size: 0.82rem;
  font-weight: 600;
}

#venueProspectFilterState,
#venueProspectFilterCity {
  max-width: 12rem;
}

.saProspectToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.9rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.saProspectToolbar select {
  min-height: 40px;
}

.saProspectSelectAll,
.saProspectSort,
.saProspectPageSize {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #cbd5e1;
  font-size: 0.86rem;
}

.saProspectResults {
  max-height: min(62vh, 760px);
  overflow: auto;
  padding-right: 0.15rem;
}

.saProspectCard {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "check thumb body"
    "actions actions actions";
  gap: 0.65rem 0.7rem;
  align-items: start;
  padding: 0.8rem 0.85rem;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-border);
  background: rgba(15, 23, 42, 0.72);
  transition: border-color 160ms ease, transform 160ms ease;
}

.saProspectCard:hover,
.saProspectCard:focus-within {
  border-color: rgba(124, 92, 255, 0.45);
}

.saProspectCard.is-selected {
  border-color: rgba(124, 92, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.25);
}

.saProspectCheck {
  grid-area: check;
  display: grid;
  place-items: start;
  padding-top: 0.55rem;
}

.saProspectCheck input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: #8b5cf6;
}

.saProspectThumb {
  grid-area: thumb;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  display: grid;
  place-items: center;
  background: rgba(124, 92, 255, 0.18);
  color: #ddd6fe;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.saProspectCard .adminProspectCardBody {
  grid-area: body;
  min-width: 0;
}

.saProspectCard .adminProspectCardActions {
  grid-area: actions;
  justify-content: flex-start;
  padding-top: 0.55rem;
  margin-top: 0.1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.saProspectTagRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.saProspectBadge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(96, 165, 250, 0.18);
  color: #bfdbfe;
  white-space: nowrap;
}

.saProspectBadge--karaoke { background: rgba(124, 92, 255, 0.22); color: #ddd6fe; }
.saProspectBadge--pub { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.saProspectBadge--hotel { background: rgba(236, 72, 153, 0.2); color: #f9a8d4; }
.saProspectBadge--lounge { background: rgba(167, 139, 250, 0.2); color: #ddd6fe; }

.saProspectCard .adminProspectBand {
  font-size: 0.7rem;
  padding: 0.12rem 0.45rem;
}

.saProspectMetaLine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1.35;
}

.saProspectMetaItem {
  color: #cbd5e1;
}

.saProspectMetaMuted {
  color: #64748b;
  font-style: normal;
}

.saProspectInviteBtn:disabled {
  opacity: 0.7;
}

.adminProspectWhatsApp {
  background: rgba(22, 163, 74, 0.18) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #86efac !important;
}

.saProspectPagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.saProspectPageBtn {
  min-width: 2.2rem;
  min-height: 2.2rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.7);
  color: #e2e8f0;
  cursor: pointer;
}

.saProspectPageBtn.is-active {
  border-color: rgba(124, 92, 255, 0.7);
  background: rgba(124, 92, 255, 0.28);
}

.saProspectStickyBar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 1rem;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  background: rgba(11, 16, 32, 0.94);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 0.75rem;
}

.saProspectFunnel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: center;
  color: #cbd5e1;
  font-size: 0.9rem;
}

.saProspectStickyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.saProspectStickyActions .primary {
  min-height: 44px;
}

@media (max-width: 1199px) {
  .saProspectGrid {
    grid-template-columns: 1fr;
  }

  .saProspectMap {
    height: 240px;
  }

  .saProspectResults {
    max-height: none;
  }
}

@media (max-width: 767px) {
  .saProspectWorkspace {
    padding: 0.85rem;
    margin-bottom: 6.5rem;
  }

  .saProspectKpiRow {
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .saProspectKpiCard {
    min-width: 11.5rem;
  }

  .saProspectCard {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "check thumb"
      "body body"
      "actions actions";
  }

  .saProspectThumb {
    justify-self: end;
  }

  .saProspectCheck {
    padding-top: 0.45rem;
  }

  .adminProspectCardActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .adminProspectCardActions .saProspectInviteBtn,
  .adminProspectCardActions .adminProspectWhatsApp {
    grid-column: 1 / -1;
  }

  .saProspectStickyBar {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saProspectCard {
    transition: none;
  }
}

/* ===== Super Admin multi-premise grid monitor (CCTV wall) ===== */
html.superAdminMonitorRoot,
html:has(body.superAdminMonitorPage),
body.superAdminMonitorPage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000 !important;
}

.superAdminMonitorPage {
  position: fixed;
  inset: 0;
  min-height: 100%;
  overflow: hidden;
  background: #000;
  color: #e2e8f0;
  transform: translateZ(0);
}

.superAdminMonitorPage:not(.superAdminMonitorStandbyMode) {
  display: flex;
  flex-direction: column;
  background: #000;
}

.superAdminMonitorKiosk:not(.superAdminMonitorStandbyMode) .superAdminMonitorGrid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  gap: 2px;
}

.superAdminMonitorStandbyMode .superAdminMonitorGrid {
  visibility: hidden;
  pointer-events: none;
}

.superAdminMonitorStandbyMode .superAdminMonitorStandby {
  visibility: visible;
}

.superAdminMonitorStandby {
  visibility: hidden;
}

.superAdminMonitorKiosk .superAdminMonitorHeader,
.superAdminMonitorKiosk .superAdminMonitorPagination {
  display: none !important;
}

.superAdminMonitorStandbyMode .superAdminMonitorHeader {
  display: none;
}

.superAdminMonitorStandby {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #000;
}

.superAdminMonitorStandbyBackdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #020617;
}

.superAdminMonitorHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.35rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #0b1220 0%, #060a12 100%);
}

.superAdminMonitorBrand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.superAdminMonitorBrand .systemOfficialIcon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.superAdminMonitorBrand strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.superAdminMonitorBrand span,
.superAdminMonitorTileMeta {
  color: #94a3b8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.superAdminMonitorActions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.superAdminMonitorActions .secondary,
.superAdminMonitorActions .pill {
  min-height: 30px;
  padding: 0.25rem 0.65rem;
  font-size: 11px;
}

.superAdminMonitorGrid {
  --monitor-cols: 3;
  --monitor-rows: 3;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--monitor-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--monitor-rows), minmax(0, 1fr));
  gap: 3px;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 3px;
  box-sizing: border-box;
  background: #000;
}

.superAdminMonitorPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-shrink: 0;
  min-height: 40px;
  padding: 0.35rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #060a12 0%, #0b1220 100%);
}

.superAdminMonitorPagination span {
  min-width: 7.5rem;
  color: #94a3b8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.superAdminMonitorPagination button {
  min-height: 30px;
  padding: 0.25rem 0.75rem;
  font-size: 11px;
}

.superAdminMonitorEmpty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  max-width: 36rem;
  margin: 0;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.superAdminMonitorTile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #050505;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
  contain: layout paint style;
}

.superAdminMonitorLiveLayer,
.superAdminMonitorEmptyLayer {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.superAdminMonitorLiveLayer {
  display: flex;
  flex-direction: column;
}

.superAdminMonitorEmptySlot {
  color: #64748b;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}

.superAdminMonitorEmptyLayer {
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(30, 41, 59, 0.45), #07090e 70%);
}

.superAdminMonitorTile.isEmpty {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.06);
}

.superAdminMonitorTile.isEmpty .superAdminMonitorLiveLayer {
  visibility: hidden;
  pointer-events: none;
}

.superAdminMonitorTile.isEmpty .superAdminMonitorEmptyLayer {
  display: flex;
}

.superAdminMonitorTile.isEmpty,
.superAdminMonitorTileEmpty {
  align-items: stretch;
  justify-content: stretch;
}

.superAdminMonitorTile.isUnmuted {
  border-color: rgba(52, 211, 153, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(52, 211, 153, 0.25),
    0 0 0 1px rgba(52, 211, 153, 0.35);
}

.superAdminMonitorFrameWrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.superAdminMonitorFrameWrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: none;
}

.superAdminMonitorPage:not(.superAdminMonitorElectron) .superAdminMonitorGrid {
  gap: 8px;
  padding: 8px;
}

.superAdminMonitorTileOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.superAdminMonitorTileTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 8px;
}

.superAdminMonitorTileControls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
  pointer-events: none;
}

.superAdminMonitorLiveBadge {
  align-self: flex-start;
  margin: 0;
  padding: 0.12rem 0.45rem;
  border-radius: 3px;
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.superAdminMonitorTileLabel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.45rem;
  margin-top: auto;
  padding: 1.8rem 0.55rem 0.5rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.62) 42%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
}

.superAdminMonitorTileBrand {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  min-width: 0;
  width: 100%;
  pointer-events: none;
}

.superAdminMonitorTileBrand img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.08);
}

.superAdminMonitorTileBrand > div {
  min-width: 0;
  flex: 1 1 auto;
}

.superAdminMonitorTileBrand strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  text-transform: uppercase;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.superAdminMonitorTileBrand .superAdminMonitorTileMeta {
  display: block;
  overflow: hidden;
  margin-top: 0.12rem;
  color: #cbd5e1;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
}

.superAdminMonitorAudio {
  position: static;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.superAdminMonitorAudio svg {
  width: 16px;
  height: 16px;
  display: block;
}

.superAdminMonitorAudio.isActive,
.superAdminMonitorAudio[aria-pressed="true"] {
  border-color: rgba(52, 211, 153, 0.65);
  background: rgba(6, 78, 59, 0.9);
  color: #6ee7b7;
}

.superAdminMonitorAudio:hover {
  border-color: rgba(96, 165, 250, 0.55);
  color: #dbeafe;
}

.superAdminMonitorFullscreen {
  position: static;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #e2e8f0;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.superAdminMonitorFullscreen[hidden] {
  display: none !important;
}

.superAdminMonitorFullscreen svg {
  width: 16px;
  height: 16px;
  display: block;
}

.superAdminMonitorFullscreen.isActive,
.superAdminMonitorFullscreen[aria-pressed="true"] {
  border-color: rgba(96, 165, 250, 0.7);
  background: rgba(30, 58, 138, 0.92);
  color: #bfdbfe;
}

.superAdminMonitorFullscreen:hover {
  border-color: rgba(96, 165, 250, 0.55);
  color: #dbeafe;
}

.superAdminMonitorFullscreen:focus-visible,
.superAdminMonitorAudio:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.9);
  outline-offset: 2px;
}

.superAdminMonitorTile:fullscreen,
.superAdminMonitorTile:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  contain: none;
  background: #000;
  overflow: hidden;
}

.superAdminMonitorTile:fullscreen .superAdminMonitorLiveLayer,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorLiveLayer,
.superAdminMonitorTile:fullscreen .superAdminMonitorFrameWrap,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorFrameWrap,
.superAdminMonitorTile:fullscreen .superAdminMonitorFrameWrap iframe,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorFrameWrap iframe,
.superAdminMonitorTile:fullscreen .superAdminMonitorTileOverlay,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorTileOverlay {
  width: 100%;
  height: 100%;
}

.superAdminMonitorTile:fullscreen .superAdminMonitorFrameWrap iframe,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorFrameWrap iframe {
  position: absolute;
  inset: 0;
  border: 0;
  pointer-events: none;
}

.superAdminMonitorTile:fullscreen .superAdminMonitorTileOverlay,
.superAdminMonitorTile:-webkit-full-screen .superAdminMonitorTileOverlay {
  z-index: 2;
}

.superAdminMonitorTile:fullscreen::backdrop,
.superAdminMonitorTile:-webkit-full-screen::backdrop {
  background: #000;
}

.superAdminMonitorGrid[data-count="1"] .superAdminMonitorTileBrand strong {
  font-size: 13px;
}

.superAdminMonitorGrid[data-count="1"] .superAdminMonitorTileBrand .superAdminMonitorTileMeta {
  font-size: 11px;
}

body.ledGridMonitor {
  background: #020617 !important;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

body.ledGridMonitor .ledVideoLayer {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

body.ledGridMonitor .ledGridPlayerHost,
body.ledGridMonitor .ledVideoLayer > div {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

body.ledGridMonitor .ledVideoLayer iframe.ledGridYoutubeEmbed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  transform: none !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
}

body.ledGridMonitor .ledVideoLayer iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  transform: none !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
}

body.ledGridMonitor .ledShade,
body.ledGridMonitor .ledActivateOverlay,
body.ledGridMonitor .ledBottomBar,
body.ledGridMonitor .ledHeader,
body.ledGridMonitor .ledStandby {
  display: none !important;
}

body.ledGridMonitor .ledVideoLayer.standbyBackdrop {
  inset: 0 !important;
  background-color: #020617;
  background-image: var(--led-backdrop-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

body.ledGridMonitor .ledVideoLayer.standbyBackdrop.hasCustomBackdrop {
  background-image: var(--led-backdrop-image);
}

/* Grid QR: bottom-right like real LED, sized for phone-camera scan from the monitor. */
body.ledGridMonitor {
  --led-footer-total: 6vh;
  --led-safe-right: 3%;
  --led-safe-left: 3%;
}

body.ledGridMonitor .ledQrOverlay {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(3%, var(--led-safe-right)) !important;
  bottom: calc(var(--led-footer-total) + 3%) !important;
  transform: none !important;
  z-index: 8;
  pointer-events: none;
}

body.ledGridMonitor .ledQrOverlay[data-position="bottom-left"] {
  right: auto !important;
  left: max(3%, var(--led-safe-left)) !important;
  transform: none !important;
}

body.ledGridMonitor .ledQrOverlay[data-position="center"] {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

body.ledGridMonitor .ledQrOverlayCard {
  /* Prefer scannable size in tile (~36% width, floor 132px) while staying corner-anchored. */
  width: min(42vw, 168px) !important;
  max-width: 46% !important;
  min-width: 132px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  gap: 3px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body.ledGridMonitor .ledQrOverlayBrand {
  margin: 0 !important;
  font-size: 9px !important;
  letter-spacing: 0.06em;
  line-height: 1;
}

body.ledGridMonitor .ledQrOverlayBrandQ {
  font-size: 1.25em;
}

body.ledGridMonitor .ledQrOverlayLabel {
  display: none !important;
}

body.ledGridMonitor .ledQrOverlayCard img {
  width: 100% !important;
  height: auto !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #ffffff;
}

@media (max-width: 900px) {
  .superAdminMonitorPage:not(.superAdminMonitorKiosk) .superAdminMonitorGrid {
    --monitor-cols: 1 !important;
    --monitor-rows: auto !important;
    grid-auto-rows: minmax(220px, 42vh);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .superAdminMonitorPage:not(.superAdminMonitorKiosk) .superAdminMonitorGrid::-webkit-scrollbar {
    display: none;
  }
}

.superAdminTotpQrWrap {
  display: grid;
  gap: 0.65rem;
  justify-items: center;
  margin: 0.5rem 0 1rem;
}

.superAdminTotpQrWrap[hidden],
.superAdminTotpPanel[hidden],
.superAdminTotpQrPlaceholder[hidden] {
  display: none !important;
}

.superAdminTotpQrPlaceholder {
  display: grid;
  place-items: center;
  width: 240px;
  max-width: 100%;
  min-height: 240px;
  margin: 0.5rem auto 1rem;
  padding: 1rem;
  border: 1px dashed rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.45);
  color: var(--muted, #94a3b8);
  font-size: 13px;
  text-align: center;
  line-height: 1.45;
}

.superAdminTotpQrWrap img {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

.superAdminTotpManualSecret {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  word-break: break-all;
  color: #cbd5e1;
}

.superAdminTotpSteps {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.55;
}

.superAdminTotpSteps li + li {
  margin-top: 0.35rem;
}

.superAdminTotpMessage {
  min-height: 1.25rem;
  margin: 0 0 0.75rem;
  font-size: 13px;
}

.superAdminTotpMessage:empty {
  display: none;
}

.superAdminTotpActiveNote {
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  background: rgba(6, 78, 59, 0.12);
}

.superAdminTotpActiveNote p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #bbf7d0;
}

.superAdminTotpDisablePanel {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.superAdminTotpDisableIntro {
  margin: 0 0 0.5rem;
}

.superAdminTotpSetupForm button[type="button"]:first-of-type {
  margin-bottom: 0.15rem;
}

.desktopDevicesList {
  display: grid;
  gap: 0.75rem;
}

.desktopDeviceItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.desktopDeviceItem.revoked {
  opacity: 0.65;
}

.desktopDeviceItem small {
  display: block;
  color: var(--muted, #94a3b8);
}

.langSwitch {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
.langSwitch a {
  color: inherit;
  text-decoration: none;
  opacity: 0.45;
}
.langSwitch a.is-active {
  opacity: 1;
}
.langSwitch span {
  opacity: 0.28;
  font-weight: 500;
}
.customerTopbar .langSwitch {
  margin: 0;
}
.tenantLoginCard .langSwitch,
.tenantFindHeader .langSwitch,
.adminTopHeaderActions .langSwitch,
.djUnifiedHeader .langSwitch,
.saSidebarBrand .langSwitch {
  margin-top: 0.35rem;
}

/* ===== Customer premium karaoke redesign (local 2026082103) ===== */
.customerApp {
  --cq-bg: #070814;
  --cq-panel: rgba(14, 18, 36, 0.82);
  --cq-panel-solid: #0d1224;
  --cq-border: rgba(139, 92, 246, 0.28);
  --cq-border-soft: rgba(148, 163, 184, 0.16);
  --cq-blue: #3b82f6;
  --cq-purple: #8b5cf6;
  --cq-cyan: #22d3ee;
  --cq-magenta: #e879f9;
  --cq-gold: #fbbf24;
  --cq-text: #f8fafc;
  --cq-muted: #94a3b8;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(88, 28, 135, 0.28), transparent 55%),
    radial-gradient(ellipse 80% 40% at 100% 20%, rgba(37, 99, 235, 0.14), transparent 50%),
    var(--cq-bg);
}

.customerStickyHead {
  background: linear-gradient(180deg, rgba(7, 8, 20, 0.98), rgba(7, 8, 20, 0.92));
  box-shadow: 0 -60vh 0 60vh rgba(7, 8, 20, 0.98);
}

.customerStickyHead::before {
  background: rgba(7, 8, 20, 0.98);
}

.customerTopbar {
  position: relative;
  overflow: hidden;
  min-height: 68px;
  margin-bottom: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--cq-border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(88, 28, 135, 0.18), rgba(30, 58, 138, 0.12)),
    rgba(12, 16, 32, 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.customerBrandGlyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(168, 85, 247, 0.55);
  border-radius: 14px;
  background: rgba(76, 29, 149, 0.35);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.28);
}

.customerBrandGlyph svg,
.identitySummaryIcon svg,
.customerMainTabIcon svg,
.quickSearchDecor svg,
.quickSearchFieldIcon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.customerBrandGlyph svg {
  width: 22px;
  height: 22px;
  color: var(--cq-cyan);
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55));
}

.customerTenantBrand img {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.22);
}

.customerTenantBrand strong {
  color: var(--cq-text);
  font-size: 16px;
}

.customerAppMark {
  color: #93c5fd;
}

.customerAppMark span {
  color: var(--cq-cyan);
}

.customerTopbarAside {
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 0.45rem;
  min-height: 44px;
}

.customerTopbar .langSwitch {
  align-self: end;
  margin: 0;
  color: #e2e8f0;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.customerTopbar .langSwitch a.is-active {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--cq-purple);
}

.customerTopbarEq,
.customerFooterEq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0.55;
  pointer-events: none;
}

.customerTopbarEq i,
.customerFooterEq i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cq-cyan), var(--cq-purple));
}

.customerTopbarEq i:nth-child(1) { height: 6px; }
.customerTopbarEq i:nth-child(2) { height: 11px; }
.customerTopbarEq i:nth-child(3) { height: 8px; }
.customerTopbarEq i:nth-child(4) { height: 14px; }
.customerTopbarEq i:nth-child(5) { height: 7px; }

.customerFooterEq {
  height: 18px;
  margin-bottom: 0.35rem;
  opacity: 0.4;
}

.customerFooterEq i:nth-child(1) { height: 5px; }
.customerFooterEq i:nth-child(2) { height: 10px; }
.customerFooterEq i:nth-child(3) { height: 14px; }
.customerFooterEq i:nth-child(4) { height: 8px; }
.customerFooterEq i:nth-child(5) { height: 16px; }
.customerFooterEq i:nth-child(6) { height: 9px; }
.customerFooterEq i:nth-child(7) { height: 6px; }

.customerApp .identitySummary {
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.34rem 0.75rem;
  border-color: rgba(168, 85, 247, 0.42);
  border-radius: 999px;
  background: rgba(49, 28, 92, 0.35);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.08), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.identitySummaryIcon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--cq-cyan);
}

.customerApp .identitySummary small {
  color: #c4b5fd;
  font-size: 11px;
}

.customerApp .identitySummary:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.customerApp .customerMainTabs {
  gap: 0.28rem;
  margin: 0.55rem 0 0.8rem;
  padding: 0.22rem;
  border: 1px solid var(--cq-border-soft);
  border-radius: 16px;
  background: rgba(8, 12, 26, 0.72);
}

.customerApp .customerMainTab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  min-height: 46px;
  padding: 0.4rem 0.28rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.customerMainTabIcon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: currentColor;
  opacity: 0.9;
}

.customerMainTabLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customerApp .customerMainTab.is-active {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(120deg, rgba(37, 99, 235, 0.55), rgba(124, 58, 237, 0.5));
  color: #fff;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.28);
}

.customerApp .customerMainTab[data-tab="promo"].is-active {
  border-color: rgba(167, 139, 250, 0.4);
  background: linear-gradient(120deg, rgba(67, 56, 202, 0.42), rgba(124, 58, 237, 0.38));
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.18);
}

.customerApp .customerFavoritesBadge {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  box-shadow: 0 0 10px rgba(219, 39, 119, 0.35);
}

.customerApp .customerPromoBadge {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.28);
}

.customerApp .customerPromoAds {
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 18px;
  background:
    linear-gradient(160deg, rgba(30, 58, 138, 0.14), rgba(15, 23, 42, 0.55)),
    var(--cq-panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.customerApp .customerPromoAdsHeader strong {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: #c4b5fd;
}

.customerApp .customerPromoCardMedia {
  border-color: rgba(139, 92, 246, 0.28);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08);
}

@media (max-width: 430px) {
  .customerApp .customerMainTabs {
    gap: 0.18rem;
    padding: 0.16rem;
  }

  .customerApp .customerMainTab {
    flex-direction: column;
    min-height: 48px;
    padding: 0.28rem 0.12rem 0.32rem;
    gap: 0.12rem;
    font-size: 10px;
    line-height: 1.15;
  }

  .customerMainTabIcon {
    width: 13px;
    height: 13px;
  }

  .customerMainTabLabel {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .customerApp .customerFavoritesBadge,
  .customerApp .customerPromoBadge {
    position: absolute;
    top: 0.18rem;
    right: 0.18rem;
    min-width: 1.05rem;
    margin-left: 0;
    padding: 0.05rem 0.22rem;
    font-size: 9px;
  }

  .customerApp .customerMainTab {
    position: relative;
  }
}

@media (min-width: 768px) {
  .customerApp .customerMainTab {
    min-height: 48px;
    padding: 0.55rem 0.55rem;
    gap: 0.4rem;
    font-size: 13px;
  }

  .customerMainTabIcon {
    width: 15px;
    height: 15px;
  }
}

.customerApp .quickSearch {
  position: relative;
  margin-bottom: 0.7rem;
  padding: 1rem 0.95rem 1.05rem;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(30, 58, 138, 0.22), rgba(15, 23, 42, 0.55)),
    var(--cq-panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(139, 92, 246, 0.08);
}

.customerApp .quickSearchHeading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.customerApp .quickSearchHeading h1 {
  font-size: clamp(22px, 5.8vw, 28px);
  letter-spacing: -0.03em;
}

.customerApp .quickSearchHeading p {
  color: #a5b4fc;
  font-size: 13px;
}

.quickSearchDecor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #f0abfc;
  background: rgba(192, 38, 211, 0.12);
  box-shadow: 0 0 16px rgba(232, 121, 249, 0.25);
}

.quickSearchDecor svg {
  width: 20px;
  height: 20px;
}

.customerApp .quickSearchRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.quickSearchField {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 52px;
  padding: 0 0.9rem;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.55);
}

.quickSearchFieldIcon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #93c5fd;
  opacity: 0.85;
}

.customerApp .quickSearchField input {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cq-text);
  font-size: 16px;
  box-shadow: none;
}

.customerApp .quickSearchField input:focus {
  outline: none;
}

.quickSearchField:focus-within {
  border-color: rgba(139, 92, 246, 0.65);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.customerApp .quickSearchRow button {
  width: 100%;
  min-height: 52px;
  height: auto;
  padding: 0.85rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}

.customerApp .quickSearchRow button::after {
  content: " →";
  font-weight: 700;
}

.customerApp .quickSearchRow button:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

.customerValueCard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.45rem;
  border: 1px solid var(--cq-border-soft);
  border-radius: 16px;
  background: rgba(10, 14, 28, 0.72);
}

.customerValueItem {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.2rem 0.25rem;
  text-align: center;
}

.customerValueItem + .customerValueItem {
  border-left: 1px solid rgba(148, 163, 184, 0.14);
}

.customerValueIcon {
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
}

.customerValueIconFast {
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.55));
}

.customerValueIconFair {
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45));
}

.customerValueIconEnjoy {
  color: #f0abfc;
  filter: drop-shadow(0 0 6px rgba(232, 121, 249, 0.45));
}

.customerValueItem strong {
  color: #e2e8f0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.customerValueItem p {
  margin: 0;
  color: var(--cq-muted);
  font-size: 10px;
  line-height: 1.25;
}

.customerApp .customerSupportCluster {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.customerApp .customerSupportChip {
  min-height: 44px;
  border-radius: 14px;
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(15, 23, 42, 0.55);
  color: #fde68a;
  box-shadow: none;
  font-size: 12px;
}

.customerApp .customerSupportChip:hover,
.customerApp .customerSupportChip:focus-visible {
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(69, 46, 10, 0.28);
}

.customerApp .myQueueSection {
  margin-top: 0.55rem;
}

.customerApp .myQueueHeader h2 {
  color: var(--cq-text);
}

.customerAppFooter {
  gap: 0.1rem;
  padding: 0.45rem 0.85rem 0.7rem;
  background: transparent;
  color: #64748b;
}

.customerFooterCredit {
  display: grid;
  gap: 0.12rem;
  margin: 0;
  justify-items: center;
  font-size: 10px;
  line-height: 1.3;
}

.customerAppFooter .borneovibesCredit {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

.customerAppFooter .borneovibesCredit:hover {
  color: #bfdbfe;
}

@media (max-width: 374px) {
  .customerValueCard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.35rem;
  }

  .customerValueItem {
    display: grid;
    justify-items: center;
    gap: 0.12rem;
    padding: 0.1rem 0.15rem;
    text-align: center;
  }

  .customerValueItem + .customerValueItem {
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    border-top: 0;
    padding-top: 0.1rem;
  }

  .customerValueIcon {
    font-size: 13px;
  }

  .customerValueItem strong {
    font-size: 9px;
    letter-spacing: 0.02em;
  }

  .customerValueItem p {
    font-size: 9px;
    line-height: 1.2;
  }

  .customerMainTabLabel {
    font-size: 12px;
  }

  .customerTenantBrand strong {
    font-size: 14px;
  }

  .customerApp .customerSupportChip {
    min-height: 42px;
    padding: 0.35rem 0.45rem;
    font-size: 11px;
  }

  .customerApp .quickSearch {
    margin-bottom: 0.55rem;
    padding: 0.85rem 0.8rem 0.9rem;
  }

  .customerApp .quickSearchHeading {
    margin-bottom: 0.65rem;
  }
}

@media (min-width: 768px) {
  .customerApp .quickSearchRow {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .customerApp .quickSearchRow button {
    width: auto;
    min-width: 8.5rem;
  }
}

/* Floating PUSAS promo CTA — primary discovery for Promosi */
.customerPusasFab {
  --pusas-size: 88px;
  position: fixed;
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0px) + 0.45rem));
  z-index: 850;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--pusas-size);
  height: var(--pusas-size);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1e1b4b;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.45),
    0 0 22px rgba(251, 191, 36, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.05;
  text-align: center;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: customerPusasFabIntro 1.15s ease-out 1;
}

.customerPusasFab--image {
  background: #000;
}

.customerPusasFabArt {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.customerPusasFab .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.customerPusasFab[hidden] {
  display: none !important;
}

.customerPusasFab:focus-visible {
  outline: 2px solid #fef08a;
  outline-offset: 3px;
}

.customerPusasFab:active {
  transform: scale(0.96);
}

.customerPusasFab.is-attention:not(.is-settled) {
  animation:
    customerPusasFabIntro 1.15s ease-out 1,
    customerPusasFabPulse 2.4s ease-in-out 1.2s 2;
}

.customerPusasFab.is-settled,
.customerPusasFab.is-promo-open {
  animation: none;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.45),
    0 0 14px rgba(251, 191, 36, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.customerPusasFab.is-keyboard-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.customerPusasFabIcon {
  display: none;
}

.customerPusasFabCopy {
  display: none;
}

.customerPusasFabBadge {
  position: absolute;
  top: -0.1rem;
  right: -0.05rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  border: 2px solid #0f172a;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
}

/* Artwork already includes decorative notification badge */
.customerPusasFab--image .customerPusasFabBadge {
  display: none !important;
}

.customerPusasFabBadge[hidden] {
  display: none !important;
}

@keyframes customerPusasFabIntro {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.86);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes customerPusasFabPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(15, 23, 42, 0.45),
      0 0 22px rgba(251, 191, 36, 0.55),
      0 10px 24px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(15, 23, 42, 0.4),
      0 0 30px rgba(251, 191, 36, 0.85),
      0 12px 28px rgba(0, 0, 0, 0.42);
  }
}

@media (max-width: 380px) {
  .customerPusasFab {
    --pusas-size: 78px;
  }
}

@media (min-width: 768px) {
  .customerPusasFab {
    --pusas-size: 72px;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.75rem));
  }
}

@media (min-width: 1100px) {
  .customerPusasFab {
    --pusas-size: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customerPusasFab,
  .customerPusasFab.is-attention:not(.is-settled) {
    animation: none;
  }
}

.customerApp .customerPromoOrderBtn {
  font-size: 15px;
  letter-spacing: 0.05em;
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.2),
    0 10px 22px rgba(16, 185, 129, 0.28);
}


/* ===== SindingQ Venue Radar (/cari customer) ===== */
.tenantFindRadarPage {
  --radar-ring: rgba(96, 165, 250, 0.22);
  --radar-glow: rgba(59, 130, 246, 0.18);
  --radar-panel: rgba(10, 18, 36, 0.78);
  --radar-border: rgba(96, 165, 250, 0.28);
}

.tenantFindRadarPage .tenantFindHeader {
  position: relative;
}

.venueRadarHero {
  max-width: 720px;
  margin: 0.35rem auto 1rem;
}

.venueRadarShell {
  width: min(100% - 1.5rem, 1120px);
}

.venueRadarHero h1 {
  margin: 0.35rem 0 0.45rem;
  font-size: clamp(26px, 5.2vw, 42px);
}

.venueRadarHero p {
  font-size: clamp(13px, 1.7vw, 16px);
}

.venueRadarMenuToggle {
  display: none;
  width: 44px;
  min-height: 44px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--radar-border);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  font-size: 1.15rem;
}

.venueRadarApp {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.venueRadarStatusPill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 420px);
  margin: 0 auto;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--radar-border);
  border-radius: 999px;
  background: rgba(8, 15, 30, 0.82);
  backdrop-filter: blur(10px);
}

.venueRadarStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.18);
  flex-shrink: 0;
}

.venueRadarStatusPill[data-tone="locating"] .venueRadarStatusDot,
.venueRadarApp.is-locating .venueRadarStatusDot {
  background: #38bdf8;
  animation: venueRadarPulse 1.4s ease-in-out infinite;
}

.venueRadarStatusPill[data-tone="active"] .venueRadarStatusDot {
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

.venueRadarStatusPill[data-tone="error"] .venueRadarStatusDot {
  background: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.16);
}

.venueRadarStatusPill[data-tone="warn"] .venueRadarStatusDot {
  background: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18);
}

.venueRadarApp.manual-only .venueRadarSweep {
  opacity: 0.25;
}

.venueRadarApp.manual-only .venueRadarNodes {
  display: none;
}

.venueRadarApp.has-poor-accuracy .venueRadarNodeDistance {
  opacity: 0.85;
}

.venueRadarRequestSong[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

.venueRadarStatusCopy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.venueRadarStatusCopy strong {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
}

.venueRadarStatusCopy small {
  color: #94a3b8;
  font-size: 11px;
}

.venueRadarStatusAction {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(14, 116, 144, 0.28);
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 800;
}

.venueRadarLayout {
  display: grid;
  gap: 1rem;
}

.venueRadarStageWrap {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
}

.venueRadarStage {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.2);
  background:
    radial-gradient(circle at center, rgba(37, 99, 235, 0.18), transparent 58%),
    radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.14), transparent 42%),
    rgba(5, 10, 22, 0.92);
  box-shadow:
    inset 0 0 40px rgba(37, 99, 235, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.35);
}

.venueRadarRings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.venueRadarRings span {
  position: absolute;
  inset: 12%;
  border: 1px solid var(--radar-ring);
  border-radius: 50%;
}

.venueRadarRings span:nth-child(2) { inset: 22%; opacity: 0.9; }
.venueRadarRings span:nth-child(3) { inset: 34%; opacity: 0.75; }
.venueRadarRings span:nth-child(4) { inset: 46%; opacity: 0.55; }

.venueRadarSweep {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(56, 189, 248, 0.18) 28deg,
    transparent 56deg
  );
  animation: venueRadarSweep 5.5s linear infinite;
  pointer-events: none;
  opacity: 0.85;
}

.venueRadarCenter {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.venueRadarCenterCore {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.2);
}

.venueRadarCenterPulse {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.35);
  animation: venueRadarPulse 2s ease-out infinite;
}

.venueRadarCenter strong {
  margin-top: 0.9rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #e0f2fe;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.venueRadarNodes {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.venueRadarNode {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0.22rem;
  width: 78px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f8fafc;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* Global button:hover uses translateY(-1px) and would wipe centering. */
  filter: none;
  transition: none;
}

.venueRadarNode:hover,
.venueRadarNode:focus,
.venueRadarNode:active,
.venueRadarNode:focus-visible {
  transform: translate(-50%, -50%);
  filter: none;
}

.venueRadarNode:hover .venueRadarNodeAvatar,
.venueRadarNode:focus-visible .venueRadarNodeAvatar {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 0 18px color-mix(in srgb, var(--node-accent, #38bdf8) 45%, transparent);
}

.venueRadarNode:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 4px;
  border-radius: 16px;
}

.venueRadarNodeAvatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--node-accent, #38bdf8);
  background: rgba(8, 15, 30, 0.92);
  box-shadow: 0 0 16px color-mix(in srgb, var(--node-accent, #38bdf8) 35%, transparent);
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
}

.venueRadarNodeAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.venueRadarNodeMic {
  position: absolute;
  top: -2px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--node-accent, #38bdf8);
  color: #041018;
  font-size: 10px;
  font-weight: 900;
}

.venueRadarNodeDistance {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(8, 15, 30, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 10px;
  font-weight: 800;
  color: #e2e8f0;
  backdrop-filter: blur(8px);
}

.venueRadarNodeName {
  max-width: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.venueRadarNode.is-selected .venueRadarNodeAvatar {
  transform: scale(1.08);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18),
    0 0 22px color-mix(in srgb, var(--node-accent, #38bdf8) 55%, transparent);
}

.venueRadarNode.is-selected .venueRadarNodeDistance {
  border-color: color-mix(in srgb, var(--node-accent, #38bdf8) 60%, white);
  color: #fff;
}

.venueRadarDisclaimer {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.venueRadarSide {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.venueRadarPanel,
.venueRadarListPanel,
.venueRadarManual,
.venueRadarQrPromo {
  padding: 1rem 1.05rem;
  border: 1px solid var(--radar-border);
  border-radius: 20px;
  background: var(--radar-panel);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.venueRadarPanel[hidden],
.venueRadarListPanel[hidden],
.venueRadarManual[hidden],
.venueRadarQrPromo[hidden],
.venueRadarEmpty[hidden],
.venueRadarSelected[hidden],
.venueRadarVerified[hidden] {
  display: none !important;
}

.venueRadarPanel {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}

.venueRadarPanelEyebrow {
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.venueRadarPanel strong,
.venueRadarVerified strong {
  font-size: 1.15rem;
  font-weight: 900;
  color: #f8fafc;
}

.venueRadarPanel p,
.venueRadarVerified p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.45;
}

.venueRadarActiveBadge {
  display: inline-flex;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(22, 163, 74, 0.16);
  color: #bbf7d0;
  font-size: 11px;
  font-weight: 800;
}

.venueRadarPanelActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.25rem;
}

.venueRadarPrimary,
.venueRadarSecondary,
.venueRadarTextButton {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 800;
}

.venueRadarPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(59, 130, 246, 0.55);
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  text-decoration: none;
}

.venueRadarSecondary {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
}

.venueRadarTextButton {
  padding: 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  color: #93c5fd;
  font-size: 12px;
}

.venueRadarPanelHint {
  font-size: 12px !important;
}

.venueRadarPanelError {
  color: #fecaca !important;
  font-size: 12px !important;
  font-weight: 700;
}

.venueRadarVerified {
  justify-items: center;
  text-align: center;
}

.venueRadarVerifiedMark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #86efac;
  font-size: 1.35rem;
  font-weight: 900;
}

.venueRadarVerifiedLead {
  margin-bottom: 0.35rem !important;
}

.venueRadarRequestSong {
  width: 100%;
  max-width: 280px;
}

.venueRadarListHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.venueRadarListHeader h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.venueRadarListHeader small {
  color: #64748b;
  font-size: 11px;
}

.venueRadarList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.venueRadarListItem {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 56px;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(8, 15, 30, 0.55);
  cursor: pointer;
}

.venueRadarListItem:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.venueRadarListItem.is-selected {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 58, 138, 0.28);
}

.venueRadarListSwatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.venueRadarListCopy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.venueRadarListCopy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
}

.venueRadarListCopy small {
  color: #94a3b8;
  font-size: 11px;
}

.venueRadarListDistance {
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.venueRadarListChevron {
  color: #64748b;
  font-size: 1.15rem;
}

.venueRadarManualSearch input {
  width: 100%;
  min-height: 48px;
  margin-bottom: 0.65rem;
}

.venueRadarQrPromo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.venueRadarQrPromoIcon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(45, 212, 191, 0.16);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: #99f6e4;
  font-weight: 900;
}

.venueRadarQrPromo strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 13px;
}

.venueRadarQrPromo span {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.45;
}

@keyframes venueRadarSweep {
  to { transform: rotate(360deg); }
}

@keyframes venueRadarPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .venueRadarSweep,
  .venueRadarCenterPulse,
  .venueRadarStatusPill[data-tone="locating"] .venueRadarStatusDot,
  .venueRadarApp.is-locating .venueRadarStatusDot {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .tenantFindRadarPage .tenantFindHeader {
    flex-direction: row;
    align-items: center;
  }

  .venueRadarMenuToggle {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
  }

  .tenantFindRadarPage .tenantRegisterNav {
    display: none;
    position: absolute;
    top: 4.5rem;
    right: 0.75rem;
    left: 0.75rem;
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--radar-border);
    background: rgba(8, 15, 30, 0.96);
  }

  .tenantFindRadarPage.findNavOpen .tenantRegisterNav {
    display: flex;
  }

  .venueRadarStatusPill {
    border-radius: 18px;
    width: 100%;
  }

  .venueRadarNode {
    width: 70px;
  }

  .venueRadarNodeAvatar {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 860px) {
  .tenantFindRadarPage .venueRadarShell {
    padding-top: 0.65rem;
    padding-bottom: 1.5rem;
  }

  .venueRadarHero {
    max-width: none;
    margin: 0 0 0.85rem;
    text-align: left;
  }

  .venueRadarHero h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(28px, 2.4vw, 34px);
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .venueRadarHero p {
    margin: 0;
    max-width: 36rem;
    font-size: 15px;
    line-height: 1.45;
  }

  /* Status + radar left, panels right — one tight composition */
  .venueRadarApp {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(360px, 1fr);
    grid-template-areas:
      "status side"
      "stage side";
    column-gap: 1.5rem;
    row-gap: 0.7rem;
    align-items: start;
    margin-bottom: 0.75rem;
  }

  .venueRadarStatusPill {
    grid-area: status;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 16px;
  }

  .venueRadarLayout {
    display: contents;
  }

  .venueRadarStageWrap {
    grid-area: stage;
    justify-items: stretch;
    gap: 0.45rem;
  }

  .venueRadarStage {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
  }

  .venueRadarSide {
    grid-area: side;
    gap: 0.85rem;
    min-width: 0;
  }

  .venueRadarPanel,
  .venueRadarListPanel,
  .venueRadarManual,
  .venueRadarQrPromo {
    padding: 0.95rem 1rem;
  }

  .venueRadarListHeader h2 {
    font-size: 1.05rem;
  }

  .venueRadarNode {
    width: 96px;
  }

  .venueRadarNodeAvatar {
    width: 48px;
    height: 48px;
  }

  .venueRadarNodeName {
    max-width: 110px;
    font-size: 11px;
  }

  .venueRadarNodeDistance {
    font-size: 11px;
  }

  .venueRadarDisclaimer {
    text-align: center;
    font-size: 12px;
  }
}

@media (min-width: 1100px) {
  .venueRadarApp {
    grid-template-columns: minmax(340px, 420px) minmax(400px, 1fr);
    column-gap: 1.85rem;
  }

  .venueRadarStage {
    max-width: 420px;
  }
}

@media (max-width: 360px) {
  .venueRadarNodeName {
    max-width: 64px;
    font-size: 9px;
  }

  .venueRadarNodeDistance {
    font-size: 9px;
  }
}