.dv-help-fab {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  bottom: max(66px, calc(env(safe-area-inset-bottom) + 66px));
  z-index: 99980;
  width: 42px;
  min-width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.86);
  border-radius: 999px;
  background: #008a78;
  color: #fff;
  font: 900 0/1 Poppins, Arial, sans-serif;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(22, 8, 52, 0.24);
  cursor: pointer;
  padding: 0;
  transition: width 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dv-floating-tools-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 120010;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 13px;
  border: 1.5px solid rgba(255,255,255,0.86);
  border-radius: 999px;
  background: #08070d;
  color: #fff;
  box-shadow: 0 14px 34px rgba(16, 10, 28, 0.28);
  font: 900 0.66rem/1 Poppins, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.dv-floating-tools-toggle::before {
  content: "Hide";
}

body.dv-tools-collapsed .dv-floating-tools-toggle {
  bottom: max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #6d28d9, #f59e0b);
}

body.dv-tools-collapsed .dv-floating-tools-toggle::before {
  content: "Tools";
}

body.dv-tools-collapsed .dv-help-fab,
body.dv-tools-collapsed .dv-help-panel,
body.dv-tools-collapsed .dv-help-popover,
body.dv-tools-collapsed .dv-help-hotspot-layer,
body.dv-tools-collapsed .tv-assistant,
body.dv-tools-collapsed .dv-common-dashboard-button {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.94);
}

.dv-help-fab::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 900 1rem/1 Poppins, Arial, sans-serif;
}

.dv-help-fab:hover,
.dv-help-fab:focus-visible,
.dv-help-fab.is-open {
  width: 86px;
  transform: translateY(-1px);
  outline: none;
  box-shadow: 0 14px 30px rgba(22, 8, 52, 0.32);
}

.dv-help-fab:hover::before,
.dv-help-fab:focus-visible::before {
  content: "Help";
  text-transform: uppercase;
}

.dv-help-fab.is-open::before,
.dv-help-fab.is-open:hover::before,
.dv-help-fab.is-open:focus-visible::before {
  content: "Close";
  text-transform: uppercase;
}

.dv-help-fab.has-guide-nudge::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ffb020;
  box-shadow: 0 0 0 0 rgba(255, 176, 32, 0.55);
  animation: dvHelpNudgePulse 1.35s ease-out infinite;
}

@keyframes dvHelpNudgePulse {
  70% {
    box-shadow: 0 0 0 7px rgba(255, 176, 32, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 176, 32, 0);
  }
}

.dv-help-panel {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  right: auto;
  bottom: max(112px, calc(env(safe-area-inset-bottom) + 112px));
  z-index: 99979;
  width: min(360px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 90px));
  overflow: auto;
  border: 2px solid rgba(38, 20, 76, 0.92);
  border-radius: 20px;
  background: rgba(255,255,255,0.96);
  color: #160d2c;
  box-shadow: 0 22px 54px rgba(18, 8, 43, 0.28);
  backdrop-filter: blur(18px);
  padding: 14px;
}

.dv-help-panel[hidden],
.dv-help-popover[hidden] {
  display: none;
}

.dv-help-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dv-help-panel h2 {
  margin: 0;
  color: #5b21b6;
  font: 800 0.96rem/1.25 Poppins, Arial, sans-serif;
}

.dv-help-panel p {
  margin: 6px 0 0;
  color: #4c4165;
  font: 600 0.78rem/1.5 Poppins, Arial, sans-serif;
}

