@font-face {
  font-family: "Bounded";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Bounded-Variable.ttf") format("truetype");
}

:root {
  --font-sans: "Bounded", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --show-bg: #000000;
  --show-panel-fill: #000000;
  --show-command-bg: #000000;
  --show-command-text: #ffffff;
  --show-command-panel-border: #c850ff;
  --show-glow-command-panel: rgba(200, 80, 255, 0.72);
  --show-glow-command-panel-soft: rgba(200, 80, 255, 0.38);
  --show-time-panel-border: #00ff66;
  --show-glow-time-panel: rgba(0, 255, 102, 0.72);
  --show-glow-time-panel-soft: rgba(0, 255, 102, 0.38);
  --show-memo-idle: #ffffff;
  --show-memo-timed: #00ff66;
  --show-glow-memo-idle: rgba(255, 255, 255, 0.55);
  --show-memo-idle-soft: rgba(255, 255, 255, 0.28);
  --show-glow-memo-timed: rgba(0, 255, 102, 0.75);
  --show-glow-memo-timed-soft: rgba(0, 255, 102, 0.35);
  --show-camera-panel-border: #3476ff;
  --show-glow-camera-panel: rgba(52, 118, 255, 0.88);
  --show-glow-camera-panel-soft: rgba(52, 118, 255, 0.52);
  --show-glow-blue-soft: rgba(52, 118, 255, 0.28);
  --show-timer-elapsed-color: #ffffff;
  --show-timer-remaining-color: #00ff66;
  --show-warning-color: #00ff66;
  --show-warn-pre: #ff8c00;
  --show-warn-critical: #ff3333;
  --show-glow-warn-pre: rgba(255, 140, 0, 0.75);
  --show-glow-warn-pre-soft: rgba(255, 140, 0, 0.35);
  --show-glow-warn-critical: rgba(255, 51, 51, 0.8);
  --show-glow-warn-critical-soft: rgba(255, 51, 51, 0.38);
  --show-text-on-dark: #f7f9fc;
  --show-track-green: #00ff66;
  --show-track-violet: #6b4ce6;
  --show-track-blue: #2f74ff;
  --show-stage-brand-inner-bg: #000000;
  --show-row-inset: rgba(255, 255, 255, 0.06);
  --show-slash-note-border: rgba(255, 255, 255, 0.62);
  --show-memo-progress-bg: rgba(255, 255, 255, 0.22);
  --show-memo-progress-active-bg: rgba(255, 255, 255, 0.18);
  --show-cue-name-color: #f6f6f8;
  --show-track-bar-border: rgba(255, 255, 255, 0.32);
  --show-track-bar-border-active: #ffffff;
  --show-block-scale: 0.98;
  --show-block-gap: clamp(14px, 2vh, 24px);
  --show-track-h: calc(72px * var(--show-block-scale));
  --show-next-h: calc(72px * var(--show-block-scale));
}

.showModeLight {
  --show-bg: #f4f5f8;
  --show-panel-fill: #ffffff;
  --show-command-bg: #ffffff;
  --show-command-text: #12151c;
  --show-memo-idle: #12151c;
  --show-text-on-dark: #12151c;
  --show-timer-elapsed-color: #12151c;
  --show-stage-brand-inner-bg: #ffffff;
  --show-cue-name-color: #12151c;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--show-bg);
  color: var(--show-text-on-dark);
  overflow: hidden;
}

.showModeContent {
  display: grid;
  grid-template-rows: minmax(var(--show-track-h), var(--show-track-h)) minmax(260px, 1fr) minmax(0, 50vh);
  grid-template-areas: "track" "middle" "stage";
  gap: var(--show-block-gap);
  height: 100vh;
  max-height: 100vh;
  padding: 14px;
  overflow: hidden;
  font-family: var(--font-sans);
}

.showTrackBar {
  grid-area: track;
  height: var(--show-track-h);
  border-radius: 16px;
  border: 2px solid var(--show-track-bar-border);
  overflow: hidden;
  background: #0a0a0e;
  box-shadow: 0 0 0 3px var(--show-glow-blue-soft), 0 0 20px rgba(52, 118, 255, 0.28);
}
.showModeLight .showTrackBar { background: #e8e8ec; }
.showTrackBar.showTrackBarActive {
  border-color: var(--show-track-bar-border-active);
  box-shadow: 0 0 6px var(--show-memo-idle-soft), 0 0 14px var(--show-glow-memo-idle);
}

.cueNameContainer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cueNameFill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  overflow: hidden;
}
.cueNameFillGradient {
  width: 100vw;
  height: 100%;
  background-image: linear-gradient(90deg, #00ff66 0%, #6b4ce6 12%, #2f74ff 32%, #ff8c00 48%, #ff3333 76%, #ff3333 100%);
}
.cueNameText {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 3.6vh, 38px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
  color: var(--show-cue-name-color);
}
.cueNameText b { margin-right: 0.35em; }
.cueNameText .qlabCueIcon,
.cueNameText i.qlabCueIcon {
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  width: 1.15em;
  min-width: 1.15em;
  text-align: center;
}
.cueNameText .fa-play.qlabCueIcon,
.cueNameText i.green.qlabCueIcon {
  color: var(--show-time-panel-border) !important;
}
.cueNameText .fa-forward-step.qlabCueIcon,
.cueNameText .fa-pause.qlabCueIcon,
.cueNameText i.blue.qlabCueIcon {
  color: var(--show-command-panel-border) !important;
}

.showMiddleRow {
  grid-area: middle;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--show-block-gap);
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

.commandsPanel,
.timePanel,
.showNextRow,
.showStage,
.showUpcomingRow {
  border-radius: 16px;
}

.commandsPanel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 22px 14px 16px;
  border: 2px solid var(--show-command-panel-border);
  box-shadow:
    0 0 6px var(--show-glow-command-panel-soft),
    0 0 14px var(--show-glow-command-panel),
    0 0 28px var(--show-glow-command-panel-soft),
    inset 0 0 0 1px rgba(200, 80, 255, 0.25);
  background: var(--show-command-bg);
  color: var(--show-command-text);
  overflow: hidden;
}
.commandsPanelHeaderLabel {
  display: block;
  font-size: clamp(14px, 1.6vh, 20px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.commandsList {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--command-row-gap, clamp(10px, 1.4vh, 16px));
  --command-row-gap: clamp(10px, 1.4vh, 16px);
  padding: 6px 0;
}
.commandRow {
  flex: 0 0 calc(
    (100% - (var(--command-layout-slots, 4) - 1) * var(--command-row-gap)) / var(--command-layout-slots, 4)
  );
  min-height: 0;
  max-height: calc(
    (100% - (var(--command-layout-slots, 4) - 1) * var(--command-row-gap)) / var(--command-layout-slots, 4)
  );
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 10px;
  border-radius: 12px;
  border: 2px solid var(--show-memo-idle);
  background: var(--show-panel-fill);
  box-shadow: 0 0 6px var(--show-memo-idle-soft), 0 0 14px var(--show-glow-memo-idle);
}
.commandRow.idle {
  border-color: var(--show-memo-timed);
  box-shadow: 0 0 6px var(--show-glow-memo-timed-soft), 0 0 14px var(--show-glow-memo-timed);
}
.commandRow.pre {
  border-color: var(--show-warn-pre);
  box-shadow: 0 0 6px var(--show-glow-warn-pre-soft), 0 0 14px var(--show-glow-warn-pre);
}
.commandRow.past {
  border-color: var(--show-warn-critical);
  box-shadow: 0 0 6px var(--show-glow-warn-critical-soft), 0 0 14px var(--show-glow-warn-critical);
}
.commandRowHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.memoLabel, .memoCountdown, .commandSlashNote {
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 2.2vh, 28px);
}
.commandRow.idle .memoLabel, .commandRow.idle .memoCountdown { color: var(--show-memo-timed); }
.commandRow.pre .memoLabel, .commandRow.pre .memoCountdown { color: var(--show-warn-pre); }
.commandRow.past .memoLabel, .commandRow.past .memoCountdown { color: var(--show-warn-critical); }
.memoProgress {
  height: clamp(5px, 0.75vh, 8px);
  border-radius: 999px;
  background: var(--show-memo-progress-bg);
  overflow: hidden;
}
.memoProgressBar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--show-warn-pre);
}
.commandRow.idle .memoProgressBar { background: var(--show-memo-timed); }
.commandRow.past .memoProgressBar { background: var(--show-warn-critical); }
.commandSlashNote {
  flex: 0 0 calc(
    (100% - (var(--command-layout-slots, 4) - 1) * var(--command-row-gap)) / var(--command-layout-slots, 4)
  );
  max-height: calc(
    (100% - (var(--command-layout-slots, 4) - 1) * var(--command-row-gap)) / var(--command-layout-slots, 4)
  );
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-height: 0;
  border-radius: 12px;
  border: 2px solid var(--show-slash-note-border);
  color: var(--show-memo-idle);
  box-shadow: 0 0 6px var(--show-memo-idle-soft), 0 0 14px var(--show-glow-memo-idle);
}