.dv-help-close {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(91, 33, 182, 0.28);
  border-radius: 999px;
  background: #fff;
  color: #5b21b6;
  font: 800 1rem/1 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.dv-help-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.dv-help-toggle {
  border: 1.5px solid #5b21b6;
  border-radius: 999px;
  background: #5b21b6;
  color: #fff;
  padding: 8px 11px;
  font: 800 0.68rem/1 Poppins, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.dv-help-toggle.is-muted {
  background: #fff;
  color: #5b21b6;
}

.dv-help-list {
  display: grid;
  gap: 8px;
}

.dv-help-card {
  border: 1.5px solid rgba(91, 33, 182, 0.18);
  border-radius: 14px;
  background: rgba(244, 255, 252, 0.84);
  padding: 10px;
}

.dv-help-card button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #160d2c;
  text-align: left;
  font: 800 0.8rem/1.35 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.dv-help-card p {
  margin-top: 8px;
  color: #4c4165;
}

.dv-help-hotspot-layer {
  position: fixed;
  inset: 0;
  z-index: 99970;
  pointer-events: none;
}

.dv-help-hotspot {
  position: fixed;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #008a78;
  color: #fff;
  font: 900 0.66rem/1 Poppins, Arial, sans-serif;
  box-shadow: 0 8px 18px rgba(22, 8, 52, 0.22);
  cursor: pointer;
  pointer-events: auto;
}

.dv-help-hotspot:hover,
.dv-help-hotspot:focus-visible {
  outline: none;
  transform: scale(1.08);
}

.dv-help-popover {
  position: fixed;
  z-index: 99990;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
  border: 2px solid rgba(38, 20, 76, 0.92);
  border-radius: 20px;
  background: rgba(255,255,255,0.98);
  color: #160d2c;
  box-shadow: 0 24px 68px rgba(18, 8, 43, 0.34);
  padding: 18px;
}

.dv-help-popover h3 {
  margin: 0 36px 8px 0;
  color: #5b21b6;
  font: 800 1.02rem/1.3 Poppins, Arial, sans-serif;
}

.dv-help-popover p {
  margin: 0;
  color: #33264d;
  font: 600 0.9rem/1.65 Poppins, Arial, sans-serif;
}

.dv-journey-spotlight {
  position: fixed;
  z-index: 99986;
  pointer-events: none;
  border: 3px solid rgba(34, 211, 238, 0.96);
  border-radius: 18px;
  background: rgba(34, 211, 238, 0.12);
  box-shadow:
    0 0 0 9999px rgba(4, 4, 7, 0.66),
    0 0 38px rgba(34, 211, 238, 0.72),
    inset 0 0 26px rgba(255, 236, 153, 0.18);
  transition: left 180ms ease, top 180ms ease, width 180ms ease, height 180ms ease;
}

.dv-journey-spotlight[hidden],
.dv-journey-coach[hidden] {
  display: none;
}

.dv-journey-target {
  position: relative;
  z-index: 99987 !important;
  outline: 2px solid rgba(34, 211, 238, 0.95) !important;
  outline-offset: 4px !important;
}

.dv-journey-coach {
  position: fixed;
  z-index: 99991;
  width: min(430px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 24px));
  overflow: auto;
  border: 2px solid rgba(124, 92, 255, 0.72);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.14), transparent 30%),
    linear-gradient(145deg, #fbf9ff, #efe8ff 58%, #d9ccff);
  color: #160d2c;
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.46),
    0 0 0 5px rgba(124, 92, 255, 0.16),
    0 0 42px rgba(34, 211, 238, 0.26);
  padding: 16px;
}

.dv-journey-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dv-journey-head span {
  color: #5b21b6;
  font: 900 0.68rem/1.2 Poppins, Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dv-journey-coach h3 {
  margin: 14px 34px 8px 0;
  color: #2a145a;
  font: 900 1.18rem/1.22 Poppins, Arial, sans-serif;
}

.dv-journey-coach p {
  margin: 0;
  color: #170f2f;
  font: 800 0.94rem/1.58 Poppins, Arial, sans-serif;
}

.dv-journey-progress {
  height: 7px;
  overflow: hidden;
  margin: 16px 0 14px;
  border-radius: 999px;
  background: rgba(91, 33, 182, 0.16);
}

.dv-journey-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5b21b6, #22d3ee);
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.44);
  transition: width 220ms ease;
}

.dv-journey-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dv-journey-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 20260612 readable first-run tutorial actions */
.dv-journey-actions .dv-help-toggle,
.dv-journey-actions .dv-help-toggle.is-muted {
  background: #f7e38a;
  border-color: rgba(42, 20, 90, 0.42);
  color: #08070d !important;
  box-shadow: 0 8px 18px rgba(22, 8, 52, 0.18);
}

.dv-journey-actions .dv-help-toggle:not(.is-muted) {
  background: linear-gradient(135deg, #f7e38a, #d9ccff);
}

@media (max-width: 720px) {
  .dv-help-fab {
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    bottom: max(62px, calc(env(safe-area-inset-bottom) + 62px));
  }

  .dv-help-panel {
    left: 12px;
    right: 12px;
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 112px));
    width: auto;
  }

  .dv-journey-coach {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
  }

  .dv-floating-tools-toggle {
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 88px));
    height: 40px;
    min-width: 40px;
    padding: 0 11px;
    font-size: 0.6rem;
  }
}

/* Global MusicGen button capitalization */
button,
[role="button"],
.primary-button,
.outline-button,
.compact-button,
.cta-button,
.ghost-button,
.idea-button,
.nav-link,
.dashboard-link-button,
.calendar-toggle,
.calendar-details-button,
.calendar-start-button,
.calendar-asset-button,
.calendar-video-link,
.calendar-song-link,
.festival-calendar-button,
.festival-vault-button {
  text-transform: uppercase !important;
}