.showRightColumn {
  display: flex;
  flex-direction: column;
  gap: var(--show-block-gap);
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.timePanel {
  flex: 1;
  min-height: 0;
  max-height: calc(100% - var(--show-next-h) - var(--show-block-gap));
  padding: 12px 16px 6px;
  border: 2px solid var(--show-time-panel-border);
  box-shadow: 0 0 14px var(--show-glow-time-panel);
  background: var(--show-panel-fill);
  overflow: hidden;
}
.timePanelHeader {
  text-align: right;
  font-size: clamp(14px, 1.6vh, 20px);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.timePanelStack {
  height: calc(100% - 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
}
.timePanelTimersAnchor {
  --show-time-tag-size: clamp(12px, 1.4vh, 16px);
  --show-time-tag-gap: clamp(4px, 0.55vh, 8px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.timePanelDigitsStack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 0.45em;
}
.timePanelDigits {
  display: block;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-size: clamp(40px, 8vh, 96px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.timePanelDigitsElapsed { color: var(--show-timer-elapsed-color); }
.timePanelDigitsRemaining { color: var(--show-timer-remaining-color); }
.timePanelDigitsRemaining.timerRemainingWarn { color: var(--show-warning-color); }
.timePanelDigitsRemaining.timerIdleBrand {
  color: transparent;
  background-image: linear-gradient(90deg, var(--show-track-green), var(--show-track-violet), var(--show-track-blue), var(--show-warn-pre), var(--show-warn-critical));
  -webkit-background-clip: text;
  background-clip: text;
}
.timePanelTag {
  position: relative;
  font-size: var(--show-time-tag-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.showUiRus .timePanelTag {
  font-size: calc(var(--show-time-tag-size) * 0.82);
  letter-spacing: 0.04em;
}
.timePanelTagNow {
  align-self: flex-start;
  margin-bottom: var(--show-time-tag-gap);
  color: var(--show-text-on-dark);
  text-align: left;
}
.timePanelTagEnd {
  align-self: flex-end;
  margin-top: var(--show-time-tag-gap);
  text-align: right;
  color: var(--show-timer-remaining-color);
}
.timePanelTagEnd.timePanelTagRemainingWarn { color: var(--show-warning-color); }

.showNextRow {
  flex: 0 0 var(--show-next-h);
  height: var(--show-next-h);
  min-height: var(--show-next-h);
  max-height: var(--show-next-h);
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 2px solid var(--show-warn-pre);
  border-radius: 12px;
  box-shadow:
    0 0 6px var(--show-glow-warn-pre-soft),
    0 0 14px var(--show-glow-warn-pre),
    0 0 28px var(--show-glow-warn-pre-soft);
  background: var(--show-panel-fill);
  overflow: hidden;
  color: var(--show-warn-pre);
}
.showNextContent { display: flex; align-items: center; gap: 0.35em; min-width: 0; width: 100%; }
.showNextPrefix {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex-shrink: 0;
  font-size: clamp(20px, 2.8vh, 34px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--show-warn-pre);
  text-shadow: 0 0 10px var(--show-glow-warn-pre-soft);
}
.showNextLabel, .nextTrackIcon, .showNextName {
  color: var(--show-warn-pre);
  text-shadow: 0 0 10px var(--show-glow-warn-pre-soft);
}
.showNextName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(20px, 2.8vh, 34px);
  font-weight: 700;
  text-transform: uppercase;
}

.showBottomRow {
  grid-area: stage;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--show-block-gap);
  min-height: 0;
  height: 100%;
}
.showStage {
  min-height: 0;
  border: 2px solid var(--show-camera-panel-border);
  box-shadow:
    0 0 8px var(--show-glow-camera-panel-soft),
    0 0 18px var(--show-glow-camera-panel),
    0 0 36px var(--show-glow-camera-panel-soft);
  overflow: hidden;
}
.showStageInner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--show-stage-brand-inner-bg);
}
.showStageClockBrand, .showBrand {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 22px);
  padding: clamp(12px, 3vh, 28px) 16px;
}
.showStageClockBrandLogo, .showBrandLogo {
  width: clamp(96px, 16vh, 168px);
  max-width: 42%;
  max-height: 28%;
  height: auto;
  object-fit: contain;
}
.showStageClockFull {
  font-size: clamp(48px, 12vh, 160px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
}
.showBrandTitle {
  font-size: clamp(18px, 3.2vh, 42px);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  max-width: 92%;
}
.showBrandTitleGradient {
  color: transparent;
  background-image: linear-gradient(90deg, var(--show-track-green), var(--show-track-violet), var(--show-track-blue), var(--show-warn-pre), var(--show-warn-critical));
  -webkit-background-clip: text;
  background-clip: text;
}

.showUpcomingColumn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.showUpcomingRow {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 12px;
  border: 2px solid var(--show-warn-pre);
  background: #000;
  color: #fff;
}
.showModeLight .showUpcomingRow { background: #111; }
.showUpcomingText {
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1.8vh, 20px);
}

.qlabCueNumber { margin-right: 0.3em; }
.qlabCueIcon { margin-right: 0.3em; }