:root {
  --bg: #0b0f16;
  --panel: #121821;
  --card: #1d2633;
  --blue: #2563eb;
  --text: #f8fafc;
  --muted: #94a3b8;
  --paper: #fffdf7;
  --ink: #111827;
  --chord: #0057d9;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter,Segoe UI,Arial,sans-serif;
  overflow: hidden;
}
.app {
  display: grid;
}
.sidebar {
  background: linear-gradient(180deg,#141b26,#0f141c);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand {
  padding: 18px;
}
.logo {
  font-size: 21px;
  font-weight: 900;
}
.search {
  margin: 0 14px 12px;
  padding: 13px;
  background: #0b0f16;
  color: white;
  outline: none;
}
.tabs {
  display: flex;
  padding: 0 14px 12px;
  gap: 8px;
}
.tabs button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 8px;
  border-bottom: 2px solid transparent;
}
.tabs .active {
  border-color: var(--blue);
}
.sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  text-transform: uppercase;
  color: #cbd5e1;
  padding: 10px 14px;
  font-weight: 800;
}
.sectionHeader button {
  background: #3b1f24;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 5px 9px;
}
.setlist {
  display: none;
  border-top: 1px solid #263244;
  border-bottom: 1px solid #263244;
  max-height: 330px;
  overflow: auto;
}
#setListBox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 10px;
}
.setItem {
  background: #1e293b;
  border: 1px solid #3b82f6;
  border-radius: 12px;
  padding: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.setItem button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 50%;
  background: #0f172a;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 14px;
}
.library {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#songList {
  overflow: auto;
}
.song {
  cursor: pointer;
}
.song:hover, .song.active {
  background: #1e293b;
}
.songArtist {
  margin-top: 4px;
}
.songActions {
  margin-top: 8px;
}
.badge, .addSet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  padding: 14px 20px;
  background: #0d1118;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
h1 {
  margin: 0;
  font-size: 24px;
}
#songMeta, #flowMeta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
#flowMeta {
  color: #93c5fd;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
button, select {
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #1e293b;
  color: white;
  padding: 0 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: inherit;
  font-weight: 700;
}
.primary {
  background: #2563eb;
}
.activeBtn {
  background: #16a34a !important;
}
.mobileSongsBtn, .mobileCloseBtn {
  display: none;
}
.sectionTabs {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  background: #0d1118;
  border-bottom: 1px solid #263244;
  overflow-x: auto;
}
.sectionTabs button {
  height: 34px;
  background: #1e293b;
  white-space: nowrap;
}
.contentArea {
  flex: 1;
  min-height: 0;
  display: grid;
  overflow: hidden;
}
.chart {
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  padding: 20px;
}
pre {
  margin: 0;
  white-space: pre;
  font-family: Consolas,"Courier New",monospace;
  font-size: 15px;
  line-height: 1.45;
}
.chord {
  font-weight: 900;
  cursor: pointer;
  min-width: 0 !important;
}
.numberChord {
  position: static;
  left: auto;
}
.sectionLabel {
  display: block;
  border-radius: 6px;
  font-weight: 900;
  width: 520px;
  max-width: 100%;
}
.sectionLabel.intro {
  background: #e8f7e8;
  color: #1f7a34;
}
.sectionLabel.verse {
  background: #e9efff;
  color: #1d4ed8;
}
.sectionLabel.chorus {
  background: #f3e8ff;
  color: #7e22ce;
}
.sectionLabel.bridge {
  background: #fff1df;
  color: #b45309;
}
.sectionLabel.ending, .sectionLabel.outro, .sectionLabel.tag {
  background: #f1f5f9;
  color: #334155;
}
.loopBanner {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 900;
  margin-bottom: 12px;
}
.flowPanel {
  background: #0d1118;
  overflow: auto;
}
.panelCard {
  background: #141b26;
  padding: 14px;
  margin-bottom: 12px;
}
.panelCard h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
}
.flowSong {
  margin-bottom: 12px;
}
.flowSong small {
  display: block;
  color: var(--muted);
  margin-bottom: 3px;
}
.flowButtons, .quickTools, .loopButtons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.flowButtons button {
  flex: 1;
}
.loopControls {
  margin-bottom: 10px;
}
.clearLoopBtn {
  background: #3b1f24;
  color: #fecaca;
}
.loopButtons button {
  background: #1e293b;
}
.loopButtons button.activeLoop {
  background: #16a34a;
  color: white;
}
.scrollSpeed, .topScrollSpeed {
  width: 100%;
  margin-top: 10px;
}
.helperText {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}
#capoHelper {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 10px;
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.45;
}
body.performance .sidebar {
  display: none;
}
body.performance .app {
  grid-template-columns: 1fr;
}
body.performance .topbar {
  background: #000;
}
body.performance .chart {
  background: #000;
  color: white;
  padding: 28px;
}
body.performance pre {
  font-size: 24px;
  line-height: 1.55;
}
body.performance .chord {
  color: #60a5fa;
}
body.performance .contentArea {
  grid-template-columns: 1fr 330px;
}
@media(max-width:900px) {
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: .25s ease;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobileSongsBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-width: 78px !important;
    padding: 0 14px !important;
    line-height: 1 !important;
    background: #7c3aed !important;
    color: white !important;
    font-weight: 800 !important;
  }
  .mobileCloseBtn {
    display: flex;
    margin: 10px 14px 0;
    background: #3b1f24;
    color: #fecaca;
    justify-content: center;
    align-items: center;
  }
  .topbar {
    display: block;
  }
  .controls {
    justify-content: flex-start;
    display: flex;
  }
  .controls button, .controls select {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .flowPanel {
    display: none !important;
  }
  .sectionTabs {
    padding: 10px 8px;
  }
  pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: clamp(10px,3vw,14px);
  }
  body.performance .app {
    grid-template-columns: 1fr !important;
  }
  body.performance .contentArea {
    display: block !important;
    grid-template-columns: none !important;
    width: 100vw !important;
    overflow: hidden !important;
  }
  body.performance .flowPanel {
    display: none !important;
  }
  body.performance .chart {
    width: 100vw !important;
    height: 100% !important;
    overflow: auto !important;
    padding: 14px !important;
  }
  body.performance pre {
    white-space: pre-wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
  body.performance .sectionTabs {
    display: flex !important;
    overflow-x: auto !important;
  }
}
@media(max-width:900px) {
  .controls button, .controls select {
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-family: Inter, Segoe UI, Arial, sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
  .controls .mobileSongsBtn {
    min-width: 78px !important;
    background: #7c3aed !important;
    color: white !important;
  }
}
@media(max-width:900px) {
  body.performance .sidebar {
    display: flex !important;
  }
  body.performance .sidebar:not(.open) {
    transform: translateX(-100%) !important;
  }
  body.performance .sidebar.open {
    transform: translateX(0) !important;
  }
}
.mobileAutoTop {
  order: -1;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 118px !important;
  height: 42px !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg,#182335,#111827) !important;
  border: 1px solid rgba(148,163,184,.13);
  overflow: hidden;
}
.mobileAutoTop button {
  width: 44px !important;
  min-width: 44px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: #16a34a !important;
}
.mobileAutoTop input[type="range"] {
  flex: 1;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  accent-color: #2563eb;
}
@media(max-width:900px) {
  .mobileAutoTop {
    display: inline-flex;
    align-items: center;
    background: #1e293b;
  }
}
.songRow {
  display: flex;
}
.songCover {
  object-fit: cover;
  background: #0f172a;
  border: 1px solid #334155;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.songInfo {
  flex: 1;
  min-width: 0;
}
.songTitle {
  font-weight: 850;
  margin-bottom: 4px;
}
.songArtist {
  color: var(--muted);
  margin-bottom: 10px;
}
.songActions {
  display: flex;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #0f172a;
  border: 1px solid #334155;
  font-size: 12px;
  font-weight: 700;
}
.addSet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #2563eb;
  color: white;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s ease;
}
.addSet:hover {
  transform: translateY(-1px);
  background: #3b82f6;
}
.setIndicator {
  display: inline-block;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
}
.inlineLoop {
  font-weight: 900 !important;
  color: #16a34a;
  margin-left: 6px;
  position: relative;
  top: -1px;
  opacity: .9;
}
.welcomeScreen {
  overflow-y: auto;
  height: 100%;
}
.welcomeHero {
  margin-bottom: 30px;
}
.welcomeHero h2 {
  margin-bottom: 12px;
}
.welcomeLead {
  max-width: 800px;
}
.welcomeCard h3 {
  margin-bottom: 16px;
}
.donateBtn {
  transition: .2s;
}
.donateBtn:hover {
  transform: translateY(-1px);
  opacity: .95;
}
.welcomeFeatures {
  max-width: 900px;
}
.featureBox {
  background: #0f172a;
  border: 1px solid #1e293b;
}
.welcomeScreen {
  color: #0f172a;
  margin: 0 auto;
}
.welcomeHero h2 {
  color: #0f172a;
  margin: 0 0 18px;
}
.welcomeLead {
  color: #475569;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.welcomeCard {
  background: #111827;
  color: #fff;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.welcomeCard h3 {
  color: #fff;
  margin-top: 0;
}
.welcomeCard p {
  color: #e5e7eb;
  line-height: 1.7;
}
.donateBtn {
  display: inline-block;
  margin-top: 18px;
  padding: 14px 26px;
  border-radius: 12px;
  background: #16a34a;
  color: white;
  text-decoration: none;
  font-weight: 800;
}
.welcomeFeatures {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.featureBox {
  background: #111827;
  color: #fff;
  border-radius: 10px;
  padding: 16px 22px;
  font-weight: 700;
}
.chartOutput.twoColumns {
  column-count: 2;
  column-gap: 48px;
}
.chartOutput.oneColumn {
  column-count: 1;
}
.dangerBtn {
  background: #7f1d1d;
  color: white;
}
.sectionBlock .sectionLabel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  margin: 0 0 10px 0;
  width: 100%;
}
.sectionContent {
  font-family: Consolas,"Courier New",monospace;
  line-height: 1.45;
  margin: 0;
}
.sectionLabel {
  display: flex;
  align-items: center;
}
.cueTools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
}
.cueTools button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.cueTools button.activeCue {
  background: transparent !important;
  color: inherit;
  filter: drop-shadow(0 0 2px #16a34a);
}
:root {
  --purple: #7c3aed;
  --purple2: #8b5cf6;
  --navH: 72px;
}
.logo {
  display: flex;
  letter-spacing: -.02em;
}
.logoMark {
  font-size: 21px;
}
.liteBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: linear-gradient(135deg,var(--purple),#a78bfa);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(124,58,237,.25);
}
.liteBadge.light {
  vertical-align: middle;
  font-size: .45em;
  transform: translateY(-3px);
}
.sidebar {
  background: radial-gradient(circle at 20% 0%,rgba(124,58,237,.18),transparent 34%),linear-gradient(180deg,#101722,#080c12);
}
.topbar {
  background: radial-gradient(circle at 82% 0%,rgba(37,99,235,.18),transparent 30%),linear-gradient(180deg,#101722,#0a0f17);
}
.controls button, .controls select, .panelCard, .song, .setItem {
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.controls .primary, .primary {
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
}
.controls .mobileSongsBtn, .tabs .active {
  border-color: var(--purple2);
}
.song:hover, .song.active {
  background: linear-gradient(135deg,rgba(124,58,237,.22),rgba(37,99,235,.12));
}
.chart {
  background: linear-gradient(180deg,#fffdf7,#fffaf0);
}
.welcomeScreen {
  max-width: 1120px;
  padding: 72px 56px;
}
.welcomeHero h2 {
  font-size: clamp(32px,4vw,54px);
  letter-spacing: -.04em;
  line-height: 1.05;
}
.welcomeIcon {
  color: var(--purple2);
}
.welcomeCard {
  background: linear-gradient(145deg,#111827,#0b1220);
  border: 1px solid rgba(255,255,255,.08);
}
.donateBtn {
  background: linear-gradient(135deg,var(--purple),#2563eb);
}
.mobileBottomNav {
  display: none;
}
@media(min-width:901px) {
  .topbar {
    padding: 18px 24px;
  }
  .controls {
    max-width: 720px;
  }
  .controls button,.controls select {
    height: 44px;
    border-radius: 14px;
  }
  .flowPanel {
    padding: 16px;
  }
  .panelCard {
    border-radius: 18px;
    padding: 16px;
  }
  .chart {
    padding: 30px;
  }
  .sectionContent {
    font-size: 16px;
    line-height: 1.55;
  }
}
@media(max-width:900px) {
  body {
    background: #070b12;
  }
  h1 {
    letter-spacing: -.03em;
  }
  .controls {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .controls .mobileSongsBtn {
    display: none !important;
  }
  .controls button, .controls select {
    background: linear-gradient(145deg,#1e293b,#172033) !important;
  }
  .controls .primary {
    grid-column: 1 / -1;
    background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  }
  .mobileAutoTop {
    justify-content: space-between;
    background: linear-gradient(145deg,#1e293b,#172033);
  }
  .sectionTabs {
    display: none;
  }
  .welcomeCard {
    margin-bottom: 18px;
  }
  .sectionContent {
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .sectionBlock .sectionLabel {
    max-width: 100%;
  }
  .mobileBottomNav {
    position: fixed;
    display: grid;
    background: rgba(8,13,22,.94);
    backdrop-filter: blur(18px);
  }
  .mobileBottomNav button {
    display: flex;
    background: transparent;
  }
  .mobileBottomNav button.active {
    background: rgba(124,58,237,.14);
  }
  .mobileCloseBtn {
    position: absolute;
    right: 14px;
    top: 12px;
    width: auto;
    z-index: 2;
  }
  body.performance .main {
    padding-bottom: 0;
  }
  body.performance .sectionTabs {
    display: flex;
  }
  body.performance .contentArea {
    height: 100svh !important;
  }
  body.performance .chart {
    padding-bottom: 80px !important;
  }
  body.performance .mobileBottomNav {
    display: none;
  }
  body.performance .mobileFloatControls {
    display: flex;
  }
}
.mobileFloatControls {
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px 18px 0 0;
}
.mobileFloatControls {
  display: none;
}
@media(max-width:900px) {
  .topbar {
    position: relative;
  }
  .topbar > div:first-child {
    margin-bottom: 8px;
  }
  h1 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #flowMeta {
    display: none;
  }
  .controls {
    align-items: center !important;
    -webkit-overflow-scrolling: touch;
  }
  .controls::-webkit-scrollbar {
    display: none;
  }
  .controls button, .controls select {
    font-size: 13px !important;
    font-weight: 850 !important;
    background: linear-gradient(145deg,#182335,#111827) !important;
    border: 1px solid rgba(148,163,184,.13) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.20) !important;
  }
  .controls .iconBtn {
    width: 42px !important;
    padding: 0 !important;
    font-size: 18px !important;
  }
  .controls select {
    min-width: 70px !important;
    padding: 0 24px 0 12px !important;
    background-image: linear-gradient(45deg,transparent 50%,#cbd5e1 50%),linear-gradient(135deg,#cbd5e1 50%,transparent 50%) !important;
    background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px !important;
    background-size: 5px 5px,5px 5px !important;
    background-repeat: no-repeat !important;
  }
  .controls .toolBtn {
    min-width: 52px !important;
    gap: 5px !important;
    padding: 0 10px !important;
  }
  .controls .toolBtn span {
    display: none;
  }
  .controls .primary, .controls .performanceBtn {
    grid-column: auto !important;
    min-width: 52px !important;
    padding: 0 12px !important;
    background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
  }
  .controls .performanceBtn span {
    display: none;
  }
  .mobileAutoTop {
    grid-column: auto !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg,#182335,#111827) !important;
    border: 1px solid rgba(148,163,184,.13);
  }
  .mobileAutoTop button {
    width: auto !important;
    border-radius: 10px !important;
    background: #16a34a !important;
  }
  .welcomeHero {
    text-align: left !important;
    margin-bottom: 18px !important;
  }
  .welcomeLead {
    margin-bottom: 18px !important;
  }
}
@media(min-width:901px) {
  .controls {
    flex-wrap: nowrap;
    align-items: center;
  }
  .controls .toolBtn {
    gap: 7px;
  }
  .controls .iconBtn {
    width: 44px;
    padding: 0;
    font-size: 18px;
  }
  .controls .performanceBtn {
    gap: 7px;
  }
}
.controls button:nth-child(2), .controls button:nth-child(3) {
  display: none !important;
}
@media(max-width:900px) {
  body.performance .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  body.performance .controls {
    display: flex !important;
  }
  body.performance .performanceBtn {
    display: inline-flex !important;
    background: #16a34a !important;
  }
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0b1220;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #7c3aed,
    #8b5cf6
  );
  border-radius: 999px;
  border: 2px solid #0b1220;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #8b5cf6,
    #a78bfa
  );
}
* {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed #0b1220;
}
.welcomeCard {
  width: 100% !important;
  max-width: 1200px !important;
}
.toolsPanel {
  display: none;
}
.toolLinks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toolLinkBtn {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg,#182335,#111827);
  border: 1px solid rgba(148,163,184,.14);
  color: #ddd6fe;
  font-weight: 800;
  cursor: pointer;
  transition: .2s;
}
.toolLinkBtn:hover {
  border-color: #8b5cf6;
  transform: translateY(-1px);
}
.legalLink {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
.legalLink a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(145deg,#182335,#111827);
  border: 1px solid rgba(148,163,184,.13);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: .18s ease;
}
.legalLink a:hover {
  transform: translateY(-1px);
  border-color: #8b5cf6;
  color: white;
  box-shadow: 0 10px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(139,92,246,.25);
}
.chord[data-shape]:hover::after {
  transform: translateY(-120%);
  background: #111827;
}
.chord {
  display: inline-block;
  min-width: ch;
  white-space: pre;
}
.chordFixed {
  position: relative;
  display: inline-block;
  white-space: pre;
  vertical-align: baseline;
  overflow: visible;
}
.chordVisual {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
:root {
  --glass: rgba(15,23,42,.76);
  --line: rgba(148,163,184,.16);
  --glow: rgba(124,58,237,.24);
}
body {
  background: radial-gradient(circle at 12% 0%,rgba(124,58,237,.16),transparent 32%),
    radial-gradient(circle at 90% 8%,rgba(37,99,235,.13),transparent 34%),
    #080c13;
}
.topbar {
  backdrop-filter: blur(16px);
}
.controls {
  gap: 10px;
}
.controls button, .controls select, .quickTools button, .flowButtons button, .loopButtons button, .capoRec {
  border: 1px solid rgba(148,163,184,.14) !important;
  background: linear-gradient(145deg,#192235,#101722) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.22) !important;
}
.controls button:hover, .controls select:hover, .quickTools button:hover, .flowButtons button:hover, .loopButtons button:hover, .capoRec:hover {
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.45) !important;
}
.primary, .activeBtn {
  background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
  color: white !important;
}
.flowPanel {
  background: radial-gradient(circle at 80% 0%,rgba(124,58,237,.10),transparent 36%),
    #0a0f17;
}
.panelCard {
  background: linear-gradient(145deg,rgba(20,27,38,.96),rgba(10,15,23,.98));
}
.chart {
  background: radial-gradient(circle at top left, rgba(124,58,237,.04), transparent 34%),
    linear-gradient(180deg,#fffdf7,#fff8eb);
}
.sectionBlock .sectionLabel {
  max-width: 560px;
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}
.sectionContent {
  padding-left: 2px;
}
.chord {
  text-shadow: 0 0 0 rgba(0,0,0,0);
}
.chord[data-shape]:hover::after {
  content: attr(data-shape);
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translate(-50%,-100%);
  background: #0f172a;
  color: white;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  white-space: nowrap;
  z-index: 99999;
}
.insightGrid {
  display: grid;
  gap: 8px;
}
.insightPill, .miniReadout {
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 13px;
  padding: 10px 12px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.45;
}
.insightPill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.insightPill span, .capoRec span {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
}
.insightPill strong, .capoRec strong {
  color: #fff;
}
.delayTool, .rangeControls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.delayTool label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}
.delayTool input, .rangeControls select, .notesBox {
  width: 100%;
  border: 1px solid rgba(148,163,184,.16);
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  padding: 10px;
  outline: none;
}
.delayTool input {
  max-width: 90px;
}
.capoRec {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: left;
  padding: 10px 12px;
  gap: 2px 8px;
}
.capoRec small {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #c4b5fd;
  align-self: center;
  font-weight: 900;
}
.capoRec.best {
  border-color: rgba(34,197,94,.42) !important;
}
.notesBox {
  line-height: 1.5;
  font-family: Inter, Segoe UI, Arial, sans-serif;
}
.setFlowPanel {
  display: none;
}
body.setFlow .setFlowPanel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(3,7,18,.82);
  backdrop-filter: blur(18px);
}
.setFlowInner {
  width: min(720px,calc(100vw - 28px));
  background: linear-gradient(145deg,#111827,#080c13);
  border: 1px solid rgba(167,139,250,.30);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  border-radius: 28px;
  padding: 34px;
  color: white;
}
.setFlowInner small {
  color: #a5b4fc;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .08em;
}
.setFlowInner strong {
  display: block;
  font-size: clamp(30px,5vw,56px);
  letter-spacing: -.04em;
  margin: 8px 0;
}
.setFlowInner span {
  color: #cbd5e1;
  font-size: 18px;
}
.setFlowInner hr {
  border: 0;
  height: 1px;
  background: rgba(148,163,184,.18);
  margin: 26px 0;
}
.setFlowActions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.setFlowActions button {
  flex: 1;
}
body.confidence .sidebar, body.confidence .flowPanel, body.confidence .sectionTabs {
  display: none !important;
}
body.confidence .app {
  grid-template-columns: 1fr !important;
}
body.confidence .contentArea {
  display: block !important;
}
body.confidence .chart {
  background: var(--wcl-sheet-bg,#172033) !important;
  color: var(--wcl-chart-text-colour,var(--wcl-sheet-ink,#f8fafc)) !important;
  padding: 28px !important;
}
body.confidence .sectionContent {
  font-size: clamp(18px,2.1vw,28px);
  line-height: 1.72;
}
body.confidence .sectionBlock {
  max-width: 1100px;
}
body.confidence .sectionBlock .sectionLabel {
  max-width: 760px;
  background: transparent !important;
  color: var(--wcl-sheet-muted,#aeb8c7) !important;
  border-color: transparent !important;
}
body.confidence .chord {
  color: var(--chord,#16a34a);
  font-size: 1.05em;
}
@media(min-width:901px) {
  .contentArea {
    grid-template-columns: minmax(0,1fr) 390px;
  }
  .chartOutput {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 22px !important;
  }
  .topbar {
    min-height: 102px;
  }
}
@media(max-width:900px) {
  .topbar {
    position: sticky;
  }
  .controls select {
    max-width: 180px;
  }
  .sectionContent {
    font-size: 13.5px !important;
  }
  .sectionBlock .sectionLabel {
    border-radius: 12px;
    padding: 8px 10px;
  }
  body.confidence .topbar {
    display: block !important;
  }
  body.confidence .chart {
    padding: 14px !important;
  }
  body.confidence .sectionContent {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .setFlowInner {
    padding: 24px;
  }
  .setFlowActions {
    flex-direction: column;
  }
}
select, select option {
  background: #111827 !important;
  color: #ffffff !important;
}
@media(max-width:900px) {
  .controls {
    gap: 10px !important;
  }
  .controls button, .controls select {
    min-width: 64px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
  }
  #keySelect, #capoSelect {
    min-width: 74px !important;
  }
  #chordStyleSelect {
    min-width: 145px !important;
  }
  .mobileAutoTop {
    margin-right: 6px !important;
  }
}
body.performance .performanceBtn, body.confidence .confidenceBtn, #setFlowBtn.activeBtn, #numbersBtn.activeBtn, #quickNumbersBtn.activeBtn, #simplifyBtn.activeBtn, #autoScrollBtn.activeAuto, #mobileAutoScrollBtn.activeAuto, .mobileAutoTop button.activeAuto {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,.45),
    0 0 18px rgba(34,197,94,.30) !important;
}
body.confidence .main, body.confidence .contentArea {
  min-height: 0 !important;
  overflow: hidden !important;
}
body.confidence .chart {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100% !important;
  -webkit-overflow-scrolling: touch;
}
body.confidence #chartOutput {
  padding-bottom: 120px !important;
}
.padLaunchBtn {
  width: 100%;
  margin: 0 0 12px;
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(124,58,237,.22);
}
.insightButton {
  width: 100%;
  border: none;
  text-align: left;
  cursor: pointer;
}
.droneRecommendationBox {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.droneRecommendationBox button {
  min-height: 48px;
  height: auto;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
}
.droneRecommendationBox span {
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 900;
}
.droneRecommendationBox strong {
  font-size: 16px;
  color: #fff;
}
.droneKeyGrid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 14px 0 16px;
}
.droneKeyBtn {
  height: 70px;
  border-radius: 20px;
  background: linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.92));
  border: 1px solid rgba(148,163,184,.16);
  color: white;
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
}
.droneKeyBtn span {
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.03em;
}
.droneKeyBtn:hover, .droneKeyBtn.activeDroneKey {
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.30),
    0 0 24px rgba(124,58,237,.28);
}
@media(max-width:900px) {
  .mobileBottomNav button {
    min-width: 0;
  }
  .droneKeyBtn {
    height: 64px;
    border-radius: 18px;
  }
  .droneKeyBtn span {
    font-size: 21px;
  }
}
:root {
  --wc-bg: #060d15;
  --wc-shell: #09111a;
  --wc-panel: #0d1824;
  --wc-line: rgba(255,255,255,.075);
  --wc-text: #fff4dc;
  --wc-muted: #9fb1c5;
  --wc-gold: #d9ab63;
  --wc-purple: #8b5cf6;
  --wc-blue: #657cff;
}
body {
  background: radial-gradient(circle at 85% 0%,rgba(139,92,246,.15),transparent 31%),
    radial-gradient(circle at 12% 0%,rgba(217,171,99,.11),transparent 25%),
    linear-gradient(180deg,#060d15,#04080d);
}
.desktopAppBar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),var(--wc-shell);
  border-bottom: 1px solid var(--wc-line);
  position: relative;
  z-index: 9999;
  box-shadow: 0 12px 32px rgba(0,0,0,.30);
}
.desktopBrand {
  display: flex;
  min-width: max-content;
}
.desktopLogo {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,#f6d28c,#d9ab63);
  font-weight: 900;
}
.desktopBrandText {
  display: flex;
}
.desktopBrandText span {
  color: #b9a57f;
  font-size: 10px;
  margin-top: 3px;
}
.desktopMenus {
  display: flex;
  align-items: center;
  gap: 2px;
}
.desktopMenu {
  position: relative;
}
.desktopMenu > button {
  height: 31px;
  padding: 0 12px;
  border-radius: 9px;
  background: transparent;
  color: #a9b8c9;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 750;
}
.desktopMenu:hover > button,.desktopMenu:focus-within > button {
  background: rgba(255,255,255,.065);
  color: white;
}
.desktopDropdown {
  position: absolute;
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),#0b1520;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 55px rgba(0,0,0,.48);
  backdrop-filter: blur(18px);
}
.desktopMenu:hover .desktopDropdown,.desktopMenu:focus-within .desktopDropdown {
  display: block;
}
.desktopDropdown button {
  padding: 0 11px;
  background: transparent;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  color: #dce7f2;
  font-size: 13px;
  font-weight: 650;
}
.desktopDropdown button:hover {
  background: linear-gradient(135deg,rgba(139,92,246,.20),rgba(217,171,99,.10));
  color: #fff8e7;
}
.desktopDropdown hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 7px 4px;
}
.widgetDropdown span[data-widget-check] {
  display: inline-flex;
  width: 18px;
  color: #d9ab63;
  font-weight: 900;
}
.widgetDropdown span.widgetOff {
  color: rgba(159,177,197,.32);
}
.desktopQuickTools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.desktopQuickTools button {
  height: 32px;
  border-radius: 10px;
  padding: 0 12px;
  background: #101d2b;
  border: 1px solid rgba(255,255,255,.075);
  color: #d9e5ef;
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
}
.desktopQuickTools .desktopLiveBtn {
  background: linear-gradient(135deg,var(--wc-purple),var(--wc-blue));
  color: white;
}
.app {
  height: calc(100vh - 46px);
  grid-template-columns: 300px 1fr;
}
body.performance .desktopAppBar {
  display: flex !important;
}
body.performance .app {
  height: calc(100vh - 46px) !important;
}
.controls .performanceBtn {
  display: none !important;
}
.sidebar {
  background: linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),linear-gradient(180deg,#0a1520,#071019);
  border-right: 1px solid var(--wc-line);
}
.topbar {
  min-height: 78px;
  background: radial-gradient(circle at top right,rgba(217,171,99,.10),transparent 28%),linear-gradient(180deg,#0d1723,#08111a);
  border-bottom: 1px solid var(--wc-line);
}
.controls button,.controls select {
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg,#132131,#0d1824);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: none;
}
.contentArea {
  grid-template-columns: minmax(0,1fr) 335px;
}
.flowPanel {
  background: linear-gradient(180deg,#09111a,#060d15);
  border-left: 1px solid var(--wc-line);
  padding: 14px;
}
.panelCard {
  background: linear-gradient(145deg,#122033,#0c1724);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  border-radius: 18px;
}
.panelCard h3 {
  color: #f5dcaa;
  letter-spacing: .075em;
}
.flowPanel .panelCard[data-widget] {
  display: none;
}
.flowPanel .panelCard[data-widget].widgetVisible {
  display: block;
}
.flowPanel .panelCard[data-widget]::before {
  content: "";
  display: block;
  height: 2px;
  margin: -14px -14px 12px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg,rgba(217,171,99,.75),rgba(139,92,246,.35),transparent);
}
.song,.setItem {
  background: linear-gradient(145deg,#132131,#0d1824);
  border: 1px solid rgba(255,255,255,.065);
  box-shadow: none;
}
.song:hover,.song.active {
  transform: translateY(-1px);
  background: linear-gradient(145deg,rgba(139,92,246,.20),rgba(217,171,99,.08));
  border-color: rgba(217,171,99,.30);
}
.chart {
  background: radial-gradient(circle at top right,rgba(217,171,99,.10),transparent 24%),
  radial-gradient(circle at 50% 10%,rgba(255,255,255,.65),transparent 56%),linear-gradient(180deg,#fffdf7,#fff8ea);
}
.chord {
  color: #7656ff;
}
.primary,.addSet,.donateBtn {
  background: linear-gradient(135deg,var(--wc-purple),var(--wc-blue)) !important;
}
.liteBadge {
  background: linear-gradient(135deg,#f6d28c,#d9ab63);
  color: #160f05;
}
.tabs .active {
  background: rgba(217,171,99,.12);
  color: #fff3dc;
  border-bottom: none;
}
.search {
  background: #061018;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.badge {
  background: #061018;
  color: #dec38b;
}
.worshipPadHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.worshipPadHeader h3 {
  margin-bottom: 6px;
}
.worshipPadHeader p {
  margin: 0;
}
.worshipPadLiveBadge {
  border-radius: 999px;
  background: #1f2937;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.worshipPadLiveBadge.on {
  background: linear-gradient(135deg,#16a34a,#8b5cf6);
}
.worshipPadNow {
  padding: 11px 12px;
  border-radius: 14px;
  background: linear-gradient(145deg,#09131f,#0f1b2b);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 12px;
}
.worshipPadNow small {
  display: block;
  color: #9fb1c5;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 4px;
}
.worshipPadNow strong {
  color: #fff4dc;
  font-size: 16px;
}
.worshipPadModeRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 8px;
}
.worshipPadModeRow button {
  height: 36px;
  border-radius: 11px;
  background: #101d2b;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: none;
}
.worshipPadModeRow button.activeDroneMode {
  background: linear-gradient(135deg,#8b5cf6,#657cff);
  color: white;
}
.worshipPadGrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.worshipPadGrid button, .droneKeyBtn {
  min-width: 0;
  padding: 0;
  background: radial-gradient(circle at top,rgba(217,171,99,.10),transparent 60%),
    linear-gradient(145deg,#132131,#0d1824);
  font-weight: 950;
}
.worshipPadGrid button:hover {
  transform: translateY(-1px);
  border-color: rgba(217,171,99,.35);
}
.worshipPadGrid button.activeDroneKey, .droneKeyBtn.activeDroneKey {
  background: radial-gradient(circle at top,rgba(255,255,255,.22),transparent 60%),
    linear-gradient(135deg,#d9ab63,#8b5cf6);
  color: white;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 24px rgba(139,92,246,.30);
}
.worshipPadControl {
  background: rgba(6,16,24,.64);
  margin-bottom: 10px;
}
.worshipPadControlHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.worshipPadControl label, .delayTool label {
  color: #d9c089;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.worshipPadControl span {
  font-weight: 900;
}
.worshipPadRecommendations {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.worshipPadRecommendations button, .insightButton, .insightPill {
  width: 100%;
  justify-content: space-between;
  background: linear-gradient(145deg,#132131,#0d1824);
  box-shadow: none;
}
.worshipPadDelay input {
  width: 100%;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.075);
  background: #061018;
  color: white;
  padding: 0 10px;
}
.notesBox {
  min-height: 150px;
  resize: vertical;
}
@media(max-width:900px) {
  .controls .performanceBtn {
    display: inline-flex !important;
  }
}
.mobileDeviceSelector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}
.mobileDeviceSelector label {
  font-size: 11px;
  color: #b9a57f;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mobileDeviceSelector select {
  height: 32px;
  border-radius: 10px;
  background: #101d2b;
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.08);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
body.preview-iphone14 .app {
  margin: 0 auto;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}
body.preview-galaxyS24 .app {
  margin: 0 auto;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}
body.preview-ipadAir .app {
  margin: 0 auto;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}
@media(max-width:900px) {
  body {
    background: #04080d;
  }
  .desktopBrandText span {
    display: none;
  }
  .desktopQuickTools {
    display: none;
  }
  .mobileDeviceSelector {
    display: none;
  }
  .sidebar {
    position: relative;
  }
  .tagline {
    display: none;
  }
  .searchWrap {
    padding: 0 12px;
  }
  .search {
    font-size: 14px;
  }
  .tabs button {
    padding: 0 12px;
  }
  .chart {
    border-radius: 0;
  }
  .chartOutput {
    max-width: 100%;
  }
  .sectionLabel {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
  }
  .chordLine {
    font-size: 16px !important;
  }
  .lyricsLine {
    font-size: 15px !important;
    line-height: 1.55;
  }
  .chord {
    font-size: 15px !important;
  }
  .flowPanel {
    position: fixed;
    transform: translateY(calc(100% - 54px));
    transition: transform .28s ease;
    backdrop-filter: blur(24px);
  }
  .flowPanel.mobilePanelOpen {
    transform: translateY(0);
  }
  .flowPanel::before {
    content: "Widgets";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    margin: 0 auto 14px;
    color: transparent;
    font-size: 0;
  }
  .panelCard {
    border-radius: 18px;
    margin-bottom: 12px;
  }
  .mobileWidgetToggle {
    position: fixed;
    background: linear-gradient(135deg,#8b5cf6,#657cff);
  }
  .desktopDropdown {
    position: fixed;
  }
  body.performance .chart {
    padding-top: 24px;
  }
  body.performance .topbar {
    display: none;
  }
  body.performance .flowPanel {
    bottom: 10px;
    height: 50vh;
  }
}
body.preview-iphone14, body.preview-galaxyS24, body.preview-ipadAir {
  background: #02060b !important;
}
body.preview-iphone14 .desktopAppBar, body.preview-galaxyS24 .desktopAppBar, body.preview-ipadAir .desktopAppBar {
  max-width: none;
  width: 100%;
}
body.preview-iphone14 .app, body.preview-galaxyS24 .app, body.preview-ipadAir .app {
  height: calc(100vh - 46px) !important;
  margin: 0 auto !important;
  border-left: 1px solid rgba(255,255,255,.10);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 80px rgba(0,0,0,.45);
  overflow: hidden;
}
body.preview-iphone14 .app {
  max-width: 430px !important;
}
body.preview-galaxyS24 .app {
  max-width: 480px !important;
}
body.preview-ipadAir .app {
  max-width: 820px !important;
}
body.preview-iphone14 .app, body.preview-galaxyS24 .app {
  display: flex !important;
  flex-direction: column !important;
}
body.preview-iphone14 .sidebar, body.preview-galaxyS24 .sidebar {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  max-height: 285px !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden !important;
  z-index: 5 !important;
}
body.preview-iphone14 .main, body.preview-galaxyS24 .main {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.preview-iphone14 .contentArea, body.preview-galaxyS24 .contentArea {
  display: block !important;
  grid-template-columns: none !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.preview-iphone14 .topbar, body.preview-galaxyS24 .topbar {
  min-height: auto !important;
  padding: 10px 12px !important;
  display: block !important;
}
body.preview-iphone14 .topbar h1, body.preview-galaxyS24 .topbar h1 {
  font-size: 22px !important;
  line-height: 1.1 !important;
}
body.preview-iphone14 .controls, body.preview-galaxyS24 .controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-bottom: 6px !important;
}
body.preview-iphone14 .controls button, body.preview-iphone14 .controls select, body.preview-galaxyS24 .controls button, body.preview-galaxyS24 .controls select {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
  padding: 0 12px !important;
}
body.preview-iphone14 .chart, body.preview-galaxyS24 .chart {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 18px 14px 120px !important;
}
body.preview-iphone14 .flowPanel, body.preview-galaxyS24 .flowPanel {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: min(100vw, 430px) !important;
  height: 58vh !important;
  transform: translateX(-50%) translateY(calc(100% - 56px)) !important;
  border-left: none !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 24px 24px 0 0 !important;
  z-index: 900 !important;
  overflow-y: auto !important;
  padding: 12px !important;
  background: linear-gradient(180deg,#09111a,#060d15) !important;
}
body.preview-galaxyS24 .flowPanel {
  width: min(100vw, 480px) !important;
}
body.preview-iphone14 .flowPanel.mobilePanelOpen, body.preview-galaxyS24 .flowPanel.mobilePanelOpen {
  transform: translateX(-50%) translateY(0) !important;
}
body.preview-iphone14 .mobileWidgetToggle, body.preview-galaxyS24 .mobileWidgetToggle {
  display: block !important;
  position: fixed !important;
  left: calc(50% + 150px) !important;
  right: auto !important;
  bottom: 16px !important;
  z-index: 1001 !important;
}
body.preview-iphone14 #songList, body.preview-galaxyS24 #songList {
  max-height: 150px !important;
  overflow: auto !important;
  padding: 8px !important;
}
body.preview-iphone14 .song, body.preview-galaxyS24 .song {
  padding: 10px !important;
  margin-bottom: 7px !important;
  border-radius: 14px !important;
}
body.preview-iphone14 .songTitle, body.preview-galaxyS24 .songTitle {
  font-size: 14px !important;
}
body.preview-iphone14 .songArtist, body.preview-galaxyS24 .songArtist {
  font-size: 11px !important;
}
body.preview-ipadAir .app {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
}
body.preview-ipadAir .contentArea {
  grid-template-columns: minmax(0,1fr) 300px !important;
}
body.preview-ipadAir .sidebar {
  position: relative !important;
  transform: none !important;
  width: auto !important;
  height: 100% !important;
}
body.preview-ipadAir .flowPanel {
  position: relative !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  bottom: auto !important;
}
@media(max-width:900px) {
  .desktopBrandText span {
    display: none !important;
  }
  .desktopMenus {
    flex: 0 0 auto;
  }
  .desktopQuickTools, .mobileDeviceSelector {
    display: none !important;
  }
  .sidebar {
    position: relative !important;
    inset: auto !important;
  }
  .brand {
    padding: 12px 14px 8px !important;
  }
  .logo {
    font-size: 18px !important;
  }
  .tagline {
    display: none !important;
  }
  .search {
    height: 42px !important;
    margin: 0 12px 10px !important;
    border-radius: 14px !important;
  }
  .tabs {
    padding: 0 12px 8px !important;
    gap: 6px !important;
    overflow-x: auto !important;
  }
  .tabs button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    height: 34px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }
  #songList {
    overflow: auto !important;
  }
  h1 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  .contentArea {
    grid-template-columns: none !important;
  }
  .chart {
    overflow: auto !important;
  }
  .welcomeScreen {
    max-width: 100% !important;
  }
  pre, .sectionContent {
    white-space: pre-wrap !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }
  .flowPanel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 24px 24px 0 0 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    background: linear-gradient(180deg,#09111a,#060d15) !important;
  }
  .flowPanel::before {
    display: none !important;
  }
  .mobileWidgetToggle {
    display: block !important;
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 1001 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg,#8b5cf6,#657cff) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }
  .worshipPadGrid {
    grid-template-columns: repeat(4,1fr) !important;
  }
  .worshipPadGrid button {
    height: 48px !important;
    font-size: 16px !important;
  }
}
@media(max-width:900px) {
  .desktopAppBar {
    position: relative !important;
  }
  .desktopMenus, .desktopMenu {
    overflow: visible !important;
  }
  .app {
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar {
    border-bottom: none !important;
  }
  body.mobileShowSet .library, body.mobileShowSet .toolsPanel {
    display: none !important;
  }
  body.mobileShowSet .setlist {
    display: block !important;
    max-height: none !important;
  }
  body.mobileShowTools .library, body.mobileShowTools .setlist {
    display: none !important;
  }
  body.mobileShowTools .toolsPanel {
    display: block !important;
    padding: 12px !important;
  }
  .main {
    flex: 1 !important;
  }
  .chart {
    padding-bottom: 120px !important;
  }
  .mobileBottomNav {
    background: rgba(8,17,26,.94) !important;
    backdrop-filter: blur(22px) !important;
  }
  .mobileBottomNav button.active {
    background: linear-gradient(135deg,rgba(139,92,246,.36),rgba(217,171,99,.16)) !important;
  }
  .flowPanel {
    bottom: 76px !important;
    height: 56vh !important;
    transform: translateY(calc(100% - 56px)) !important;
    z-index: 30000 !important;
  }
  .flowPanel.mobilePanelOpen {
    transform: translateY(0) !important;
  }
  .mobileWidgetToggle {
    display: none !important;
  }
  body.mobileShowPads .flowPanel {
    transform: translateY(0) !important;
  }
  body.mobileShowPads .sidebar {
    display: none !important;
  }
  body:not(.mobileShowPads) .flowPanel:not(.mobilePanelOpen) {
    transform: translateY(100%) !important;
  }
}
body.preview-iphone14 .mobileBottomNav, body.preview-galaxyS24 .mobileBottomNav {
  display: grid !important;
  grid-template-columns: repeat(6,1fr) !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 8px !important;
  width: calc(min(100vw, 430px) - 16px) !important;
  height: 64px !important;
  transform: translateX(-50%) !important;
  padding: 6px !important;
  z-index: 50000 !important;
  border-radius: 24px !important;
  background: rgba(8,17,26,.94) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(22px) !important;
}
body.preview-galaxyS24 .mobileBottomNav {
  width: calc(min(100vw, 480px) - 16px) !important;
}
body.preview-iphone14 .mobileBottomNav button, body.preview-galaxyS24 .mobileBottomNav button {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #cbd5e1 !important;
}
body.preview-iphone14 .mobileBottomNav button.active, body.preview-galaxyS24 .mobileBottomNav button.active {
  background: linear-gradient(135deg,rgba(139,92,246,.36),rgba(217,171,99,.16)) !important;
  color: #fff4dc !important;
}
body.preview-iphone14.mobileShowSongs .sidebar, body.preview-iphone14.mobileShowSet .sidebar, body.preview-iphone14.mobileShowTools .sidebar, body.preview-galaxyS24.mobileShowSongs .sidebar, body.preview-galaxyS24.mobileShowSet .sidebar, body.preview-galaxyS24.mobileShowTools .sidebar {
  display: flex !important;
  position: fixed !important;
  left: 50% !important;
  top: 46px !important;
  bottom: 80px !important;
  width: min(100vw, 430px) !important;
  transform: translateX(-50%) !important;
  z-index: 12000 !important;
  max-height: none !important;
}
body.preview-galaxyS24.mobileShowSongs .sidebar, body.preview-galaxyS24.mobileShowSet .sidebar, body.preview-galaxyS24.mobileShowTools .sidebar {
  width: min(100vw, 480px) !important;
}
body.preview-iphone14.mobileShowPads .flowPanel, body.preview-galaxyS24.mobileShowPads .flowPanel {
  transform: translateX(-50%) translateY(0) !important;
}
body.preview-iphone14:not(.mobileShowPads) .flowPanel:not(.mobilePanelOpen), body.preview-galaxyS24:not(.mobileShowPads) .flowPanel:not(.mobilePanelOpen) {
  transform: translateX(-50%) translateY(100%) !important;
}
@media(max-width:900px) {
  .desktopDropdown {
    overflow: visible !important;
    display: none;
  }
  .desktopMenu:hover .desktopDropdown, .desktopMenu:focus-within .desktopDropdown {
    display: block !important;
  }
}
@media(max-width:900px) {
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
  }
  .library {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #songList {
    height: 100% !important;
  }
}
.desktopAppBar, .desktopMenus, .desktopMenu {
  overflow: visible !important;
  z-index: 999999 !important;
}
.desktopDropdown {
  position: fixed !important;
  top: 46px !important;
  left: auto !important;
  z-index: 9999999 !important;
}
.desktopDropdown {
  width: 220px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: calc(100vh - 70px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: none;
}
.desktopMenu:hover .desktopDropdown, .desktopMenu:focus-within .desktopDropdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.desktopDropdown button {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.desktopMenu:last-child .desktopDropdown {
  right: 0 !important;
  left: auto !important;
}
@media(max-width:900px) {
  #songList {
    pointer-events: auto !important;
  }
}
.mobileCloseBtn {
  display: none !important;
}
.sidebar > #songList {
  display: none !important;
}
@media(max-width:900px) {
  body.mobileShowSongs .sidebar, body.mobileShowSet .sidebar, body.mobileShowTools .sidebar {
    display: flex !important;
    flex-direction: column !important;
  }
  body.mobileShowSongs .library {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  body.mobileShowSongs .setlist, body.mobileShowSongs .toolsPanel {
    display: none !important;
  }
  .song {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  body.mobileShowHome .sidebar {
    display: none !important;
  }
  .chart {
    display: block !important;
  }
  #chartOutput {
    min-height: 100% !important;
  }
}
.mobileScreen {
  display: none;
}
@media(min-width:901px) {
  .mobileScreen {
    display: none !important;
  }
}
@media(min-width:901px) {
  .desktopMenu {
    position: relative !important;
  }
  .desktopDropdown {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 70px) !important;
    overflow-x: hidden !important;
  }
  .desktopMenu:last-child .desktopDropdown {
    left: auto !important;
    right: -12px !important;
  }
}
@media(max-width:900px) {
  :root {
    --mobileTop: 50px;
    --mobileNav: 74px;
  }
  html, body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #050b12 !important;
  }
  body {
    position: fixed !important;
    inset: 0 !important;
  }
  .desktopAppBar {
    display: flex !important;
    height: var(--mobileTop) !important;
    padding: 0 8px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
    z-index: 60000 !important;
  }
  .desktopBrand {
    flex: 0 0 auto !important;
  }
  .desktopLogo {
    width: 24px !important;
    height: 24px !important;
  }
  .desktopBrandText strong {
    font-size: 12px !important;
  }
  .desktopBrandText span, .desktopQuickTools {
    display: none !important;
  }
  .desktopMenus {
    display: flex !important;
    gap: 2px !important;
    overflow: visible !important;
  }
  .desktopMenu:nth-child(2), .desktopMenu:nth-child(3), .desktopMenu:nth-child(5) {
    display: none !important;
  }
  .desktopMenu {
    position: relative !important;
    overflow: visible !important;
  }
  .desktopMenu > button {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
  }
  .desktopDropdown {
    position: absolute !important;
  }
  .desktopDropdown button {
    font-size: 13px !important;
  }
  .app {
    height: calc(100vh - var(--mobileTop)) !important;
    display: block !important;
    grid-template-columns: none !important;
    overflow: hidden !important;
  }
  .main {
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .topbar {
    display: block !important;
    min-height: 0 !important;
    top: auto !important;
  }
  .topbar h1, #songTitle {
    font-size: 22px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #songMeta {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #flowMeta {
    display: none !important;
  }
  .controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-top: 8px !important;
    padding: 0 0 5px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .controls::-webkit-scrollbar {
    display: none !important;
  }
  .controls button, .controls select {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 11px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }
  .controls .mobileSongsBtn, .controls .performanceBtn span, .controls .toolBtn span {
    display: none !important;
  }
  .mobileAutoTop {
    height: 40px !important;
    padding: 0 8px !important;
    gap: 8px !important;
  }
  .mobileAutoTop button {
    min-width: 44px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  .mobileAutoTop input {
    width: 54px !important;
    min-width: 54px !important;
  }
  .sectionTabs {
    display: none !important;
  }
  .chart {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  .welcomeScreen {
    padding: 24px 16px 120px !important;
    height: auto !important;
  }
  .welcomeHero h2 {
    font-size: 30px !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }
  .welcomeLead {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .welcomeCard {
    padding: 18px !important;
    border-radius: 18px !important;
  }
  .chartOutput {
    padding: 16px 12px 120px !important;
  }
  .sectionContent, pre {
    white-space: pre-wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  .sidebar {
    position: fixed !important;
    top: var(--mobileTop) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mobileNav) !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    z-index: 30000 !important;
    overflow: hidden !important;
    background: linear-gradient(180deg,#0b1520,#071019) !important;
  }
  body.mobile-view-songs .sidebar, body.mobile-view-set .sidebar, body.mobile-view-tools .sidebar {
    display: flex !important;
    flex-direction: column !important;
  }
  body.mobile-view-songs .library {
    flex-direction: column !important;
  }
  body.mobile-view-tools .toolsPanel {
    display: block !important;
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px 12px 100px !important;
  }
  body.mobile-view-tools .library, body.mobile-view-tools .setlist {
    display: none !important;
  }
  #songList {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .song {
    padding: 10px !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
  }
  .songTitle {
    font-size: 15px !important;
  }
  .songArtist {
    font-size: 11px !important;
  }
  .mobileScreen {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 14px 120px !important;
    background: linear-gradient(180deg,#09111a,#060d15) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  body.mobile-view-pad #mobilePadScreen, body.mobile-view-tools #mobileToolsScreen {
    display: block !important;
  }
  .mobileScreenHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
  }
  .mobileScreenHeader small {
    display: block !important;
    color: #d9ab63 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }
  .mobileScreenHeader h2 {
    margin: 2px 0 0 !important;
    color: #fff4dc !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
  }
  .mobilePadScreen .panelCard, .mobileToolsScreen .mobileToolCard {
    display: block !important;
    margin-bottom: 12px !important;
    border-radius: 20px !important;
  }
  .mobilePadScreen .worshipPadCard, .mobilePadScreen .panelCard[data-widget="pad"] {
    display: block !important;
    min-height: auto !important;
  }
  .mobileToolGrid {
    display: grid !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .mobileToolCard {
    background: linear-gradient(145deg,#122033,#0c1724) !important;
    padding: 14px !important;
    color: #f8fafc !important;
  }
  .mobileToolCard h3 {
    margin: 0 0 10px !important;
    color: #f5dcaa !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: .075em !important;
  }
  .contentArea > .flowPanel {
    display: none !important;
  }
  .mobileWidgetBackdrop {
    display: none !important;
    pointer-events: none !important;
  }
  body.mobileWidgetOpen {
    overflow: hidden !important;
  }
  body.mobileWidgetOpen .mobileWidgetBackdrop {
    display: none !important;
  }
  .mobileBottomNav {
    background: rgba(8,17,26,.96) !important;
    backdrop-filter: blur(20px) !important;
  }
  .mobileBottomNav button {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
    font-size: 17px !important;
  }
  .mobileBottomNav button small {
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .mobileBottomNav button.active {
    background: linear-gradient(135deg,rgba(139,92,246,.38),rgba(217,171,99,.18)) !important;
    color: #fff4dc !important;
  }
  body.performance .mobileBottomNav {
    display: grid !important;
  }
  body.performance .topbar {
    display: block !important;
  }
  body.performance .chart {
    background: #000 !important;
    color: #fff !important;
  }
}
@media(max-width:900px) {
  .desktopAppBar, .desktopMenus, .desktopMenu {
    overflow: visible !important;
  }
  .desktopDropdown {
    position: fixed !important;
    top: 42px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 68px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 90000 !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }
  .desktopMenu:last-child .desktopDropdown {
    left: 8px !important;
    right: 8px !important;
  }
  .desktopDropdown button {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    padding: 12px 12px !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .desktopDropdown hr {
    margin: 8px 4px !important;
  }
  body.mobile-view-home .sidebar {
    display: none !important;
  }
}
@media(max-width:900px) {
  #mobileWidgetMount .panelCard {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #mobileWidgetMount .worshipPadCard {
    display: block !important;
  }
  #mobileWidgetMount .worshipPadGrid {
    display: grid !important;
  }
  #mobileWidgetMount .worshipPadGrid button {
    display: flex !important;
  }
}
@media(max-width:900px) {
  .desktopMenu.menuOpen .desktopDropdown {
    display: block !important;
  }
  .desktopMenu:not(.menuOpen) .desktopDropdown {
    display: none !important;
  }
  .mobilePadScreen {
    padding-top: 10px !important;
  }
  .mobilePadScreen .mobileScreenHeader {
    display: none !important;
  }
  #mobileWidgetMount .panelCard {
    border-radius: 16px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  #mobileWidgetMount .worshipPadHeader {
    display: none !important;
  }
  #mobileWidgetMount .worshipPadNow {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  #mobileWidgetMount .worshipPadNow small {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
  #mobileWidgetMount .worshipPadNow strong {
    font-size: 14px !important;
  }
  #mobileWidgetMount .worshipPadLiveBadge {
    height: 22px !important;
    font-size: 10px !important;
  }
  #mobileWidgetMount .worshipPadModeRow {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  #mobileWidgetMount .worshipPadModeRow button {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
  #mobileWidgetMount .worshipPadGrid {
    grid-template-columns: repeat(6,1fr) !important;
    margin: 8px 0 10px !important;
  }
  #mobileWidgetMount .worshipPadGrid button, #mobileWidgetMount .droneKeyBtn {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }
  #mobileWidgetMount .worshipPadControl {
    padding: 8px 9px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  #mobileWidgetMount .worshipPadControlHead {
    margin-bottom: 5px !important;
  }
  #mobileWidgetMount .worshipPadRecommendations {
    gap: 6px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
  }
  #mobileWidgetMount .worshipPadRecommendations button, #mobileWidgetMount .insightButton, #mobileWidgetMount .insightPill {
    min-height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
  #mobileWidgetMount .delayTool {
    margin-top: 8px !important;
  }
  .mobileToolGrid {
    grid-template-columns: 1fr 1fr !important;
  }
}
.sectionBlock .sectionLabel, .sectionLabel {
  font-size: 12px !important;
  line-height: 1.15 !important;
}
.sectionBlock .sectionLabel span:first-child {
  font-size: 12px !important;
}
.cueTools button {
  font-size: 13px !important;
}
.sectionCues {
  font-size: 14px !important;
  margin: 2px 0 5px !important;
}
.chartZoomBtn {
  min-width: 48px !important;
}
@media(max-width:900px) {
  .sectionBlock .sectionLabel, .sectionLabel {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
  .sectionBlock .sectionLabel span:first-child {
    font-size: 11px !important;
  }
  .cueTools {
    gap: 3px !important;
  }
  .cueTools button {
    font-size: 12px !important;
  }
  .sectionContent {
    line-height: 1.36 !important;
  }
}
@media(max-width:900px) {
  body {
    overflow: hidden !important;
  }
  .desktopAppBar {
    display: none !important;
  }
  .main {
    overflow: hidden !important;
  }
  .topbar {
    flex: 0 0 auto !important;
  }
  .contentArea {
    display: block !important;
    overflow: hidden !important;
  }
  .chart {
    overflow-y: auto !important;
  }
  .sidebar {
    display: none !important;
  }
  .mobileScreen {
    display: none !important;
  }
  body.mobile-view-home .contentArea {
    display: block !important;
  }
  body.mobile-view-home .chart {
    display: block !important;
  }
  body.mobile-view-songs .sidebar, body.mobile-view-set .sidebar {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 30000 !important;
    width: 100vw !important;
    height: calc(100svh - 72px) !important;
    transform: none !important;
    padding-bottom: 84px !important;
    overflow: hidden !important;
  }
  body.mobile-view-songs .contentArea, body.mobile-view-set .contentArea, body.mobile-view-tools .contentArea, body.mobile-view-pad .contentArea {
    display: none !important;
  }
  body.mobile-view-songs .library {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  body.mobile-view-songs .setlist, body.mobile-view-songs .toolsPanel {
    display: none !important;
  }
  body.mobile-view-set .setlist {
    display: block !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 110px !important;
  }
  body.mobile-view-set .library, body.mobile-view-set .toolsPanel {
    display: none !important;
  }
  #songList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 120px !important;
  }
  body.mobile-view-tools #mobileToolsScreen, body.mobile-view-pad #mobilePadScreen {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 72px !important;
    z-index: 28000 !important;
    padding: 16px 14px 96px !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg,#09111a,#060d15) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .mobileToolGrid.slimMobileTools, .mobileToolGrid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .mobileToolGrid button {
    min-height: 46px !important;
    border-radius: 12px !important;
    background: #1e293b !important;
  }
  .mobileToolCard {
    margin-top: 12px !important;
  }
  #mobilePadScreen {
    padding-top: 12px !important;
  }
  #mobilePadScreen .mobileScreenHeader {
    display: none !important;
  }
  #mobileWidgetMount .panelCard, #mobileWidgetMount .mobileWidgetClone {
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: #0b1624 !important;
  }
  #mobileWidgetMount h3, #mobileWidgetMount .panelCard h3 {
    display: none !important;
  }
  #mobileWidgetMount button {
    min-height: 34px !important;
  }
  #mobileWidgetMount .droneKeyGrid, #mobileWidgetMount #droneKeyGrid {
    display: grid !important;
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  .controls select {
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 60000 !important;
  }
}
.padNowPlaying {
  background: rgba(34,197,94,.12);
  box-shadow: none !important;
}
.padSpeaker {
  line-height: 1;
}
@media(max-width:900px) {
  .padNowPlaying {
    order: -1;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    grid-column: auto !important;
    background: rgba(34,197,94,.12) !important;
  }
}
.padNowPlaying {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 48px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.13);
  border: 1px solid rgba(34,197,94,.35);
  color: #86efac;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.padNowPlaying.hidden {
  display: none !important;
}
.padSpeaker {
  font-size: 12px;
  opacity: .95;
}
.controls select {
  touch-action: manipulation;
  user-select: auto;
  -webkit-user-select: auto;
}
@media(max-width:900px) {
  .padNowPlaying {
    height: 34px;
    min-width: 54px;
    padding: 0 10px;
    grid-column: auto;
    align-self: center;
  }
  .controls select {
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
  }
}
@media (min-width:901px) {
  .desktopAppBar, .desktopMenus, .desktopMenu {
    overflow: visible !important;
  }
  .desktopDropdown {
    z-index: 100000 !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
  }
  #keySelect, #capoSelect, #chordStyleSelect {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    pointer-events: auto !important;
    user-select: auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
}
#keySelect, #capoSelect, #chordStyleSelect {
  touch-action: manipulation;
}
.dropdownControl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}
.dropdownControl select {
  width: 100%;
  height: 34px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  border: 1px solid #334155;
}
.mobileToolGrid select {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: #1e293b;
  color: white;
  border: 1px solid rgba(148,163,184,.25);
  font-weight: 800;
  text-align: center;
}
.chart .chord, .chartOutput .chord, .sectionContent .chord, pre .chord, body.performance .chord, body.confidence .chord, body.performance .chart .chord, body.confidence .chart .chord, body.performance .sectionContent .chord, body.confidence .sectionContent .chord, .numberChord {
  color: var(--chord) !important;
}
body.is-desktop-device {
  min-width: 1000px;
}
body.is-desktop-device .app {
  display: grid !important;
  grid-template-columns: 310px 1fr !important;
}
body.is-desktop-device .desktopAppBar {
  display: flex !important;
}
body.is-desktop-device .mobileBottomNav, body.is-desktop-device .mobileFloatControls, body.is-desktop-device .mobileWidgetToggle, body.is-desktop-device .mobileScreen, body.is-desktop-device #mobilePadScreen, body.is-desktop-device #mobileToolsScreen {
  display: none !important;
}
body.is-desktop-device .sidebar {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  transition: none !important;
  display: flex !important;
}
body.is-desktop-device .main {
  width: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
}
body.is-desktop-device .controls button, body.is-desktop-device .controls select {
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 0 13px !important;
}
body.is-desktop-device .mobileSongsBtn, body.is-desktop-device .mobileCloseBtn {
  display: none !important;
}
body.is-desktop-device .contentArea {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 360px !important;
}
body.is-desktop-device .flowPanel {
  display: block !important;
}
body.is-desktop-device .sectionTabs {
  display: flex !important;
}
body.is-mobile-device .app {
  grid-template-columns: 1fr !important;
}
body.is-mobile-device .sidebar {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: translateX(-100%) !important;
}
body.is-mobile-device .sidebar.open {
  transform: translateX(0) !important;
}
body.is-mobile-device .contentArea {
  grid-template-columns: 1fr !important;
}
body.is-mobile-device .flowPanel {
  display: none !important;
}
body.is-desktop-device .topbar {
  min-height: 96px !important;
  padding: 18px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
body.is-desktop-device .topbar > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.is-desktop-device .controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  scrollbar-width: none !important;
}
body.is-desktop-device .controls::-webkit-scrollbar {
  display: none !important;
}
body.is-desktop-device .controls button, body.is-desktop-device .controls select, body.is-desktop-device .mobileAutoTop {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
body.is-desktop-device #keySelect {
  width: 72px !important;
  min-width: 72px !important;
}
body.is-desktop-device #capoSelect {
  width: 78px !important;
  min-width: 78px !important;
}
body.is-desktop-device #chordStyleSelect {
  width: 150px !important;
  min-width: 150px !important;
}
body.is-desktop-device .chartZoomBtn {
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
}
body.is-desktop-device #numbersBtn, body.is-desktop-device #simplifyBtn, body.is-desktop-device #columnsBtn {
  width: auto !important;
  min-width: auto !important;
}
body.is-mobile-device {
  overflow: hidden !important;
  background: #070b12 !important;
}
body.is-mobile-device .desktopAppBar {
  display: none !important;
}
body.is-mobile-device .main {
  width: 100vw !important;
  height: 100svh !important;
  padding-bottom: 72px !important;
  overflow: hidden !important;
}
body.is-mobile-device .topbar {
  flex: 0 0 auto !important;
  display: block !important;
  min-height: 0 !important;
  width: 100vw !important;
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  background: linear-gradient(180deg,#101722,#080d15) !important;
  overflow: hidden !important;
}
body.is-mobile-device .topbar > div:first-child {
  display: block !important;
  min-width: 0 !important;
}
body.is-mobile-device #songTitle {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 18px !important;
  line-height: 1.16 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.is-mobile-device #songMeta {
  margin: 3px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.is-mobile-device #flowMeta {
  display: none !important;
}
body.is-mobile-device .controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 8px 0 0 !important;
  border-radius: 16px !important;
  background: rgba(15,23,42,.78) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
}
body.is-mobile-device .controls button, body.is-mobile-device .controls select {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg,#1e293b,#141c2b) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
body.is-mobile-device .controls .mobileSongsBtn, body.is-mobile-device #chordStyleSelect, body.is-mobile-device #simplifyBtn, body.is-mobile-device #columnsBtn, body.is-mobile-device #numbersBtn, body.is-mobile-device .chartZoomBtn, body.is-mobile-device #padNowPlaying {
  display: none !important;
}
body.is-mobile-device .controls .iconBtn {
  width: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  background: linear-gradient(145deg,#263244,#172033) !important;
}
body.is-mobile-device #keySelect {
  width: 66px !important;
  min-width: 66px !important;
  text-align: center !important;
}
body.is-mobile-device #capoSelect {
  width: 78px !important;
  min-width: 78px !important;
  text-align: center !important;
}
body.is-mobile-device .mobileAutoTop {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  background: linear-gradient(145deg,#182335,#111827) !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  overflow: hidden !important;
}
body.is-mobile-device .mobileAutoTop button {
  padding: 0 !important;
  background: #16a34a !important;
}
body.is-mobile-device .mobileAutoTop input[type="range"] {
  flex: 1 1 auto !important;
  margin: 0 !important;
  accent-color: #8b5cf6 !important;
}
body.is-mobile-device .contentArea {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow: hidden !important;
}
body.is-mobile-device .chart {
  height: 100% !important;
  overflow-y: auto !important;
  padding: 0 !important;
}
body.is-mobile-device .chartOutput {
  padding: 14px 12px 100px !important;
}
body.is-mobile-device .mobileBottomNav {
  display: grid !important;
  z-index: 70000 !important;
}
@media(max-width:380px) {
  body.is-mobile-device .topbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  body.is-mobile-device .controls .iconBtn {
    width: 34px !important;
    min-width: 34px !important;
  }
  body.is-mobile-device #keySelect {
    width: 58px !important;
    min-width: 58px !important;
  }
  body.is-mobile-device #capoSelect {
    width: 68px !important;
    min-width: 68px !important;
  }
}
.chartOutput .chord, .sectionContent .chord, pre .chord, .chord, .numberChord {
  font-family: inherit !important;
}
.chordLine, .lyricLine, .sectionContent, .chartOutput, pre {
  font-size: inherit;
}
body.is-desktop-device .sectionContent, body.is-desktop-device .chartOutput, body.is-desktop-device pre {
  font-size: 16px !important;
}
body.is-mobile-device .sectionContent, body.is-mobile-device .chartOutput, body.is-mobile-device pre {
  font-size: 14px !important;
}
body.is-mobile-device.mobile-view-songs .sidebar, body.is-mobile-device.mobile-view-set .sidebar {
  display: flex !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: 72000 !important;
}
body.is-mobile-device.mobile-view-songs .sidebar *, body.is-mobile-device.mobile-view-set .sidebar * {
  pointer-events: auto !important;
}
body.is-mobile-device #mobileWidgetMount, body.is-mobile-device #mobileWidgetMount *, body.is-mobile-device #mobilePadScreen, body.is-mobile-device #mobilePadScreen * {
  pointer-events: auto !important;
}
body.is-mobile-device #mobileWidgetMount .worshipPadModeRow button, body.is-mobile-device #mobileWidgetMount .droneKeyBtn {
  touch-action: manipulation !important;
  cursor: pointer !important;
}
.chartOutput .chord, .sectionContent .chord, pre .chord, .chord, .numberChord {
  font-size: 1em !important;
  line-height: inherit !important;
}
@media(max-width:900px) {
  .mobileBottomNav {
    position: fixed !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mobileBottomNav, .mobileBottomNav * {
    pointer-events: auto !important;
  }
  body.is-mobile-device.mobile-view-songs .sidebar, body.is-mobile-device.mobile-view-set .sidebar, body.is-mobile-device.mobile-view-tools .sidebar, body.mobile-view-songs .sidebar, body.mobile-view-set .sidebar, body.mobile-view-tools .sidebar, body.mobileShowSongs .sidebar, body.mobileShowSet .sidebar, body.mobileShowTools .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: calc(var(--navH, 72px) + max(8px, env(safe-area-inset-bottom))) !important;
    width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    z-index: 90000 !important;
    padding-bottom: 16px !important;
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-home .sidebar, body.mobile-view-home .sidebar {
    display: none !important;
    transform: translateX(-100%) !important;
  }
}
.sectionLabel {
  cursor: pointer;
  user-select: none;
}
button.sectionLabel {
  border: none;
  text-align: left;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  font: inherit;
  color: inherit;
}
.sectionToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sectionName {
  display: inline-flex;
}
.sectionBlock.collapsed .sectionBody {
  display: none;
}
.cueTools .cueBtn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  cursor: pointer;
}
.cueTools .cueBtn.activeCue {
  background: transparent !important;
  color: inherit;
  filter: drop-shadow(0 0 2px #16a34a);
}
.confidenceBtn.iconOnlyBtn {
  width: 44px;
  min-width: 44px;
  padding: 0 !important;
}
.confidenceBtn .eyeIcon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.confidence .confidenceBtn, .confidenceBtn.activeBtn {
  background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
  color: #fff !important;
}
body.is-mobile-device .controls {
  gap: 5px !important;
  padding: 5px !important;
}
body.is-mobile-device .controls button, body.is-mobile-device .controls select {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}
body.is-mobile-device .controls .iconBtn, body.is-mobile-device .controls .chartZoomBtn, body.is-mobile-device .controls .confidenceBtn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
}
body.is-mobile-device .controls .iconBtn {
  font-size: 17px !important;
}
body.is-mobile-device .controls .chartZoomBtn {
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
body.is-mobile-device #keySelect, body.is-mobile-device #capoSelect {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 18px 0 8px !important;
  text-align: center !important;
  text-align-last: center !important;
  font-size: 14px !important;
}
body.is-mobile-device #keySelect option, body.is-mobile-device #capoSelect option {
  font-size: 14px;
}
body.is-mobile-device .confidenceBtn .eyeIcon {
  width: 16px !important;
  height: 16px !important;
}
body.is-mobile-device .mobileAutoTop {
  order: 10 !important;
  width: 72px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
}
body.is-mobile-device .mobileAutoTop button {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 24px !important;
  min-height: 24px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
}
body.is-mobile-device .mobileAutoTop input[type="range"] {
  width: 26px !important;
}
@media(max-width:380px) {
  body.is-mobile-device .controls {
    gap: 4px !important;
    padding: 4px !important;
  }
  body.is-mobile-device .controls .iconBtn, body.is-mobile-device .controls .chartZoomBtn, body.is-mobile-device .controls .confidenceBtn {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
  }
  body.is-mobile-device #keySelect, body.is-mobile-device #capoSelect {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding-left: 6px !important;
  }
  body.is-mobile-device .mobileAutoTop {
    flex-basis: 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }
}
.chordColourCycleBtn {
  display: none;
}
.chordColourCycleBtn .paletteIcon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chordColourCycleBtn::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mobile-chord-colour, var(--chord));
  box-shadow: 0 0 0 2px rgba(15,23,42,.95),
    0 0 10px color-mix(in srgb, var(--mobile-chord-colour, var(--chord)) 55%, transparent);
}
@media(max-width:900px) {
  body.is-mobile-device #capoSelect {
    display: none !important;
  }
  body.is-mobile-device .chordColourCycleBtn {
    position: relative;
    display: inline-flex !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #f8fafc !important;
  }
  body.is-mobile-device .chordColourCycleBtn .paletteIcon {
    width: 16px !important;
    height: 16px !important;
  }
}
@media(max-width:380px) {
  body.is-mobile-device .chordColourCycleBtn {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
  }
  body.is-mobile-device .chordColourCycleBtn::after {
    right: 6px;
    bottom: 6px;
    width: 7px;
    height: 7px;
  }
}
.cueTools, .sectionCues {
  display: none !important;
}
.sectionBlock .sectionLabel {
  justify-content: flex-start;
}
.worshipPadControlHead.mini {
  margin-bottom: 7px;
}
.padLayerModeBtn {
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: linear-gradient(145deg,#1e293b,#111827) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: #dbeafe !important;
}
.padLayerModeBtn.activePadLayerMode {
  background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
  color: white !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.35),0 0 18px rgba(37,99,235,.25) !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadLayerModeBlock {
    margin: 8px 0 10px !important;
  }
  #mobileWidgetMount .padLayerModeRow, #mobilePadScreen .padLayerModeRow {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  #mobileWidgetMount .padLayerModeBtn, #mobilePadScreen .padLayerModeBtn {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
  }
}
.worshipPadHardStopBtn {
  margin-top: 8px !important;
}
.worshipPadHardStopBtn:hover {
  background: linear-gradient(135deg,#991b1b,#b91c1c) !important;
  color: white !important;
}
.worshipPadHardStopBtn {
  width: auto !important;
  min-width: 74px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 7px auto 0 !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,#7f1d1d,#991b1b) !important;
  color: #fee2e2 !important;
  border: 1px solid rgba(248,113,113,.38) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 7px 16px rgba(127,29,29,.18) !important;
}
.worshipPadLayerModeBlock {
  text-align: center;
}
.worshipPadHardStopBtn:hover {
  transform: translateY(-1px);
}
.worshipPadGrid button.activeDroneKey, .droneKeyGrid button.activeDroneKey {
  position: relative;
  isolation: isolate;
}
.worshipPadGrid button.activeDroneKey::after, .droneKeyGrid button.activeDroneKey::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.28);
  pointer-events: none;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadHardStopBtn, #mobilePadScreen .worshipPadHardStopBtn {
    width: auto !important;
    min-width: 64px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin-top: 5px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
  }
  #mobileWidgetMount .worshipPadLayerModeBlock, #mobilePadScreen .worshipPadLayerModeBlock {
    margin: 6px 0 8px !important;
  }
}
.worshipPadNow {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}
.worshipPadNow small, .worshipPadNow strong {
  grid-column: 1 !important;
}
.worshipPadNow .worshipPadStopInline {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
}
.worshipPadLayerModeBlock > .worshipPadHardStopBtn {
  display: none !important;
}
.worshipPadHardStopBtn.worshipPadStopInline {
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  box-shadow: 0 5px 12px rgba(127,29,29,.16) !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, .worshipPadHardStopBtn.worshipPadStopInline {
    width: auto !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    margin: 0 !important;
  }
}
.worshipPadQueueReadout {
  grid-column: 1 / -1 !important;
  margin-top: 4px !important;
  color: #93a4ba !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  opacity: .85 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.worshipPadQueueReadout.hasQueue {
  color: #bfdbfe !important;
}
.worshipPadHardStopBtn.worshipPadStopInline {
  min-width: 54px !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadQueueReadout, #mobilePadScreen .worshipPadQueueReadout, .worshipPadQueueReadout {
    font-size: 9px !important;
    margin-top: 2px !important;
  }
  #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, .worshipPadHardStopBtn.worshipPadStopInline {
    min-width: 50px !important;
  }
}
.worshipPadGrid button.queuedPadKey, .droneKeyGrid button.queuedPadKey, .droneKeyBtn.queuedPadKey {
  background: linear-gradient(135deg,#f59e0b,#d97706) !important;
  color: #fff7ed !important;
  border: 1px solid rgba(251,191,36,.65) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.18), 0 10px 20px rgba(217,119,6,.22) !important;
}
.worshipPadGrid button.lastSelectedPadKey, .droneKeyGrid button.lastSelectedPadKey, .droneKeyBtn.lastSelectedPadKey {
  background: linear-gradient(135deg,#22c55e,#16a34a) !important;
  color: #ecfdf5 !important;
  border: 1px solid rgba(134,239,172,.75) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.22), 0 12px 24px rgba(22,163,74,.26) !important;
}
.worshipPadGrid button.lastSelectedPadKey::after, .droneKeyGrid button.lastSelectedPadKey::after, .droneKeyBtn.lastSelectedPadKey::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.38);
  pointer-events: none;
}
.worshipPadGrid button.queuedPadKey::before, .droneKeyGrid button.queuedPadKey::before, .droneKeyBtn.queuedPadKey::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fed7aa;
  box-shadow: 0 0 0 2px rgba(124,45,18,.22);
  pointer-events: none;
}
@media(max-width:900px) {
  #mobileWidgetMount .droneKeyBtn.queuedPadKey::before, #mobilePadScreen .droneKeyBtn.queuedPadKey::before {
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
  }
}
.worshipPadNow {
  gap: 8px;
}
.worshipPadSwellMeter {
  width: 100%;
  margin: 8px 0 2px;
  background: rgba(15,23,42,.72);
  color: #dbeafe;
}
.swellMeterTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.swellMeterTitle {
  text-transform: uppercase;
  font-weight: 900;
}
.swellMeterRoute {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}
.swellMeterTrack {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(30,41,59,.95);
}
.swellMeterFill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,#2563eb,#8b5cf6,#22c55e);
  transition: width .12s linear;
}
.swellMeterLayers {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #94a3b8;
}
.swellLayerRow {
  display: grid;
  align-items: center;
}
.swellLayerRow span {
  font-weight: 900;
}
.swellLayerRow em {
  font-style: normal;
  text-align: right;
}
.swellLayerRow b {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg,#38bdf8,#a78bfa);
  width: var(--level,0%);
  min-width: 2px;
  transition: width .12s linear;
}
@media(max-width:900px) {
  .worshipPadSwellMeter {
    padding: 8px;
    margin-top: 7px;
  }
  .swellMeterRoute {
    font-size: 10px;
  }
}
.worshipPadGaugeOnly, .worshipPadNow.worshipPadGaugeOnly {
  position: relative;
  display: block !important;
  padding: 10px !important;
  margin-bottom: 10px !important;
}
.worshipPadNow small, .worshipPadNow strong#worshipPadCurrent, .worshipPadNow [data-wcl-id="worshipPadCurrent"] {
  display: none !important;
}
#droneTypeSwell, button#droneTypeSwell {
  display: none !important;
}
#droneTypeDrone {
  display: none !important;
}
.worshipPadQueueReadout {
  display: none !important;
}
.worshipPadGaugeOnly .worshipPadSwellMeter, .worshipPadNow .worshipPadSwellMeter {
  margin: 0 !important;
}
.worshipPadGaugeOnly .swellMeterTop {
  padding-right: 62px !important;
}
.swellMeterLayers {
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
}
.swellLayerRow {
  min-height: 14px !important;
}
.swellLayerRow.isEmpty {
  opacity: .32 !important;
}
.swellLayerRow.isEmpty b {
  min-width: 0 !important;
}
@media(max-width:900px) {
  .worshipPadGaugeOnly, .worshipPadNow.worshipPadGaugeOnly {
    padding: 9px !important;
  }
  .worshipPadGaugeOnly .worshipPadStopInline {
    right: 9px !important;
    top: 9px !important;
  }
  .worshipPadGaugeOnly .swellMeterTop {
    padding-right: 58px !important;
  }
}
body.is-mobile-device .mobileAutoTop {
  flex: 1 0 166px !important;
  min-width: 166px !important;
  max-width: 224px !important;
  gap: 10px !important;
  padding: 0 10px !important;
}
body.is-mobile-device .mobileAutoTop input[type="range"] {
  min-width: 76px !important;
  height: 28px !important;
  cursor: pointer !important;
  touch-action: pan-x !important;
}
body.is-mobile-device .mobileAutoTop input[type="range"]::-webkit-slider-thumb {
  width: 22px !important;
  height: 22px !important;
}
body.is-mobile-device .mobileAutoTop input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
}
.mobileFlowNav {
  display: none;
}
@media(max-width:900px) {
  .topbar {
    position: relative !important;
  }
  .topbar > div:first-child {
    padding-right: 128px !important;
    min-height: 48px !important;
  }
  .mobileFlowNav {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    width: 116px;
    z-index: 5;
    pointer-events: auto;
  }
  .mobileFlowNavBtn, button.mobileFlowNavBtn {
    width: 52px !important;
    height: auto !important;
    min-width: 52px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    overflow: visible !important;
  }
  .mobileFlowIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(124,58,237,.42);
    border: 1px solid rgba(196,181,253,.22);
    color: #ede9fe;
    font-size: 20px;
    font-weight: 950;
    line-height: 1;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
  }
  .mobileFlowText {
    display: block;
    width: 54px;
    min-width: 0;
    text-align: center;
    line-height: 1.05;
  }
  .mobileFlowText strong, .mobileFlowText small {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobileFlowText strong {
    color: #e5e7eb;
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: -.02em;
    opacity: .95;
  }
  .mobileFlowText small {
    color: #93c5fd;
    font-size: 7.5px;
    font-weight: 850;
    text-transform: uppercase;
    margin-top: 1px;
    letter-spacing: .01em;
    opacity: .9;
  }
  .mobileFlowNavBtn.isDisabled {
    opacity: .28;
  }
}
@media(max-width:390px) {
  .topbar > div:first-child {
    padding-right: 116px !important;
  }
  .mobileFlowNav {
    right: 9px;
    gap: 8px;
    width: 106px;
  }
  .mobileFlowNavBtn, button.mobileFlowNavBtn {
    width: 49px !important;
    min-width: 49px !important;
  }
  .mobileFlowText {
    width: 50px;
  }
}
body.is-mobile-device .mobileFlowIcon {
  display: inline-grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
}
body.is-mobile-device .mobileFlowIcon::before {
  content: attr(data-arrow);
  display: block !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}
body.is-mobile-device .mobileFlowNavBtn:first-child .mobileFlowIcon::before {
  content: "‹";
}
body.is-mobile-device .mobileFlowNavBtn:last-child .mobileFlowIcon::before {
  content: "›";
}
body.is-mobile-device #columnsBtn {
  display: inline-flex !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg,#1e293b,#141c2b) !important;
  color: #f8fafc !important;
}
body.is-mobile-device #columnsBtn span {
  display: none !important;
}
@media(max-width:380px) {
  body.is-mobile-device #columnsBtn {
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    font-size: 13px !important;
  }
}
.setItemEditable {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px !important;
}
.setItemInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.setItemTitle {
  color: #f8fafc;
  font-weight: 850;
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setItemSub {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setCapoText {
  color: #c4b5fd;
}
.setItemControls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.setKeyControl {
  height: 32px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid rgba(148,163,184,.2);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.setKeySelect {
  width: 52px;
  height: 26px;
  min-height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: #111827;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none !important;
}
.setMoveBtn, .setRemoveBtn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
.setMoveBtn {
  background: #1e293b !important;
  color: #dbeafe !important;
  border: 1px solid rgba(148,163,184,.18) !important;
}
.setMoveBtn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.setRemoveBtn {
  background: #3b1f24 !important;
  color: #fecaca !important;
}
@media(max-width:900px) {
  .setItemEditable {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 9px;
  }
  .setItemTitle {
    font-size: 16px;
  }
  .setItemSub {
    font-size: 12px;
  }
  .setItemControls {
    width: 100%;
    justify-content: space-between;
  }
  .setKeyControl {
    flex: 1;
    justify-content: space-between;
    height: 36px;
  }
  .setKeySelect {
    width: 72px;
    height: 30px;
  }
  .setMoveBtn, .setRemoveBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}
@media (min-width:901px) {
  #capoSelect.capoCompactSelect {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 118px !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device #capoSelect.capoCompactSelect {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 18px 0 8px !important;
    border-radius: 11px !important;
    background: #1e293b !important;
    color: #f8fafc !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-align-last: center !important;
  }
  body.is-mobile-device #capoSelect.capoCompactSelect option {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}
@media(max-width:380px) {
  body.is-mobile-device #capoSelect.capoCompactSelect {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding-left: 6px !important;
  }
}
body.is-desktop-device .app {
  height: calc(100vh - 46px) !important;
  min-height: 0 !important;
}
body.is-desktop-device .main, body.is-desktop-device .contentArea {
  min-height: 0 !important;
}
body.is-desktop-device .contentArea {
  height: 100% !important;
}
body.is-desktop-device .chart {
  height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 80px !important;
}
body.is-desktop-device .chartOutput.twoColumns {
  overflow: visible !important;
  padding-bottom: 180px !important;
}
body.is-desktop-device .chartOutput.twoColumns .sectionBlock {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
#songList {
  padding: 6px 8px 12px !important;
}
.song {
  padding: 8px 10px !important;
  margin-bottom: 7px !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg,rgba(19,33,49,.86),rgba(9,18,29,.92)) !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  box-shadow: none !important;
}
.song:hover, .song.active {
  transform: none !important;
  background: linear-gradient(145deg,rgba(139,92,246,.18),rgba(217,171,99,.07)) !important;
  border-color: rgba(217,171,99,.32) !important;
}
.songRow {
  gap: 10px !important;
  align-items: center !important;
}
.songCover {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
}
.songInfo {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas: "title actions"
    "artist actions"
    "views actions" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}
.songTitle {
  grid-area: title !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  letter-spacing: -.015em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.songArtist {
  grid-area: artist !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.songActions {
  grid-area: actions !important;
  margin: 0 !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.badge, .addSet {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.addSet {
  min-width: 48px !important;
}
.setIndicator {
  width: 7px !important;
  height: 7px !important;
  margin-left: 5px !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.18) !important;
}
@media(max-width:900px) {
  body.is-mobile-device #songList {
    padding: 6px 8px 96px !important;
    max-height: none !important;
  }
  body.is-mobile-device .library {
    min-height: 0 !important;
  }
  body.is-mobile-device .song {
    padding: 7px 9px !important;
    margin-bottom: 6px !important;
    border-radius: 12px !important;
  }
  body.is-mobile-device .songRow {
    gap: 9px !important;
  }
  body.is-mobile-device .songCover {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 9px !important;
  }
  body.is-mobile-device .songTitle {
    font-size: 13px !important;
  }
  body.is-mobile-device .songArtist {
    font-size: 10.5px !important;
  }
  body.is-mobile-device .badge, body.is-mobile-device .addSet {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  body.is-mobile-device .addSet {
    min-width: 44px !important;
  }
}
@media(max-width:380px) {
  body.is-mobile-device .songInfo {
    grid-template-columns: minmax(0,1fr) auto !important;
    column-gap: 6px !important;
  }
  body.is-mobile-device .songCover {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  body.is-mobile-device .songActions {
    gap: 4px !important;
  }
  body.is-mobile-device .badge {
    padding: 0 7px !important;
  }
  body.is-mobile-device .addSet {
    padding: 0 7px !important;
    min-width: 40px !important;
  }
}
.song {
  position: relative !important;
  background: linear-gradient(145deg,rgba(17,28,43,.92),rgba(8,16,27,.96)) !important;
  border-color: rgba(148,163,184,.13) !important;
}
.song::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(124,58,237,.12),transparent 44%);
  opacity: 0;
  transition: opacity .16s ease;
}
.song:hover::before, .song.active::before {
  opacity: 1;
}
.song.active {
  border-color: rgba(124,58,237,.78) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.18), 0 12px 28px rgba(0,0,0,.22) !important;
}
.songTitle, .songArtist, .songActions, .songCover {
  position: relative;
  z-index: 1;
}
.songKeyBadge {
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  color: #c7d2fe !important;
  background: rgba(15,23,42,.74) !important;
  border: 1px solid rgba(99,102,241,.22) !important;
  letter-spacing: .02em !important;
}
.songBars {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  color: #8b5cf6;
}
.songBars i {
  display: block;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,#a78bfa,#5b7cfa);
  opacity: .95;
}
.songBars i:nth-child(1) {
  height: 8px;
}
.songBars i:nth-child(2) {
  height: 15px;
}
.songBars i:nth-child(3) {
  height: 11px;
}
.songMore {
  background: transparent !important;
}
.songMore:hover {
  background: rgba(148,163,184,.10) !important;
  color: #fff !important;
}
.addSet {
  background: linear-gradient(135deg,#6d5dfc,#8b5cf6) !important;
  box-shadow: 0 8px 18px rgba(124,58,237,.20) !important;
}
@media(max-width:900px) {
  body.is-mobile-device .songActions {
    gap: 5px !important;
  }
  body.is-mobile-device .songKeyBadge {
    width: 26px !important;
    min-width: 26px !important;
  }
  body.is-mobile-device .songBars {
    width: 20px;
    min-width: 20px;
  }
}
@media(max-width:380px) {
  body.is-mobile-device .songBars {
    display: none !important;
  }
  body.is-mobile-device .songMore {
    display: none !important;
  }
}
.song {
  overflow: visible !important;
}
.songActions {
  position: relative !important;
  overflow: visible !important;
}
.songKeyBadge, .songBars, .songActions > .addSet {
  display: none !important;
}
.songMenuWrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
}
.songMore {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  background: rgba(15,23,42,.72) !important;
  color: rgba(226,232,240,.88) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.songMore:hover, .songMenuWrap.menuOpen .songMore {
  background: rgba(124,58,237,.22) !important;
  border-color: rgba(167,139,250,.58) !important;
  color: #fff !important;
}
.songMenu {
  display: none;
  position: absolute;
  border-radius: 14px;
  background: linear-gradient(145deg,#111827,#07111d);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
.songMenuWrap.menuOpen .songMenu {
  display: block;
}
.songMenuKey {
  display: flex;
  padding: 8px 9px;
  border-radius: 10px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.12);
}
.songMenuKey strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  color: #c7d2fe;
  background: rgba(99,102,241,.16);
  border: 1px solid rgba(99,102,241,.28);
  font-size: 12px;
  letter-spacing: 0;
}
.songMenuItem {
  width: 100% !important;
  margin-top: 7px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,#6d5dfc,#8b5cf6) !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(124,58,237,.20) !important;
}
.songMenuItem:hover {
  filter: brightness(1.08);
}
@media(max-width:900px) {
  body.is-mobile-device .songMore {
    display: inline-flex !important;
  }
  body.is-mobile-device .songMenu {
    top: 33px;
    right: -2px;
  }
}
@media(max-width:380px) {
  body.is-mobile-device .songMore {
    display: inline-flex !important;
  }
}
.songMenu {
  position: fixed !important;
  top: auto;
  right: auto !important;
  left: auto;
  min-width: 190px !important;
  width: 190px !important;
  padding: 10px !important;
  z-index: 100000 !important;
}
.songMenuKey {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: default !important;
}
.songMenuKeySelect {
  width: 92px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 28px 0 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(99,102,241,.34) !important;
  background: rgba(99,102,241,.16) !important;
  color: #e0e7ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
.songMenuKeySelect:focus {
  outline: 2px solid rgba(139,92,246,.34) !important;
  outline-offset: 2px !important;
}
.songMenuItem {
  height: 38px !important;
  min-height: 38px !important;
}
.song.songMenuOpen {
  overflow: visible !important;
  z-index: 20 !important;
}
.song.songMenuOpen > .songMenu {
  display: block !important;
}
@media(max-width:900px) {
  body.is-mobile-device .song {
    position: relative !important;
  }
  body.is-mobile-device .songActions {
    align-self: center !important;
  }
  body.is-mobile-device .songMore {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148,163,184,.30) !important;
    background: rgba(15,23,42,.84) !important;
    color: #e5e7eb !important;
  }
  body.is-mobile-device .songMenuWrap.menuOpen .songMore, body.is-mobile-device .songMore:hover {
    background: rgba(124,58,237,.28) !important;
    border-color: rgba(167,139,250,.72) !important;
  }
  body.is-mobile-device .songMenu {
    position: static !important;
    display: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 8px 0 2px 49px !important;
    padding: 8px !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg,rgba(17,24,39,.98),rgba(9,16,28,.98)) !important;
    border: 1px solid rgba(139,92,246,.34) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
    z-index: auto !important;
  }
  body.is-mobile-device .song.songMenuOpen > .songMenu {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
  body.is-mobile-device .songMenuKey {
    min-width: 0 !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
  }
  body.is-mobile-device .songMenuKeySelect {
    width: 104px !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  body.is-mobile-device .songMenuItem {
    width: auto !important;
    min-width: 108px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 0 !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
  }
}
@media(max-width:430px) {
  body.is-mobile-device .song.songMenuOpen > .songMenu {
    grid-template-columns: 1fr !important;
  }
  body.is-mobile-device .songMenuItem {
    width: 100% !important;
  }
}
.songCoverWrap {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}
.songCoverWrap .songCover {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  display: block !important;
}
.songTitle .setIndicator {
  display: none !important;
}
.songCoverWrap .setIndicator, .coverSetIndicator {
  position: absolute !important;
  top: -4px !important;
  left: -4px !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  border: 2px solid #0b1220 !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 10px rgba(34,197,94,.55) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
body.is-mobile-device .songCoverWrap {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}
body.is-mobile-device .songCoverWrap .setIndicator, body.is-mobile-device .coverSetIndicator {
  top: -3px !important;
  left: -3px !important;
  width: 10px !important;
  height: 10px !important;
}
@media(max-width:900px) {
  .sidebar .tabs {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }
  .sidebar .tabs button {
    position: relative !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: none !important;
    outline: none !important;
  }
  .sidebar .tabs button::before, .sidebar .tabs button::after {
    content: none !important;
    display: none !important;
  }
  .sidebar .tabs button.active, .sidebar .tabs .active {
    color: #fff !important;
    border-color: rgba(255,255,255,.82) !important;
    background: rgba(255,255,255,.08) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),
      0 8px 20px rgba(0,0,0,.18) !important;
  }
  .sidebar .tabs button:active {
    transform: translateY(1px) !important;
  }
}
@media(min-width:901px) {
  .sidebar .tabs button::before, .sidebar .tabs button::after {
    content: none !important;
    display: none !important;
  }
}
.desktopBrandLogo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  min-width: auto !important;
  height: 42px;
  padding: 0;
  text-decoration: none;
}
.desktopLogoImage {
  display: block;
  width: auto;
  height: 32px;
  max-width: 156px;
  object-fit: contain;
}
@media(max-width:900px) {
  .desktopBrandLogo {
    height: 50px !important;
  }
  .desktopLogoImage {
    height: 30px !important;
    max-width: 150px !important;
  }
}
@media(max-width:430px) {
  .desktopLogoImage {
    height: 28px !important;
    max-width: 142px !important;
  }
}
.sidebarLogo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  text-decoration: none;
}
.sidebarLogoImage {
  display: block;
  width: auto;
  height: 25px;
  max-width: 170px;
  object-fit: contain;
}
.sidebarLogo .liteBadge {
  flex: 0 0 auto;
}
.desktopBrandLogo, .sidebarLogo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: max-content;
  max-width: 100%;
  text-decoration: none !important;
  white-space: nowrap;
}
.desktopLogoImage, .sidebarLogoImage {
  display: block;
  width: auto;
  height: 22px;
  max-width: 30px;
  object-fit: contain;
  flex: 0 0 auto;
}
.brandText {
  color: #ffffff;
  font-size: 21px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
}
.desktopBrandLogo .liteBadge, .sidebarLogo .liteBadge {
  flex: 0 0 auto;
  margin-left: 2px;
}
@media(max-width:900px) {
  .brand {
    padding: 20px 18px 14px;
  }
  .sidebarLogoImage {
    height: 20px !important;
    max-width: 28px !important;
  }
  .sidebarLogo .brandText {
    font-size: 21px;
  }
}
@media(max-width:430px) {
  .sidebarLogoImage {
    height: 19px !important;
    max-width: 27px !important;
  }
  .sidebarLogo .brandText {
    font-size: 20px;
  }
}
.desktopBrand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.desktopLogo {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.desktopBrandText {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
}
.desktopBrandText strong {
  color: var(--wc-text, #f8fafc) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
.desktopBrandText > span {
  color: #b9a57f !important;
  font-size: 10px !important;
  margin-top: 3px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.logoMark {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  color: inherit !important;
  flex: 0 0 auto !important;
}
.tagline {
  color: var(--muted) !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}
@media(max-width:900px) {
  .desktopLogo, .logoMark {
    width: 24px !important;
    height: 24px !important;
  }
}
.wclSeeSawBlock {
  background: rgba(15,23,42,.58);
  overflow: hidden;
  position: relative;
}
.wclSeeSawBlock::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 18% 0%,rgba(103,232,249,.14),transparent 34%),
             linear-gradient(90deg,transparent,rgba(14,165,233,.08),rgba(124,58,237,.08),transparent);
  transform: translateX(-28%);
  transition: opacity .35s ease;
}
.wclSeeSawBlock.wavesRunning::before {
  opacity: 1;
  animation: wclWaveWash 7.2s ease-in-out infinite alternate;
}
.wclSeeSawHead {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  min-height: 22px;
}
.wavesTitle {
  display: flex;
  align-items: center;
  min-width: 32px;
}
.wavesIcon {
  width: 32px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  opacity: .92;
}
.wavesIcon svg,.wavesBtnIcon svg {
  width: 32px;
  height: 18px;
  overflow: visible;
}
.wavesIcon path,.wavesBtnIcon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wavesRunning .wavesIcon {
  color: #67e8f9;
  animation: wclWaveIconFloat 3.2s ease-in-out infinite;
}
.wavesMotion {
  justify-self: center;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: .34;
}
.wavesMotion span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #64748b;
}
.wavesRunning .wavesMotion {
  opacity: 1;
}
.wavesRunning .wavesMotion span {
  background: #67e8f9;
  animation: wclWaveDots 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(103,232,249,.22);
}
.wavesRunning .wavesMotion span:nth-child(2) {
  animation-delay: .32s;
}
.wavesRunning .wavesMotion span:nth-child(3) {
  animation-delay: .64s;
}
.wclSeeSawHead span[data-seesaw-status] {
  color: #bfdbfe;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.wclSeeSawControls {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 8px;
  align-items: end;
}
.wclSeeSawControls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
}
.wclSeeSawControls label > span {
  padding-left: 2px;
}
.wclSeeSawControls select, .wclSeeSawControls button {
  width: 100%;
  height: 38px;
  border-radius: 12px;
}
.wclSeeSawControls select {
  background: rgba(2,6,23,.42);
  border: 1px solid rgba(148,163,184,.12);
  color: #f8fafc;
  box-shadow: none;
}
.wclSeeSawControls button {
  padding: 0;
  background: rgba(79,70,229,.86);
  box-shadow: 0 8px 18px rgba(79,70,229,.16);
}
.wclSeeSawControls button .wavesBtnIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  line-height: 1;
}
.wclSeeSawControls button .wavesBtnIcon svg {
  width: 25px;
  height: 15px;
}
.wclSeeSawControls button.activeSeeSaw, .wclSeeSawControls button.activeWaves {
  background: rgba(8,145,178,.92) !important;
  box-shadow: 0 0 0 1px rgba(103,232,249,.30),0 0 22px rgba(14,165,233,.18) !important;
}
.wclSeeSawControls button.activeWaves .wavesBtnIcon {
  animation: wclWaveButton 2.3s ease-in-out infinite;
}
@keyframes wclWaveWash {
  0% {
    transform: translateX(-28%);
  }
  100% {
    transform: translateX(28%);
  }
}
@keyframes wclWaveIconFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes wclWaveDots {
  0%,100% {
    transform: translateY(0) scale(.76);
    opacity: .40;
  }
  50% {
    transform: translateY(-5px) scale(1);
    opacity: 1;
  }
}
@keyframes wclWaveButton {
  0%,100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}
@media(max-width:900px) {
  .wclSeeSawBlock {
    padding: 10px;
    border-radius: 15px;
  }
  .wclSeeSawControls {
    grid-template-columns: 1fr 1fr 44px;
  }
  .wclSeeSawControls button {
    min-width: 44px;
    width: 44px;
    grid-column: auto;
  }
}
:root {
  --pad-bg-a: #07111d;
  --pad-bg-b: #0b1624;
  --pad-glass: rgba(15,23,42,.54);
  --pad-line: rgba(148,163,184,.14);
  --pad-line-strong: rgba(165,180,252,.30);
  --pad-cyan: #67e8f9;
  --pad-blue: #60a5fa;
  --pad-violet: #8b5cf6;
  --pad-green: #22c55e;
  --pad-gold: #f6d28c;
}
.worshipPadCard {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  background: radial-gradient(circle at 12% -8%, rgba(103,232,249,.12), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(139,92,246,.16), transparent 32%),
    linear-gradient(180deg, rgba(7,17,29,.96), rgba(4,10,18,.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 44px rgba(0,0,0,.28) !important;
}
.worshipPadCard::before {
  content: "";
  position: absolute;
  inset: -34% -45% auto -45%;
  height: 220px;
  pointer-events: none;
  opacity: .46;
  background: radial-gradient(closest-side, rgba(103,232,249,.14), transparent 72%),
    radial-gradient(closest-side, rgba(139,92,246,.13), transparent 75%);
  filter: blur(10px);
  animation: wclPadAurora 12s ease-in-out infinite alternate;
}
.worshipPadCard:has(.worshipPadLiveBadge.on)::before {
  opacity: .78;
  animation-duration: 7s;
}
.worshipPadCard > * {
  position: relative;
  z-index: 1;
}
.worshipPadHeader {
  margin-bottom: 14px !important;
}
.worshipPadHeader h3 {
  margin: 0 0 5px !important;
  color: #fff6dc !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.worshipPadHeader p {
  max-width: 215px;
  color: #a7b7cc !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.worshipPadLiveBadge {
  border: 1px solid rgba(148,163,184,.12) !important;
  background: rgba(15,23,42,.64) !important;
  color: #94a3b8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.worshipPadLiveBadge.on {
  color: white !important;
  border-color: rgba(103,232,249,.34) !important;
  background: linear-gradient(135deg, rgba(34,197,94,.95), rgba(139,92,246,.96)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 30px rgba(139,92,246,.28) !important;
}
.worshipPadLiveBadge.on::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9f99d;
  box-shadow: 0 0 12px rgba(217,249,157,.88);
  display: inline-block;
  animation: wclPadPulseDot 1.8s ease-in-out infinite;
}
.worshipPadNow.worshipPadGaugeOnly, .worshipPadGaugeOnly {
  background: transparent !important;
  border: none !important;
}
.worshipPadGaugeOnly .worshipPadStopInline {
  background: rgba(127,29,29,.78) !important;
  border: 1px solid rgba(248,113,113,.28) !important;
  color: #fee2e2 !important;
  box-shadow: none !important;
}
.worshipPadGaugeOnly .worshipPadStopInline:hover {
  background: rgba(185,28,28,.92) !important;
}
.worshipPadSwellMeter {
  padding: 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(12,23,38,.82), rgba(8,17,29,.78)) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.worshipPadSwellMeter.isActive {
  border-color: rgba(103,232,249,.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 28px rgba(14,165,233,.10) !important;
}
.swellMeterTop {
  margin-bottom: 9px !important;
}
.swellMeterTitle {
  color: #93c5fd !important;
  letter-spacing: .16em !important;
  font-size: 9px !important;
}
.swellMeterRoute {
  color: #fff7df !important;
  font-size: 10px !important;
}
.swellMeterTrack {
  height: 5px !important;
  background: rgba(15,23,42,.82) !important;
  border: 1px solid rgba(148,163,184,.10) !important;
}
.swellMeterFill {
  background: linear-gradient(90deg, var(--pad-cyan), var(--pad-violet), var(--pad-green)) !important;
  box-shadow: 0 0 18px rgba(103,232,249,.28) !important;
}
.swellMeterLayers {
  min-height: 42px !important;
  gap: 4px !important;
  margin-top: 9px !important;
}
.swellLayerRow {
  grid-template-columns: 30px 31px 1fr !important;
  gap: 6px !important;
}
.swellLayerRow span {
  color: #dbeafe !important;
  font-size: 10px !important;
}
.swellLayerRow em {
  color: #8ea2ba !important;
  font-size: 9px !important;
}
.swellLayerRow b {
  height: 4px !important;
  background: linear-gradient(90deg, rgba(103,232,249,.86), rgba(167,139,250,.92)) !important;
}
.worshipPadModeRow {
  gap: 8px !important;
}
.worshipPadModeRow button, .padLayerModeBtn {
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.50) !important;
  color: #e5eefb !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.worshipPadModeRow button:hover, .padLayerModeBtn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(103,232,249,.27) !important;
}
.worshipPadModeRow button.activeDroneMode, .padLayerModeBtn.activeDroneMode, .padLayerModeBtn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(139,92,246,.96), rgba(79,70,229,.96)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 24px rgba(79,70,229,.22) !important;
}
.worshipPadLayerModeBlock {
  margin: 8px 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.worshipPadControlHead.mini {
  margin: 0 0 7px !important;
}
.worshipPadControlHead.mini label, .worshipPadControl label, .delayTool label {
  color: #f6d28c !important;
  font-size: 9px !important;
  letter-spacing: .16em !important;
}
.worshipPadControlHead.mini span, #worshipPadLayerModeReadout {
  color: #dbeafe !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}
.padLayerModeRow {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 7px !important;
  margin-bottom: 0 !important;
}
.padLayerModeRow button {
  height: 30px !important;
  font-size: 10px !important;
}
.wclSeeSawBlock {
  margin: 12px 0 13px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle at 18% 0%, rgba(103,232,249,.10), transparent 42%),
    linear-gradient(180deg, rgba(12,23,38,.82), rgba(7,16,28,.80)) !important;
  border: 1px solid rgba(103,232,249,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.wclSeeSawBlock.wavesRunning {
  border-color: rgba(103,232,249,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 30px rgba(14,165,233,.12) !important;
}
.wavesMotion {
  width: 55px !important;
}
.wclSeeSawControls select {
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(2,6,23,.58) !important;
}
.wclSeeSawControls button {
  height: 36px !important;
  width: 42px !important;
  min-width: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(79,70,229,.96), rgba(139,92,246,.96)) !important;
}
.wclSeeSawControls button.activeWaves {
  background: linear-gradient(135deg, rgba(6,182,212,.96), rgba(79,70,229,.96)) !important;
}
.worshipPadGrid {
  gap: 8px !important;
  margin: 10px 0 12px !important;
}
.worshipPadGrid button, .droneKeyBtn {
  position: relative !important;
  height: 38px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(15,29,46,.88), rgba(8,19,32,.92)) !important;
  border: 1px solid rgba(148,163,184,.13) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 16px rgba(0,0,0,.15) !important;
  font-size: 17px !important;
  letter-spacing: .02em !important;
}
.worshipPadGrid button:hover, .droneKeyBtn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(103,232,249,.28) !important;
}
.worshipPadGrid button.activeDroneKey, .droneKeyBtn.activeDroneKey, .worshipPadGrid button.lastSelectedPadKey, .droneKeyBtn.lastSelectedPadKey {
  background: radial-gradient(circle at 35% 15%, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(135deg, rgba(34,197,94,.98), rgba(16,185,129,.88)) !important;
  border-color: rgba(134,239,172,.62) !important;
  color: #f0fdf4 !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.20), 0 0 28px rgba(34,197,94,.20) !important;
}
.worshipPadGrid button.queuedPadKey, .droneKeyBtn.queuedPadKey {
  background: linear-gradient(135deg, rgba(245,158,11,.94), rgba(139,92,246,.82)) !important;
  border-color: rgba(251,191,36,.46) !important;
}
.worshipPadControl {
  padding: 11px 12px !important;
  border-radius: 16px !important;
  background: rgba(12,23,38,.72) !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.worshipPadControlHead {
  margin-bottom: 9px !important;
}
.worshipPadControl span {
  color: #fff7df !important;
  font-size: 11px !important;
}
.worshipPadControl input[type="range"] {
  width: 100% !important;
  height: 18px !important;
  accent-color: var(--pad-violet) !important;
}
.worshipPadControl input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(103,232,249,.55), rgba(139,92,246,.92));
}
.worshipPadControl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border-radius: 999px;
  background: #d8b4fe;
  border: 2px solid #fff;
  box-shadow: 0 0 16px rgba(139,92,246,.35);
}
.worshipPadRecommendations {
  padding: 0 !important;
  margin: 8px 0 0 !important;
  color: #9fb1c5 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.worshipPadRecommendations button, .insightButton, .insightPill {
  min-height: 36px !important;
  border-radius: 13px !important;
  background: rgba(12,23,38,.62) !important;
  border: 1px solid rgba(148,163,184,.11) !important;
}
.worshipPadDelay {
  margin-top: 12px !important;
}
.worshipPadDelay input {
  height: 36px !important;
  background: rgba(2,6,23,.56) !important;
  border-color: rgba(148,163,184,.12) !important;
}
@keyframes wclPadAurora {
  0% {
    transform: translateX(-7%) translateY(0) rotate(0deg);
  }
  100% {
    transform: translateX(7%) translateY(12px) rotate(2deg);
  }
}
@keyframes wclPadPulseDot {
  0%,100% {
    transform: scale(.74);
    opacity: .62;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadCard, #mobilePadScreen .worshipPadCard, .mobilePadScreen .worshipPadCard {
    padding: 12px !important;
    border-radius: 22px !important;
  }
  #mobileWidgetMount .worshipPadHeader, #mobilePadScreen .worshipPadHeader, .mobilePadScreen .worshipPadHeader {
    display: flex !important;
    margin-bottom: 12px !important;
  }
  #mobileWidgetMount .worshipPadHeader h3, #mobilePadScreen .worshipPadHeader h3, .mobilePadScreen .worshipPadHeader h3 {
    font-size: 11px !important;
  }
  #mobileWidgetMount .worshipPadHeader p, #mobilePadScreen .worshipPadHeader p, .mobilePadScreen .worshipPadHeader p {
    font-size: 10px !important;
    max-width: 185px !important;
  }
  #mobileWidgetMount .worshipPadSwellMeter, #mobilePadScreen .worshipPadSwellMeter, .mobilePadScreen .worshipPadSwellMeter {
    padding: 11px !important;
    border-radius: 17px !important;
  }
  #mobileWidgetMount .worshipPadGrid, #mobilePadScreen .worshipPadGrid, .mobilePadScreen .worshipPadGrid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    margin: 10px 0 12px !important;
  }
  #mobileWidgetMount .worshipPadGrid button, #mobileWidgetMount .droneKeyBtn, #mobilePadScreen .worshipPadGrid button, #mobilePadScreen .droneKeyBtn, .mobilePadScreen .worshipPadGrid button, .mobilePadScreen .droneKeyBtn {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }
  #mobileWidgetMount .worshipPadModeRow button, #mobilePadScreen .worshipPadModeRow button, .mobilePadScreen .worshipPadModeRow button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
  }
  #mobileWidgetMount .padLayerModeRow button, #mobilePadScreen .padLayerModeRow button, .mobilePadScreen .padLayerModeRow button {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 9px !important;
  }
  #mobileWidgetMount .worshipPadControl, #mobilePadScreen .worshipPadControl, .mobilePadScreen .worshipPadControl {
    padding: 10px 11px !important;
    border-radius: 15px !important;
    margin-bottom: 9px !important;
  }
  #mobileWidgetMount .wclSeeSawBlock, #mobilePadScreen .wclSeeSawBlock, .mobilePadScreen .wclSeeSawBlock {
    padding: 9px !important;
    border-radius: 17px !important;
    margin: 11px 0 11px !important;
  }
  #mobileWidgetMount .wclSeeSawControls, #mobilePadScreen .wclSeeSawControls, .mobilePadScreen .wclSeeSawControls {
    grid-template-columns: 1fr 1fr 40px !important;
    gap: 7px !important;
  }
  #mobileWidgetMount .wclSeeSawControls select, #mobilePadScreen .wclSeeSawControls select, .mobilePadScreen .wclSeeSawControls select {
    height: 34px !important;
    min-height: 34px !important;
  }
  #mobileWidgetMount .wclSeeSawControls button, #mobilePadScreen .wclSeeSawControls button, .mobilePadScreen .wclSeeSawControls button {
    height: 34px !important;
    min-height: 34px !important;
    width: 40px !important;
    min-width: 40px !important;
  }
}
.worshipPadHeader {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  column-gap: 12px !important;
  align-items: start !important;
}
.worshipPadHeader > div:first-child {
  min-width: 0 !important;
}
.worshipPadLiveBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  min-width: 44px !important;
  max-width: none !important;
  height: 28px !important;
  line-height: 1 !important;
  padding: 0 10px !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  flex: 0 0 auto !important;
}
.worshipPadLiveBadge.on::after {
  flex: 0 0 6px !important;
  display: inline-block !important;
  margin-left: 5px !important;
}
.worshipPadNow.worshipPadGaugeOnly, .worshipPadGaugeOnly {
  padding: 0 !important;
  margin: 0 0 12px !important;
}
.worshipPadGaugeOnly .worshipPadStopInline {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 4 !important;
  height: 24px !important;
  min-height: 24px !important;
  min-width: 46px !important;
  padding: 0 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}
.worshipPadGaugeOnly .worshipPadSwellMeter, .worshipPadNow .worshipPadSwellMeter {
  position: relative !important;
  padding: 12px !important;
  padding-top: 36px !important;
}
.worshipPadGaugeOnly .swellMeterTop {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: 70px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.worshipPadGaugeOnly .swellMeterTrack {
  margin-top: 0 !important;
}
.swellMeterRoute {
  text-align: right !important;
  min-width: 0 !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadHeader, #mobilePadScreen .worshipPadHeader, .mobilePadScreen .worshipPadHeader, .worshipPadHeader {
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: start !important;
    column-gap: 10px !important;
  }
  #mobileWidgetMount .worshipPadHeader p, #mobilePadScreen .worshipPadHeader p, .mobilePadScreen .worshipPadHeader p, .worshipPadHeader p {
    max-width: none !important;
    padding-right: 0 !important;
  }
  #mobileWidgetMount .worshipPadLiveBadge, #mobilePadScreen .worshipPadLiveBadge, .mobilePadScreen .worshipPadLiveBadge, .worshipPadLiveBadge {
    min-width: 42px !important;
    height: 27px !important;
    padding: 0 9px !important;
    font-size: 8px !important;
    letter-spacing: .08em !important;
  }
  #mobileWidgetMount .worshipPadGaugeOnly .worshipPadStopInline, #mobilePadScreen .worshipPadGaugeOnly .worshipPadStopInline, .mobilePadScreen .worshipPadGaugeOnly .worshipPadStopInline, .worshipPadGaugeOnly .worshipPadStopInline {
    top: 11px !important;
    right: 11px !important;
    height: 23px !important;
    min-height: 23px !important;
    min-width: 44px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }
  #mobileWidgetMount .worshipPadGaugeOnly .worshipPadSwellMeter, #mobilePadScreen .worshipPadGaugeOnly .worshipPadSwellMeter, .mobilePadScreen .worshipPadGaugeOnly .worshipPadSwellMeter, .worshipPadGaugeOnly .worshipPadSwellMeter {
    padding: 11px !important;
    padding-top: 35px !important;
  }
  #mobileWidgetMount .worshipPadGaugeOnly .swellMeterTop, #mobilePadScreen .worshipPadGaugeOnly .swellMeterTop, .mobilePadScreen .worshipPadGaugeOnly .swellMeterTop, .worshipPadGaugeOnly .swellMeterTop {
    top: 11px !important;
    left: 11px !important;
    right: 64px !important;
    height: 23px !important;
  }
}
.wclYoutubeBtn {
  position: relative !important;
}
.wclYoutubeBtn.youtubeActive::after, .wclYoutubeBtn.youtubeLoaded::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18),0 0 14px rgba(239,68,68,.55);
}
.wclYoutubeBtn.youtubeVisible, .wclYoutubeBtn.youtubeActive {
  color: #fff7ed !important;
  background: linear-gradient(135deg,rgba(239,68,68,.34),rgba(139,92,246,.20)) !important;
  border-color: rgba(239,68,68,.35) !important;
}
.wclYoutubeBtn.youtubeUnavailable {
  opacity: .58;
}
.wclYoutubePlayer {
  position: fixed;
  z-index: 2147482999;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(11,21,32,.72),rgba(5,10,18,.58));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}
.wclYoutubePlayer.isHidden {
  opacity: 0;
  transform: translateY(8px) scale(.94);
  pointer-events: none;
  filter: blur(1px);
}
.wclYoutubePlayer:not(.isHidden) {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wclYoutubeHeader {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 13px;
  color: #f8fafc;
  background: linear-gradient(90deg,rgba(239,68,68,.18),rgba(139,92,246,.06));
}
.wclYoutubeTitle {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wclYoutubeHide {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.wclYoutubeFrameWrap {
  padding: 8px;
}
.wclYoutubeFrameWrap iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 16px;
  background: #020617;
}
.wclYoutubeEmpty {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 22px;
  border-radius: 16px;
  color: #cbd5e1;
  background: rgba(2,6,23,.58);
  font-size: 13px;
  line-height: 1.45;
}
@media(max-width:900px) {
  .mobileBottomNav button small {
    font-size: 9px !important;
  }
  .mobileBottomNav button .wclYoutubeBtn::after, .mobileBottomNav .wclYoutubeBtn.youtubeActive::after, .mobileBottomNav .wclYoutubeBtn.youtubeLoaded::after {
    top: 6px;
    right: 11px;
    width: 6px;
    height: 6px;
  }
  .wclYoutubePlayer {
    border-radius: 20px;
    transform-origin: bottom center;
  }
  .wclYoutubeHeader {
    height: 36px;
  }
  .wclYoutubeFrameWrap {
    padding: 7px;
  }
}
.wclFullscreenBtn {
  white-space: nowrap;
}
.wclFullscreenBtn.isFullscreen, body.wclBrowserFullscreen .wclFullscreenBtn {
  background: linear-gradient(135deg,#16a34a,#15803d) !important;
  color: white !important;
}
body.wclAppFullscreenFallback {
  height: 100svh !important;
  overflow: hidden !important;
}
body.wclAppFullscreenFallback .desktopAppBar {
  display: none !important;
}
body.wclAppFullscreenFallback .app {
  height: 100svh !important;
}
@media(max-width:900px) {
  .mobileToolGrid .wclFullscreenBtn {
    background: linear-gradient(145deg,#172554,#1e293b) !important;
  }
}
@media(min-width:901px) {
  .mobileOnlyFullscreenBtn, .mobileFullscreenNav {
    display: none !important;
  }
}
@media(max-width:900px) {
  .mobileOnlyFullscreenBtn {
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(145deg,#172554,#1e293b) !important;
  }
  .mobileBottomNav .mobileFullscreenNav {
    display: flex !important;
  }
  .mobileBottomNav .mobileFullscreenNav span {
    font-size: 18px !important;
  }
  .mobileToolGrid .wclFullscreenBtn, .toolsPanel .wclFullscreenBtn {
    display: flex !important;
    background: linear-gradient(145deg,#172554,#1e293b) !important;
  }
  .mobileFloatControls .wclFullscreenBtn {
    display: inline-flex !important;
    min-width: 44px !important;
    padding: 0 10px !important;
  }
  body.wclAppFullscreenFallback .desktopAppBar {
    display: none !important;
  }
  body.wclAppFullscreenFallback .main {
    height: 100svh !important;
  }
}
.wclCustomSelectLayer {
  position: fixed;
  inset: 0;
  z-index: 120000;
  pointer-events: auto;
}
.wclCustomSelectBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,6,23,.18);
}
.wclCustomSelectMenu {
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg,#111827,#070b12);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.62);
  -webkit-overflow-scrolling: touch;
}
.wclCustomSelectOption {
  width: 100%;
  height: 44px;
  min-height: 44px;
  justify-content: flex-start;
  padding: 0 14px;
  margin: 0 0 6px;
  border-radius: 12px;
  background: rgba(15,23,42,.92);
  color: #f8fafc;
  border: 1px solid rgba(148,163,184,.14);
  font-weight: 850;
  text-align: left;
  white-space: nowrap;
}
.wclCustomSelectOption:last-child {
  margin-bottom: 0;
}
.wclCustomSelectOption.isSelected {
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  border-color: rgba(196,181,253,.75);
  color: #ffffff;
}
body.wclSelectOpen .topbar, body.wclSelectOpen .controls {
  overflow: visible !important;
}
@media(max-width:900px) {
  .topbar {
    z-index: 70000 !important;
  }
  .controls {
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
}
body.is-desktop-device .topbar {
  overflow: visible !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
body.is-desktop-device .controls {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  margin-top: -6px !important;
  margin-bottom: -6px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}
body.is-desktop-device .controls button, body.is-desktop-device .controls select, body.is-desktop-device .mobileAutoTop {
  position: relative !important;
  z-index: 1 !important;
}
body.is-desktop-device .controls select:focus, body.is-desktop-device .controls button:focus {
  outline-offset: 0 !important;
}
.welcomeHero h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.welcomeLogoMark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 8px 16px rgba(124,58,237,.18));
}
.welcomeCard a {
  color: #bfdbfe;
  font-weight: 800;
  text-decoration: none;
}
.welcomeCard a:hover {
  text-decoration: underline;
}
@media(max-width:900px) {
  .welcomeHero h2 {
    gap: 10px;
  }
  .welcomeLogoMark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}
.setListHeader {
  gap: 10px;
}
.setHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.setHeaderActions button {
  height: 30px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1;
}
.setHeaderActions .setShareBtn {
  background: #1d4ed8;
  color: white;
}
.setHeaderActions .setImportBtn {
  background: #166534;
  color: white;
}
@media(max-width:900px) {
  .setListHeader {
    align-items: flex-start;
  }
  .setHeaderActions {
    max-width: 210px;
  }
  .setHeaderActions button {
    height: 32px;
    min-height: 32px;
  }
}
.wclMetronomeFloat {
  position: fixed;
  z-index: 850;
  padding-top: 12px;
  background: linear-gradient(145deg,rgba(15,23,42,.72),rgba(17,24,39,.62));
  color: #f8fafc;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wclMetronomeFloat[hidden] {
  display: none !important;
}
.wclMetroTop {
  position: absolute;
  top: 7px;
  right: 7px;
  display: flex;
}
.wclMetroClose {
  background: rgba(15,23,42,.52) !important;
  pointer-events: auto;
}
.wclMetroControls {
  display: grid;
  grid-template-columns: 38px 1fr 58px 38px;
}
.wclMetronomeFloat input, .wclMetronomeFloat select {
  width: 100%;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(11,18,32,.72);
}
.wclMetroBpm {
  text-align: center;
  appearance: textfield;
}
.wclMetroBpm::-webkit-outer-spin-button, .wclMetroBpm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.wclMetroPlayBtn.isPlaying {
  background: #16a34a !important;
}
.wclMetroMuteBtn.isMuted {
  background: #7f1d1d !important;
}
.wclMetroBeatDots {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.wclMetroBeatDots span {
  background: rgba(148,163,184,.32);
  transition: transform .08s ease, background .08s ease, opacity .08s ease;
}
.wclMetroBeatDots span.isActive {
  transform: scaleY(1.7);
  background: #60a5fa;
}
.wclMetroBeatDots span.isAccent {
  background: #22c55e;
}
body.performance .wclMetronomeFloat {
  background: rgba(0,0,0,.62);
  border-color: rgba(255,255,255,.14);
}
.wclMetronomeFloat {
  right: 16px !important;
  bottom: 20px !important;
  border-radius: 18px !important;
  background: rgba(15,23,42,.28) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
}
.wclMetronomeFloat.isPlaying {
  background: rgba(15,23,42,.34) !important;
}
.wclMetroTop {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 6px !important;
  pointer-events: auto !important;
}
.wclMetroClose {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(248,250,252,.86) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wclMetroControls {
  padding-right: 0 !important;
}
.wclMetronomeFloat button, .wclMetronomeFloat input, .wclMetronomeFloat select {
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: rgba(15,23,42,.48) !important;
  box-shadow: none !important;
}
.wclMetronomeFloat input, .wclMetronomeFloat select {
  color: #fff !important;
  outline: none !important;
}
.wclMetroMeter {
  padding-left: 3px !important;
  padding-right: 12px !important;
}
.wclMetroMuteBtn {
  font-size: 14px !important;
}
.wclMetroBeatDots {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  margin-top: 7px !important;
}
.wclMetroBeatDots span {
  border-radius: 999px !important;
  background: rgba(248,250,252,.20) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.wclMetroBeatDots span.isActive {
  transform: scaleX(1.15) !important;
  background: rgba(96,165,250,.9) !important;
}
.wclMetroBeatDots span.isAccent {
  background: rgba(34,197,94,.9) !important;
}
.wclMetroBeatDots span.isDisabled {
  opacity: .18 !important;
}
body.performance .wclMetronomeFloat {
  background: rgba(0,0,0,.26) !important;
}
body.is-mobile-device .controls {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
body.is-mobile-device .controls::-webkit-scrollbar {
  display: none !important;
}
body.is-mobile-device .topMetronomeBtn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
}
@media(max-width:900px) {
  .wclMetronomeFloat {
    z-index: 1200 !important;
  }
}
.wclMetronomeFloat {
  padding: 7px 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: rgba(15,23,42,.14) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}
.wclMetronomeFloat.isPlaying {
  background: rgba(15,23,42,.18) !important;
}
.wclMetroTop, .wclMetroClose {
  display: none !important;
}
.wclMetroControls {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wclMetronomeFloat button, .wclMetronomeFloat input, .wclMetronomeFloat select {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 auto !important;
  background: rgba(15,23,42,.46) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.wclMetronomeFloat input, .wclMetronomeFloat select {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3px !important;
  text-align: center !important;
  text-align-last: center !important;
}
.wclMetroBeatDots {
  width: 100% !important;
  align-items: center !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
.wclMetroBeatDots span {
  width: 34px !important;
  margin: 0 auto !important;
  background: rgba(248,250,252,.16) !important;
}
body.performance .wclMetronomeFloat {
  background: rgba(0,0,0,.14) !important;
}
@media(max-width:900px) {
  .wclMetronomeFloat {
    width: 54px !important;
  }
}
@media(max-width:900px) {
  .topbar {
    overflow: visible !important;
  }
  .topbar .controls {
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
  }
  .topbar .controls::-webkit-scrollbar {
    display: none !important;
  }
  .topbar .controls > button, .topbar .controls > select, .topbar .controls > .mobileAutoTop, .topbar .controls > .padNowPlaying {
    flex: 0 0 auto !important;
  }
  #topMetronomeBtn.topMetronomeBtn {
    background: linear-gradient(145deg,#172554,#1e293b) !important;
    color: #f8fafc !important;
  }
  .mobileAutoTop {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 122px !important;
  }
  .wclCustomSelectLayer {
    z-index: 160000 !important;
  }
  .wclCustomSelectBackdrop {
    background: rgba(2,6,23,.06) !important;
  }
  .wclCustomSelectMenu {
    z-index: 160001 !important;
  }
}
@media(min-width:901px) {
  #topMetronomeBtn.topMetronomeBtn {
    display: inline-flex !important;
  }
}
@media(min-width:901px) {
  .wclMetronomeFloat {
    position: fixed !important;
    right: calc(360px + 18px) !important;
    bottom: 22px !important;
    z-index: 1300 !important;
  }
  body.performance .wclMetronomeFloat {
    right: calc(330px + 18px) !important;
  }
}
.wclMetroMeter {
  font-size: 10.5px !important;
}
.wclMetroBeatDots {
  max-height: 128px !important;
  overflow: visible !important;
}
.wclMetroBeatDots span[hidden] {
  display: none !important;
}
.wclMetroBeatDots span {
  height: 5px !important;
}
.wclMetronomeFloat {
  background: rgba(15,23,42,.16) !important;
  backdrop-filter: blur(7px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(110%) !important;
}
.wclMetronomeFloat.isPlaying {
  background: rgba(15,23,42,.20) !important;
}
@media(max-width:900px) {
  .wclMetronomeFloat {
    right: 10px !important;
    bottom: calc(var(--navH) + 12px) !important;
  }
}
.wclMetroTapBtn {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}
.wclMetroTapBtn.isTapping {
  background: rgba(124,58,237,.50) !important;
  color: #ffffff !important;
}
.wclMetroTapBtn.isSynced {
  background: rgba(22,163,74,.50) !important;
  color: #ffffff !important;
}
@media(max-width:900px) {
  .wclMetronomeFloat button, .wclMetronomeFloat input, .wclMetronomeFloat select {
    height: 34px !important;
    min-height: 34px !important;
  }
}
@media(max-width:900px) {
  #topMetronomeBtn.topMetronomeBtn {
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
  }
}
@media(min-width:901px) {
  #topMetronomeBtn.topMetronomeBtn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-grid !important;
    place-items: center !important;
  }
}
.wclMetroSyncBtn, .wclMetroNudgeBtn {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}
.wclMetroNudgeBtn {
  font-size: 13px !important;
}
.wclMetroSyncBtn {
  background: rgba(37,99,235,.46) !important;
  color: #ffffff !important;
}
.wclMetronomeFloat {
  width: 54px !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.wclMetronomeFloat::-webkit-scrollbar {
  display: none !important;
}
#topMetronomeBtn.topMetronomeBtn {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}
@media(max-width:900px) {
  #topMetronomeBtn.topMetronomeBtn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 11px !important;
    font-size: 17px !important;
  }
}
.chart {
  position: relative !important;
}
#wclMetronomeFloat.wclMetronomeFloat {
  position: fixed !important;
  z-index: 2147483000 !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 54px !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#wclMetronomeFloat.wclMetronomeFloat[hidden] {
  display: none !important;
}
#wclMetronomeFloat .wclMetroControls {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
}
#wclMetronomeFloat button, #wclMetronomeFloat input, #wclMetronomeFloat select {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
#wclMetronomeFloat .wclMetroBeatDots {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}
#wclMetronomeFloat .wclMetroBeatDots span {
  width: 34px !important;
  min-height: 5px !important;
}
.topMetronomeBtn, #topMetronomeBtn.topMetronomeBtn {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  flex: 0 0 34px !important;
}
.songTitleWrap {
  min-width: 0;
}
.songTitleLine {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.songTitleLine h1 {
  min-width: 0;
}
.songLookupBtn {
  display: inline-grid !important;
  place-items: center !important;
  background: linear-gradient(145deg,#1e293b,#172033) !important;
}
.songLookupPanel {
  position: fixed;
  background: rgba(15,23,42,.96);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.songLookupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.songLookupHeader strong {
  text-transform: uppercase;
}
.songLookupHeader button {
  background: rgba(30,41,59,.9) !important;
}
.songLookupBody {
  overflow: auto;
}
.songLookupLoading, .songLookupError, .songLookupEmpty {
  color: #cbd5e1;
}
.songLookupResult h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #fff;
}
.songLookupArtist {
  margin: 0 0 12px;
  color: #cbd5e1;
}
.songLookupGrid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  background: rgba(30,41,59,.78);
}
.songLookupGrid span {
  color: #94a3b8;
}
.songLookupGrid strong {
  color: #f8fafc;
}
.songLookupNotes {
  margin: 12px 0 0;
  color: #cbd5e1;
}
.songLookupActions, .songLookupSources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.songLookupActions button {
  background: #2563eb !important;
}
.songLookupSources a {
  font-weight: 800;
  text-decoration: none;
  padding: 5px 0;
}
.songLookupDisclaimer {
  margin-top: 12px;
  color: #94a3b8;
  font-size: 11px;
}
@media(max-width:900px) {
  .songTitleLine {
    align-items: flex-start;
  }
}
.songLookupBtn {
  display: none !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(248,250,252,.82) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  opacity: .78 !important;
  transition: opacity .16s ease, transform .16s ease, color .16s ease !important;
}
.songLookupBtn.isVisible {
  display: inline-grid !important;
  place-items: center !important;
}
.songLookupBtn:hover, .songLookupBtn:focus-visible {
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  color: #f8fafc !important;
  outline: none !important;
}
.songLookupPanel {
  position: fixed !important;
  top: 72px !important;
  right: 18px !important;
  left: auto !important;
  width: 300px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 92px) !important;
  z-index: 160500 !important;
  background: rgba(15,23,42,.72) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.24) !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}
.songLookupHeader {
  padding: 10px 11px 6px !important;
  border-bottom: none !important;
}
.songLookupHeader strong {
  font-size: 11px !important;
  letter-spacing: .08em !important;
  color: rgba(248,250,252,.88) !important;
}
.songLookupHeader button {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(15,23,42,.28) !important;
  color: rgba(248,250,252,.78) !important;
  box-shadow: none !important;
}
.songLookupBody {
  padding: 8px 12px 12px !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
  max-height: calc(100vh - 146px) !important;
}
.songLookupGrid {
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(15,23,42,.32) !important;
  border: 1px solid rgba(148,163,184,.11) !important;
}
.songLookupActions button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.72) !important;
  font-size: 11px !important;
}
.songLookupSources a {
  color: #bfdbfe !important;
  font-size: 12px !important;
}
.songLookupDisclaimer {
  display: none !important;
}
@media(max-width:900px) {
  .songLookupBtn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
  .songLookupPanel {
    left: 12px !important;
    right: 12px !important;
    top: 82px !important;
    width: auto !important;
    max-height: calc(100svh - 112px) !important;
  }
  .songLookupBody {
    max-height: calc(100svh - 158px) !important;
  }
}
.songLookupAppliedToast {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(37,99,235,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.songLookupAppliedToast[hidden] {
  display: none !important;
}
html[data-theme="light"] {
  --bg: #f3f6fb;
  --card: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --paper: #ffffff;
}
html[data-theme="light"] body {
  background: #eef3f9 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .desktopAppBar {
  background: linear-gradient(180deg,#ffffff,#f8fafc) !important;
  border-bottom: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .desktopMenu > button, html[data-theme="light"] .desktopQuickTools button {
  background: #eef2f7 !important;
  color: #172033 !important;
  border: 1px solid rgba(148,163,184,.28) !important;
}
html[data-theme="light"] .desktopMenu:hover > button, html[data-theme="light"] .desktopMenu:focus-within > button, html[data-theme="light"] .desktopQuickTools button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .desktopDropdown {
  background: #ffffff !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 22px 45px rgba(15,23,42,.16) !important;
}
html[data-theme="light"] .desktopDropdown button, html[data-theme="light"] .dropdownControl {
  color: #172033 !important;
}
html[data-theme="light"] .desktopDropdown button:hover {
  background: #eef2ff !important;
  color: #1e3a8a !important;
}
html[data-theme="light"] .dropdownControl select, html[data-theme="light"] select, html[data-theme="light"] button {
  background: #e8eef6;
  color: #0f172a;
}
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg,#ffffff,#f4f7fb) !important;
  border-right: 1px solid rgba(148,163,184,.35) !important;
  color: #0f172a !important;
}
html[data-theme="light"] .topbar {
  background: linear-gradient(180deg,#ffffff,#f8fafc) !important;
  border-bottom: 1px solid rgba(148,163,184,.35) !important;
}
html[data-theme="light"] .search {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] .tabs button, html[data-theme="light"] .sectionHeader, html[data-theme="light"] .songArtist, html[data-theme="light"] #songMeta, html[data-theme="light"] #flowMeta, html[data-theme="light"] .helperText, html[data-theme="light"] .tagline {
  color: #64748b !important;
}
html[data-theme="light"] .tabs .active {
  color: #0f172a !important;
}
html[data-theme="light"] .song, html[data-theme="light"] .setItem, html[data-theme="light"] .panelCard, html[data-theme="light"] .welcomeCard {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(148,163,184,.35) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .song:hover, html[data-theme="light"] .song.active {
  background: linear-gradient(135deg,#eef2ff,#eff6ff) !important;
  border-color: rgba(37,99,235,.45) !important;
}
html[data-theme="light"] .badge, html[data-theme="light"] #capoHelper {
  background: #eef2ff !important;
  color: #1e3a8a !important;
  border-color: #c7d2fe !important;
}
html[data-theme="light"] .flowPanel {
  background: #f8fafc !important;
  border-left: 1px solid rgba(148,163,184,.35) !important;
}
html[data-theme="light"] .chart {
  background: linear-gradient(180deg,#ffffff,#fffaf0) !important;
  color: #111827 !important;
}
html[data-theme="light"] .welcomeScreen, html[data-theme="light"] .welcomeHero h2 {
  color: #0f172a !important;
}
html[data-theme="light"] .welcomeLead, html[data-theme="light"] .welcomeCard p {
  color: #475569 !important;
}
html[data-theme="light"] .featureBox {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,.35) !important;
}
html[data-theme="light"] .wclMetronomeFloat {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(100,116,139,.22) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.13) !important;
}
html[data-theme="light"] #wclMetronomeFloat button, html[data-theme="light"] #wclMetronomeFloat input, html[data-theme="light"] #wclMetronomeFloat select {
  background: rgba(241,245,249,.82) !important;
  color: #0f172a !important;
  border-color: rgba(100,116,139,.22) !important;
}
@media(min-width:901px) {
  #wclMetronomeFloat.wclMetronomeFloat {
    position: fixed !important;
    right: calc(360px + 22px) !important;
    bottom: 22px !important;
  }
  body.performance #wclMetronomeFloat.wclMetronomeFloat {
    right: calc(330px + 22px) !important;
  }
}
@media(max-width:900px) {
  #wclMetronomeFloat.wclMetronomeFloat {
    right: 10px !important;
    bottom: calc(var(--navH) + 12px) !important;
  }
}
html[data-theme="light"] {
  --bg: #eef3f8;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #111827;
  --muted: #5f6f85;
  --paper: #fffdf8;
  --ink: #111827;
  --blue: #2563eb;
  --purple: #7c3aed;
  --purple2: #8b5cf6;
}
html[data-theme="light"] body:not(.performance) {
  background: #eef3f8 !important;
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) .desktopAppBar {
  background: linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important;
  border-bottom: 1px solid #d7e0ea !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body:not(.performance) .desktopMenu > button, html[data-theme="light"] body:not(.performance) .desktopQuickTools button {
  background: linear-gradient(180deg,#f8fbff,#eef4fb) !important;
  color: #172033 !important;
  border: 1px solid #d2dce8 !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body:not(.performance) .desktopMenu:hover > button, html[data-theme="light"] body:not(.performance) .desktopMenu:focus-within > button, html[data-theme="light"] body:not(.performance) .desktopQuickTools button:hover {
  background: linear-gradient(180deg,#ffffff,#eaf1fb) !important;
  border-color: #b9c8da !important;
  color: #0f172a !important;
}
html[data-theme="light"] body:not(.performance) .desktopQuickTools .desktopLiveBtn, html[data-theme="light"] body:not(.performance) .primary, html[data-theme="light"] body:not(.performance) .activeBtn {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
}
html[data-theme="light"] body:not(.performance) .desktopDropdown {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #d7e0ea !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
html[data-theme="light"] body:not(.performance) .desktopDropdown button, html[data-theme="light"] body:not(.performance) .dropdownControl {
  color: #172033 !important;
}
html[data-theme="light"] body:not(.performance) .desktopDropdown button:hover {
  background: #edf4ff !important;
  color: #1d4ed8 !important;
}
html[data-theme="light"] body:not(.performance) .sidebar {
  background: linear-gradient(180deg,#ffffff 0%,#f6f9fc 100%) !important;
  border-right: 1px solid #d7e0ea !important;
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) .logo, html[data-theme="light"] body:not(.performance) .brand, html[data-theme="light"] body:not(.performance) .songTitle {
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) .search {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(15,23,42,.04) !important;
}
html[data-theme="light"] body:not(.performance) .search::placeholder {
  color: #7b8797 !important;
}
html[data-theme="light"] body:not(.performance) .tabs button {
  background: #eef4fb !important;
  color: #5f6f85 !important;
  border: 1px solid transparent !important;
}
html[data-theme="light"] body:not(.performance) .tabs .active {
  background: #fff8ec !important;
  color: #111827 !important;
  border-color: #ead4ac !important;
}
html[data-theme="light"] body:not(.performance) .sectionHeader {
  color: #506176 !important;
}
html[data-theme="light"] body:not(.performance) .song, html[data-theme="light"] body:not(.performance) .setItem {
  background: #ffffff !important;
  border: 1px solid #dbe3ed !important;
  color: #111827 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body:not(.performance) .song:hover, html[data-theme="light"] body:not(.performance) .song.active {
  background: linear-gradient(135deg,#f7f2ff 0%,#eff6ff 100%) !important;
  border-color: #a78bfa !important;
}
html[data-theme="light"] body:not(.performance) .songArtist, html[data-theme="light"] body:not(.performance) .tagline, html[data-theme="light"] body:not(.performance) .helperText {
  color: #66788e !important;
}
html[data-theme="light"] body:not(.performance) .badge {
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border-color: #c7d7fe !important;
}
html[data-theme="light"] body:not(.performance) .addSet {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
}
html[data-theme="light"] body:not(.performance) .main, html[data-theme="light"] body:not(.performance) .app {
  background: #eef3f8 !important;
}
html[data-theme="light"] body:not(.performance) .topbar {
  background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border-bottom: 1px solid #d7e0ea !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body:not(.performance) h1, html[data-theme="light"] body:not(.performance) #songTitle {
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) #songMeta, html[data-theme="light"] body:not(.performance) #flowMeta {
  color: #607188 !important;
}
html[data-theme="light"] body:not(.performance) .controls button, html[data-theme="light"] body:not(.performance) .controls select, html[data-theme="light"] body:not(.performance) .topbar button, html[data-theme="light"] body:not(.performance) .topbar select, html[data-theme="light"] body:not(.performance) .dropdownControl select {
  background: linear-gradient(180deg,#f8fbff,#e9f0f8) !important;
  color: #162033 !important;
  border: 1px solid #cfd9e6 !important;
  box-shadow: 0 6px 14px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body:not(.performance) .controls button:hover, html[data-theme="light"] body:not(.performance) .controls select:hover, html[data-theme="light"] body:not(.performance) .topbar button:hover, html[data-theme="light"] body:not(.performance) .topbar select:hover {
  background: linear-gradient(180deg,#ffffff,#edf4ff) !important;
  border-color: #afbed0 !important;
}
html[data-theme="light"] body:not(.performance) .controls button:disabled, html[data-theme="light"] body:not(.performance) .topbar button:disabled, html[data-theme="light"] body:not(.performance) button[disabled] {
  background: #eef2f7 !important;
  color: #94a3b8 !important;
  border-color: #dbe3ed !important;
  box-shadow: none !important;
  opacity: .72 !important;
}
html[data-theme="light"] body:not(.performance) .controls .primary, html[data-theme="light"] body:not(.performance) .topbar .primary, html[data-theme="light"] body:not(.performance) .controls .activeBtn, html[data-theme="light"] body:not(.performance) .topbar .activeBtn {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="light"] body:not(.performance) .sectionTabs {
  background: linear-gradient(180deg,#ffffff,#f6f9fc) !important;
  border-bottom: 1px solid #d7e0ea !important;
}
html[data-theme="light"] body:not(.performance) .sectionTabs button {
  background: #eef4fb !important;
  color: #172033 !important;
  border: 1px solid #d2dce8 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.performance) .chart {
  background: linear-gradient(180deg,#fffdf8 0%,#fff9ec 100%) !important;
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) .chartOutput, html[data-theme="light"] body:not(.performance) .sectionContent, html[data-theme="light"] body:not(.performance) pre {
  color: #111827 !important;
}
html[data-theme="light"] body:not(.performance) .chord {
  color: var(--chord) !important;
}
html[data-theme="light"] body:not(.performance) .loopBanner {
  background: #ecfdf3 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}
html[data-theme="light"] body:not(.performance) .flowPanel {
  background: #f6f9fc !important;
  border-left: 1px solid #d7e0ea !important;
}
html[data-theme="light"] body:not(.performance) .panelCard, html[data-theme="light"] body:not(.performance) .widgetCard, html[data-theme="light"] body:not(.performance) .wclWidgetCard {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #dbe3ed !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] body:not(.performance) .panelCard h3, html[data-theme="light"] body:not(.performance) .widgetCard h3, html[data-theme="light"] body:not(.performance) .wclWidgetCard h3 {
  color: #c0842f !important;
}
html[data-theme="light"] body:not(.performance) .flowSong small, html[data-theme="light"] body:not(.performance) .panelCard small, html[data-theme="light"] body:not(.performance) .panelCard p {
  color: #607188 !important;
}
html[data-theme="light"] body:not(.performance) .flowButtons button, html[data-theme="light"] body:not(.performance) .quickTools button, html[data-theme="light"] body:not(.performance) .loopButtons button, html[data-theme="light"] body:not(.performance) .panelCard button, html[data-theme="light"] body:not(.performance) #capoHelper {
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border: 1px solid #c7d7fe !important;
}
html[data-theme="light"] body:not(.performance) .panelCard button:hover {
  background: #e1ebff !important;
}
html[data-theme="light"] body:not(.performance) .droneMixer, html[data-theme="light"] body:not(.performance) .padMixer, html[data-theme="light"] body:not(.performance) .wclPadMixer, html[data-theme="light"] body:not(.performance) .wclPadPanel {
  background: linear-gradient(180deg,#334155,#293548) !important;
  border-color: rgba(15,23,42,.16) !important;
}
html[data-theme="light"] body:not(.performance) #wclCustomSelectLayer, html[data-theme="light"] body:not(.performance) .wclCustomSelectLayer, html[data-theme="light"] body:not(.performance) .wclCustomDropdown {
  color: #111827 !important;
}
@media(min-width:901px) {
  html[data-theme="light"] body:not(.performance) #wclMetronomeFloat.wclMetronomeFloat, body:not(.performance) #wclMetronomeFloat.wclMetronomeFloat {
    position: fixed !important;
    right: calc(360px + 26px) !important;
    bottom: 26px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
}
html[data-theme="light"] body:not(.performance) #wclMetronomeFloat.wclMetronomeFloat {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(100,116,139,.24) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.16) !important;
}
html[data-theme="light"] body:not(.performance) #wclMetronomeFloat button, html[data-theme="light"] body:not(.performance) #wclMetronomeFloat input, html[data-theme="light"] body:not(.performance) #wclMetronomeFloat select {
  background: rgba(241,245,249,.9) !important;
  color: #111827 !important;
  border-color: rgba(100,116,139,.22) !important;
}
html[data-theme="light"] body:not(.performance) {
  scrollbar-width: thin !important;
  scrollbar-color: #bfd2ea #eef4fb !important;
}
html[data-theme="light"] body:not(.performance) * {
  scrollbar-width: thin;
  scrollbar-color: #bfd2ea #eef4fb;
}
html[data-theme="light"] body:not(.performance) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="light"] body:not(.performance) ::-webkit-scrollbar-track {
  background: #eef4fb !important;
  border-radius: 999px !important;
}
html[data-theme="light"] body:not(.performance) ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#d9e6f5,#b9cdea) !important;
  border: 2px solid #eef4fb !important;
  border-radius: 999px !important;
}
html[data-theme="light"] body:not(.performance) ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#c8d9f0,#9fb9df) !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop {
  background: linear-gradient(180deg,#ffffff,#edf4ff) !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop button, html[data-theme="light"] body:not(.performance) #mobileAutoScrollBtn {
  background: #f3f7fd !important;
  color: #172033 !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop button.activeAuto, html[data-theme="light"] body:not(.performance) #mobileAutoScrollBtn.activeAuto, html[data-theme="light"] body:not(.performance) .mobileAutoTop .activeBtn {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop input[type="range"] {
  accent-color: #2563eb !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop input[type="range"]::-webkit-slider-runnable-track {
  height: 5px !important;
  border-radius: 999px !important;
  background: #cbd8ea !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -5.5px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.28) !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop input[type="range"]::-moz-range-track {
  height: 5px !important;
  border-radius: 999px !important;
  background: #cbd8ea !important;
}
html[data-theme="light"] body:not(.performance) .mobileAutoTop input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.28) !important;
}
html[data-theme="light"] body:not(.performance) .assistantCard[data-widget="notes"], html[data-theme="light"] body:not(.performance) .panelCard[data-widget="notes"] {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #dbe3ed !important;
}
html[data-theme="light"] body:not(.performance) .notesBox, html[data-theme="light"] body:not(.performance) textarea.notesBox, html[data-theme="light"] body:not(.performance) #rehearsalNotes, html[data-theme="light"] body:not(.performance) #mobileRehearsalNotes {
  background: linear-gradient(180deg,#ffffff,#f8fbff) !important;
  color: #111827 !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 6px 16px rgba(15,23,42,.05) !important;
}
html[data-theme="light"] body:not(.performance) .notesBox::placeholder, html[data-theme="light"] body:not(.performance) textarea.notesBox::placeholder {
  color: #7b8797 !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadCard, html[data-theme="light"] body:not(.performance) #mobileWidgetMount .worshipPadCard, html[data-theme="light"] body:not(.performance) #mobilePadScreen .worshipPadCard, html[data-theme="light"] body:not(.performance) .mobilePadScreen .worshipPadCard {
  background: radial-gradient(circle at 12% -8%, rgba(37,99,235,.08), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(124,58,237,.10), transparent 32%),
    linear-gradient(180deg,#ffffff,#f4f8ff) !important;
  color: #111827 !important;
  border: 1px solid #d8e2ef !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadCard::before {
  opacity: .30 !important;
  background: radial-gradient(closest-side, rgba(59,130,246,.16), transparent 72%),
    radial-gradient(closest-side, rgba(139,92,246,.13), transparent 75%) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadHeader h3, html[data-theme="light"] body:not(.performance) .worshipPadControlHead.mini label, html[data-theme="light"] body:not(.performance) .worshipPadControl label, html[data-theme="light"] body:not(.performance) .delayTool label {
  color: #c07a1c !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadHeader p, html[data-theme="light"] body:not(.performance) .worshipPadRecommendations, html[data-theme="light"] body:not(.performance) .miniReadout, html[data-theme="light"] body:not(.performance) #delayReadout {
  color: #607188 !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadLiveBadge {
  background: #eef4fb !important;
  color: #607188 !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadLiveBadge.on {
  background: linear-gradient(135deg,#22c55e,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadNow.worshipPadGaugeOnly, html[data-theme="light"] body:not(.performance) .worshipPadGaugeOnly {
  background: transparent !important;
  border: none !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadSwellMeter, html[data-theme="light"] body:not(.performance) .wclSeeSawBlock, html[data-theme="light"] body:not(.performance) .worshipPadControl {
  background: linear-gradient(180deg,#f8fbff,#eef4fb) !important;
  border: 1px solid #d5e0ee !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="light"] body:not(.performance) .swellMeterTitle, html[data-theme="light"] body:not(.performance) .swellLayerRow span, html[data-theme="light"] body:not(.performance) .worshipPadControl span, html[data-theme="light"] body:not(.performance) .worshipPadControlHead.mini span, html[data-theme="light"] body:not(.performance) #worshipPadLayerModeReadout, html[data-theme="light"] body:not(.performance) .swellMeterRoute {
  color: #1e3a8a !important;
}
html[data-theme="light"] body:not(.performance) .swellLayerRow em {
  color: #718198 !important;
}
html[data-theme="light"] body:not(.performance) .swellMeterTrack {
  background: #d8e2ef !important;
  border-color: #cad7e8 !important;
}
html[data-theme="light"] body:not(.performance) .swellMeterFill, html[data-theme="light"] body:not(.performance) .swellLayerRow b {
  background: linear-gradient(90deg,#60a5fa,#8b5cf6,#22c55e) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadModeRow button, html[data-theme="light"] body:not(.performance) .padLayerModeBtn, html[data-theme="light"] body:not(.performance) .worshipPadGrid button, html[data-theme="light"] body:not(.performance) .droneKeyBtn, html[data-theme="light"] body:not(.performance) .worshipPadRecommendations button, html[data-theme="light"] body:not(.performance) .insightButton, html[data-theme="light"] body:not(.performance) .insightPill {
  background: linear-gradient(180deg,#ffffff,#eef4ff) !important;
  color: #1e3a8a !important;
  border: 1px solid #bcd0f0 !important;
  box-shadow: 0 5px 12px rgba(15,23,42,.06) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadModeRow button:hover, html[data-theme="light"] body:not(.performance) .padLayerModeBtn:hover, html[data-theme="light"] body:not(.performance) .worshipPadGrid button:hover, html[data-theme="light"] body:not(.performance) .droneKeyBtn:hover {
  background: linear-gradient(180deg,#ffffff,#e5efff) !important;
  border-color: #9db8e7 !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadModeRow button.activeDroneMode, html[data-theme="light"] body:not(.performance) .padLayerModeBtn.activeDroneMode, html[data-theme="light"] body:not(.performance) .padLayerModeBtn[aria-pressed="true"] {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(79,70,229,.20) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadGrid button.activeDroneKey, html[data-theme="light"] body:not(.performance) .droneKeyBtn.activeDroneKey, html[data-theme="light"] body:not(.performance) .worshipPadGrid button.lastSelectedPadKey, html[data-theme="light"] body:not(.performance) .droneKeyBtn.lastSelectedPadKey {
  background: linear-gradient(135deg,#16a34a,#22c55e) !important;
  color: #ffffff !important;
  border-color: #86efac !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.16),0 10px 24px rgba(34,197,94,.16) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadGrid button.queuedPadKey, html[data-theme="light"] body:not(.performance) .droneKeyBtn.queuedPadKey {
  background: linear-gradient(135deg,#f59e0b,#7c3aed) !important;
  color: #ffffff !important;
  border-color: rgba(245,158,11,.35) !important;
}
html[data-theme="light"] body:not(.performance) .wclSeeSawControls select, html[data-theme="light"] body:not(.performance) .worshipPadDelay input {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #cbd8ea !important;
}
html[data-theme="light"] body:not(.performance) .wclSeeSawControls button, html[data-theme="light"] body:not(.performance) .worshipPadHardStopBtn {
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bcd0f0 !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadGaugeOnly .worshipPadStopInline, html[data-theme="light"] body:not(.performance) .worshipPadHardStopBtn.worshipPadStopInline {
  background: #eef4ff !important;
  color: #1e3a8a !important;
  border: 1px solid #bcd0f0 !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadHardStopBtn:hover, html[data-theme="light"] body:not(.performance) .worshipPadGaugeOnly .worshipPadStopInline:hover {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadControl input[type="range"] {
  accent-color: #7c3aed !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadControl input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg,#bfdbfe,#8b5cf6) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadControl input[type="range"]::-webkit-slider-thumb {
  background: #8b5cf6 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 10px rgba(124,58,237,.24) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadControl input[type="range"]::-moz-range-track {
  background: linear-gradient(90deg,#bfdbfe,#8b5cf6) !important;
}
html[data-theme="light"] body:not(.performance) .worshipPadControl input[type="range"]::-moz-range-thumb {
  background: #8b5cf6 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 10px rgba(124,58,237,.24) !important;
}
@media(min-width:901px) {
  .songLookupPanel {
    right: auto !important;
    width: 320px !important;
    max-width: min(320px, calc(100vw - 24px)) !important;
  }
}
html[data-theme="light"] .songLookupBtn {
  color: #2563eb !important;
}
html[data-theme="light"] .songLookupBtn:hover, html[data-theme="light"] .songLookupBtn:focus-visible {
  color: #1d4ed8 !important;
}
html[data-theme="light"] .songLookupPanel {
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.18) !important;
}
html[data-theme="light"] .songLookupHeader strong, html[data-theme="light"] .songLookupResult h4, html[data-theme="light"] .songLookupGrid strong {
  color: #0f172a !important;
}
html[data-theme="light"] .songLookupHeader button {
  background: #e8eef7 !important;
  color: #334155 !important;
}
html[data-theme="light"] .songLookupLoading, html[data-theme="light"] .songLookupError, html[data-theme="light"] .songLookupEmpty, html[data-theme="light"] .songLookupArtist, html[data-theme="light"] .songLookupNotes {
  color: #475569 !important;
}
html[data-theme="light"] .songLookupGrid {
  background: #f3f7ff !important;
  border-color: #d6e3f5 !important;
}
html[data-theme="light"] .songLookupGrid span, html[data-theme="light"] .songLookupDisclaimer {
  color: #64748b !important;
}
@media(min-width:901px) {
  body.is-desktop-device .topbar .controls > .mobileAutoTop, body.is-desktop-device .mobileAutoTop {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 3px 8px 3px 3px !important;
    gap: 8px !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)) !important;
    border: 1px solid rgba(148,163,184,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 8px 18px rgba(2,6,23,.16) !important;
    overflow: hidden !important;
  }
  body.is-desktop-device .mobileAutoTop button, body.is-desktop-device #mobileAutoScrollBtn {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
    line-height: 1 !important;
    background: rgba(15,23,42,.72) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    box-shadow: none !important;
  }
  body.is-desktop-device .mobileAutoTop button.activeAuto, body.is-desktop-device #mobileAutoScrollBtn.activeAuto, body.is-desktop-device .mobileAutoTop button.activeBtn {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 6px 14px rgba(37,99,235,.28) !important;
  }
  body.is-desktop-device .mobileAutoTop input[type="range"] {
    flex: 1 1 auto !important;
    width: 46px !important;
    min-width: 0 !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: #3b82f6 !important;
    background: transparent !important;
  }
  body.is-desktop-device .mobileAutoTop input[type="range"]::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.35) !important;
  }
  body.is-desktop-device .mobileAutoTop input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -5px !important;
    border-radius: 999px !important;
    background: #3b82f6 !important;
    border: 2px solid rgba(255,255,255,.92) !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.28) !important;
  }
  body.is-desktop-device .mobileAutoTop input[type="range"]::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.35) !important;
  }
  body.is-desktop-device .mobileAutoTop input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border-radius: 999px !important;
    background: #3b82f6 !important;
    border: 2px solid rgba(255,255,255,.92) !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.28) !important;
  }
  html[data-theme="light"] body.is-desktop-device:not(.performance) .topbar .controls > .mobileAutoTop, html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop {
    background: linear-gradient(180deg,#ffffff,#f1f6ff) !important;
    border: 1px solid #cbd8ea !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(15,23,42,.08) !important;
  }
  html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop button, html[data-theme="light"] body.is-desktop-device:not(.performance) #mobileAutoScrollBtn {
    background: #ffffff !important;
    color: #172033 !important;
    border: 1px solid #c7d7ee !important;
    box-shadow: 0 3px 10px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop button.activeAuto, html[data-theme="light"] body.is-desktop-device:not(.performance) #mobileAutoScrollBtn.activeAuto, html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop button.activeBtn {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(37,99,235,.20) !important;
  }
  html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop input[type="range"]::-webkit-slider-runnable-track {
    background: #d3def0 !important;
  }
  html[data-theme="light"] body.is-desktop-device:not(.performance) .mobileAutoTop input[type="range"]::-moz-range-track {
    background: #d3def0 !important;
  }
}
.wclThemeToggleBtn {
  white-space: nowrap;
}
@media(max-width:900px) {
  html[data-theme="light"] body:not(.performance), html[data-theme="light"] body:not(.performance).is-mobile-device {
    background: #f3f7fb !important;
    color: #111827 !important;
  }
  html[data-theme="light"] body:not(.performance) .app, html[data-theme="light"] body:not(.performance) .main, html[data-theme="light"] body:not(.performance) .mobileScreen, html[data-theme="light"] body:not(.performance) .mobileToolsScreen, html[data-theme="light"] body:not(.performance) .mobilePadScreen {
    background: #f5f8fc !important;
    color: #111827 !important;
  }
  html[data-theme="light"] body:not(.performance) .topbar {
    background: linear-gradient(180deg,#ffffff 0%,#f7faff 100%) !important;
    border-bottom: 1px solid #d6e0ec !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body:not(.performance) .songTitleWrap, html[data-theme="light"] body:not(.performance) .songTitleLine, html[data-theme="light"] body:not(.performance) #songTitle {
    color: #111827 !important;
  }
  html[data-theme="light"] body:not(.performance) #songMeta, html[data-theme="light"] body:not(.performance) #flowMeta {
    color: #617085 !important;
  }
  html[data-theme="light"] body:not(.performance) .controls {
    background: linear-gradient(180deg,#ffffff,#f4f8fe) !important;
    border: 1px solid #d4deeb !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  }
  html[data-theme="light"] body:not(.performance) .controls button, html[data-theme="light"] body:not(.performance) .controls select, html[data-theme="light"] body:not(.performance) .controls .toolBtn, html[data-theme="light"] body:not(.performance) .controls .iconBtn, html[data-theme="light"] body:not(.performance) .controls .compactSelect {
    background: linear-gradient(180deg,#ffffff,#eef4fb) !important;
    color: #132036 !important;
    border: 1px solid #cbd8ea !important;
    box-shadow: 0 4px 10px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body:not(.performance) .controls button:hover, html[data-theme="light"] body:not(.performance) .controls select:hover {
    background: linear-gradient(180deg,#ffffff,#eaf2ff) !important;
    border-color: #adc2df !important;
  }
  html[data-theme="light"] body:not(.performance) .controls button.activeBtn, html[data-theme="light"] body:not(.performance) .controls button.activeAuto, html[data-theme="light"] body:not(.performance) .controls .primary {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html[data-theme="light"] body:not(.performance) .iconOnlyBtn svg, html[data-theme="light"] body:not(.performance) .paletteIcon, html[data-theme="light"] body:not(.performance) .eyeIcon {
    stroke: #1e3a8a !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileAutoTop {
    background: linear-gradient(180deg,#ffffff,#eef4fb) !important;
    border: 1px solid #cbd8ea !important;
    box-shadow: 0 4px 10px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileAutoTop button, html[data-theme="light"] body:not(.performance) #mobileAutoScrollBtn {
    background: #ffffff !important;
    color: #14233a !important;
    border: 1px solid #c7d7ee !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileAutoTop button.activeAuto, html[data-theme="light"] body:not(.performance) #mobileAutoScrollBtn.activeAuto, html[data-theme="light"] body:not(.performance) .mobileAutoTop button.activeBtn {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html[data-theme="light"] body:not(.performance) .sidebar, html[data-theme="light"] body:not(.performance) .toolsPanel, html[data-theme="light"] body:not(.performance) .library, html[data-theme="light"] body:not(.performance) .setlist {
    background: #f8fbff !important;
    color: #111827 !important;
  }
  html[data-theme="light"] body:not(.performance) .search {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd8ea !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.04) !important;
  }
  html[data-theme="light"] body:not(.performance) .tabs button {
    background: #eaf1f9 !important;
    color: #637189 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }
  html[data-theme="light"] body:not(.performance) .tabs button.active, html[data-theme="light"] body:not(.performance) #tabTools.active, html[data-theme="light"] body:not(.performance) #tabSongs.active, html[data-theme="light"] body:not(.performance) #tabSet.active {
    background: #fff8ed !important;
    color: #111827 !important;
    border-color: #efc878 !important;
    box-shadow: 0 8px 18px rgba(180,107,20,.12) !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileToolGrid button, html[data-theme="light"] body:not(.performance) .toolLinkBtn, html[data-theme="light"] body:not(.performance) .mobileToolGrid select {
    background: linear-gradient(180deg,#ffffff,#eef4fb) !important;
    color: #14233a !important;
    border: 1px solid #cbd8ea !important;
    box-shadow: 0 6px 14px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileToolGrid button:hover, html[data-theme="light"] body:not(.performance) .toolLinkBtn:hover {
    background: linear-gradient(180deg,#ffffff,#e8f1ff) !important;
    border-color: #adc2df !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileToolGrid .wclThemeToggleBtn, html[data-theme="light"] body:not(.performance) .toolLinkBtn.wclThemeToggleBtn {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileToolCard {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d8e2ef !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileBottomNav {
    background: rgba(255,255,255,.94) !important;
    border: 1px solid #d4deeb !important;
    box-shadow: 0 -12px 28px rgba(15,23,42,.10) !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileBottomNav button {
    color: #526176 !important;
  }
  html[data-theme="light"] body:not(.performance) .mobileBottomNav button.active, html[data-theme="light"] body:not(.performance) .mobileBottomNav button.mobileNavActive {
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #ffffff !important;
  }
  html[data-theme="light"] body:not(.performance) .wclCustomSelectBackdrop {
    background: rgba(15,23,42,.14) !important;
  }
  html[data-theme="light"] body:not(.performance) .wclCustomSelectMenu {
    background: rgba(255,255,255,.98) !important;
    border: 1px solid #d2deed !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.18) !important;
  }
  html[data-theme="light"] body:not(.performance) .wclCustomSelectOption {
    background: linear-gradient(180deg,#ffffff,#eef4fb) !important;
    color: #111827 !important;
    border: 1px solid #cbd8ea !important;
  }
  html[data-theme="light"] body:not(.performance) .wclCustomSelectOption.isSelected {
    background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
    color: #ffffff !important;
    border-color: transparent !important;
  }
  body.is-mobile-device #mobilePadScreen {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 8px 10px calc(var(--navH) + 16px) !important;
  }
  body.is-mobile-device #mobileWidgetMount {
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadCard, body.is-mobile-device #mobilePadScreen .worshipPadCard, body.is-mobile-device .mobilePadScreen .worshipPadCard {
    padding: 10px !important;
    border-radius: 18px !important;
    margin: 0 0 10px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadHeader {
    display: none !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device #mobileWidgetMount .worshipPadNow, body.is-mobile-device #mobileWidgetMount .worshipPadControl, body.is-mobile-device #mobileWidgetMount .wclSeeSawBlock {
    padding: 8px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
  }
  body.is-mobile-device #mobileWidgetMount .swellMeterTop, body.is-mobile-device #mobileWidgetMount .worshipPadControlHead, body.is-mobile-device #mobileWidgetMount .worshipPadControlHead.mini {
    margin-bottom: 5px !important;
  }
  body.is-mobile-device #mobileWidgetMount .swellLayerRow {
    min-height: 16px !important;
    font-size: 10px !important;
    margin: 2px 0 !important;
  }
  body.is-mobile-device #mobileWidgetMount .swellMeterTrack {
    height: 4px !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadModeRow, body.is-mobile-device #mobileWidgetMount .padLayerModeRow {
    gap: 6px !important;
    margin: 7px 0 !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadModeRow button, body.is-mobile-device #mobileWidgetMount .padLayerModeRow button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
  }
  body.is-mobile-device #mobileWidgetMount .wclSeeSawControls {
    gap: 6px !important;
  }
  body.is-mobile-device #mobileWidgetMount .wclSeeSawControls select, body.is-mobile-device #mobileWidgetMount .wclSeeSawControls button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadGrid, body.is-mobile-device #mobileWidgetMount .droneKeyGrid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 8px 0 !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadGrid button, body.is-mobile-device #mobileWidgetMount .droneKeyBtn, body.is-mobile-device #mobilePadScreen .droneKeyBtn {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadControl label, body.is-mobile-device #mobileWidgetMount .worshipPadControlHead label, body.is-mobile-device #mobileWidgetMount .delayTool label {
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadControl span, body.is-mobile-device #mobileWidgetMount .miniReadout {
    font-size: 11px !important;
  }
  body.is-mobile-device #mobileWidgetMount .worshipPadRecommendations, body.is-mobile-device #mobileWidgetMount .delayTool {
    display: none !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad .main, body.mobile-view-pad .main {
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-pad .contentArea, body.mobile-view-pad .contentArea {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobilePadScreen, body.mobile-view-pad #mobilePadScreen {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 8px calc(var(--mobileNav,74px) + 12px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount, body.mobile-view-pad #mobileWidgetMount {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadCard, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadCard, body.mobile-view-pad #mobileWidgetMount .worshipPadCard, body.mobile-view-pad #mobilePadScreen .worshipPadCard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 8px 10px !important;
    border-radius: 16px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  body.is-mobile-device.mobile-view-pad .topbar, body.mobile-view-pad .topbar {
    flex: 0 0 auto !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHeader, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHeader, body.mobile-view-pad #mobileWidgetMount .worshipPadHeader, body.mobile-view-pad #mobilePadScreen .worshipPadHeader, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadRecommendations, body.mobile-view-pad #mobileWidgetMount .worshipPadRecommendations, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .delayTool, body.mobile-view-pad #mobileWidgetMount .delayTool {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadModeRow, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .padLayerModeRow, body.mobile-view-pad #mobileWidgetMount .worshipPadModeRow, body.mobile-view-pad #mobileWidgetMount .padLayerModeRow {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
    margin: 4px 0 6px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .padLayerModeRow, body.mobile-view-pad #mobileWidgetMount .padLayerModeRow {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadModeRow button, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .padLayerModeRow button, body.mobile-view-pad #mobileWidgetMount .worshipPadModeRow button, body.mobile-view-pad #mobileWidgetMount .padLayerModeRow button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .wclSeeSawBlock, body.mobile-view-pad #mobileWidgetMount .wclSeeSawBlock {
    padding: 8px !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .wclSeeSawControls, body.mobile-view-pad #mobileWidgetMount .wclSeeSawControls {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px !important;
    gap: 6px !important;
    width: 100% !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .wclSeeSawControls select, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .wclSeeSawControls button, body.mobile-view-pad #mobileWidgetMount .wclSeeSawControls select, body.mobile-view-pad #mobileWidgetMount .wclSeeSawControls button {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .droneKeyGrid, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadGrid, body.mobile-view-pad #mobileWidgetMount .droneKeyGrid, body.mobile-view-pad #mobileWidgetMount .worshipPadGrid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 5px !important;
    margin: 6px 0 !important;
    width: 100% !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .droneKeyBtn, body.is-mobile-device.mobile-view-pad #mobilePadScreen .droneKeyBtn, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadGrid button, body.mobile-view-pad #mobileWidgetMount .droneKeyBtn, body.mobile-view-pad #mobilePadScreen .droneKeyBtn, body.mobile-view-pad #mobileWidgetMount .worshipPadGrid button {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadControl, body.mobile-view-pad #mobileWidgetMount .worshipPadControl {
    padding: 8px 10px !important;
    margin: 6px 0 !important;
    border-radius: 14px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadControlHead, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadControlHead.mini, body.mobile-view-pad #mobileWidgetMount .worshipPadControlHead, body.mobile-view-pad #mobileWidgetMount .worshipPadControlHead.mini {
    margin-bottom: 4px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount input[type="range"], body.mobile-view-pad #mobileWidgetMount input[type="range"] {
    height: 18px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .padLayerLabel, body.mobile-view-pad #mobileWidgetMount .padLayerLabel {
    margin: 2px 0 3px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount *, body.mobile-view-pad #mobileWidgetMount * {
    box-sizing: border-box !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, body.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    display: block !important;
    box-sizing: border-box !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow small, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow small, body.mobile-view-pad #mobileWidgetMount .worshipPadNow small, body.mobile-view-pad #mobilePadScreen .worshipPadNow small {
    display: block !important;
    margin: 0 0 2px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow strong, body.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, body.mobile-view-pad #mobilePadScreen .worshipPadNow strong {
    display: inline-flex !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    margin-bottom: 4px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTitle, body.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.mobile-view-pad #mobilePadScreen .swellMeterTitle, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, body.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    display: grid !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg,rgba(239,246,255,.96),rgba(226,239,255,.9)) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .worshipPadNow, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    background: linear-gradient(180deg,rgba(30,41,59,.96),rgba(15,23,42,.94)) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow small, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow small, body.mobile-view-pad #mobileWidgetMount .worshipPadNow small, body.mobile-view-pad #mobilePadScreen .worshipPadNow small {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow strong, body.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, body.mobile-view-pad #mobilePadScreen .worshipPadNow strong {
    grid-area: status !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 24px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: rgba(37,99,235,.08) !important;
    color: #1e3a8a !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow strong, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .worshipPadNow strong, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .worshipPadNow strong {
    background: rgba(59,130,246,.12) !important;
    color: #bfdbfe !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    float: none !important;
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline:active, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline:active, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline:active, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline:active {
    transform: scale(.97) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    clear: none !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.52) !important;
    box-sizing: border-box !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    background: rgba(15,23,42,.55) !important;
    border-color: rgba(96,165,250,.18) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    justify-content: space-between !important;
    gap: 8px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTitle, body.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.mobile-view-pad #mobilePadScreen .swellMeterTitle {
    min-width: 0 !important;
    color: #1e3a8a !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    flex: 1 1 auto !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTitle, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTitle, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterTitle, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterTitle, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    color: #bfdbfe !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTrack, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTrack, body.mobile-view-pad #mobileWidgetMount .swellMeterTrack, body.mobile-view-pad #mobilePadScreen .swellMeterTrack {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 4px !important;
    margin: 0 0 6px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: rgba(148,163,184,.26) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterFill, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterFill, body.mobile-view-pad #mobileWidgetMount .swellMeterFill, body.mobile-view-pad #mobilePadScreen .swellMeterFill {
    display: block !important;
    height: 100% !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#2563eb,#22c55e) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterLayers, body.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.mobile-view-pad #mobilePadScreen .swellMeterLayers {
    display: grid !important;
    min-width: 0 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow, body.mobile-view-pad #mobileWidgetMount .swellLayerRow, body.mobile-view-pad #mobilePadScreen .swellLayerRow {
    display: grid !important;
    grid-template-columns: 36px 28px minmax(0,1fr) !important;
    color: #64748b !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow span, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow span, body.mobile-view-pad #mobileWidgetMount .swellLayerRow span, body.mobile-view-pad #mobilePadScreen .swellLayerRow span {
    min-width: 0 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow em, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow em, body.mobile-view-pad #mobileWidgetMount .swellLayerRow em, body.mobile-view-pad #mobilePadScreen .swellLayerRow em {
    color: #94a3b8 !important;
    font-style: normal !important;
    font-weight: 800 !important;
    text-align: right !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow b, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow b, body.mobile-view-pad #mobileWidgetMount .swellLayerRow b, body.mobile-view-pad #mobilePadScreen .swellLayerRow b {
    overflow: hidden !important;
    background: linear-gradient(90deg,#60a5fa var(--level,0%),rgba(148,163,184,.22) var(--level,0%)) !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, body.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas: "meter stop" !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg,rgba(248,251,255,.98),rgba(232,242,255,.92)) !important;
    border: 1px solid rgba(147,197,253,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 8px 22px rgba(37,99,235,.08) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .worshipPadNow, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    background: linear-gradient(145deg,rgba(30,41,59,.96),rgba(15,23,42,.96)) !important;
    border-color: rgba(96,165,250,.24) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.22) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow > strong, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow > strong, body.mobile-view-pad #mobileWidgetMount .worshipPadNow > strong, body.mobile-view-pad #mobilePadScreen .worshipPadNow > strong {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    background: linear-gradient(180deg,#ffffff,#eaf2ff) !important;
    border: 1px solid rgba(37,99,235,.35) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 5px 14px rgba(37,99,235,.14) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    grid-area: meter !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTitle, body.mobile-view-pad #mobileWidgetMount .swellMeterTitle, body.mobile-view-pad #mobilePadScreen .swellMeterTitle {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    display: block !important;
    background: rgba(37,99,235,.08) !important;
    text-align: left !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    background: rgba(59,130,246,.14) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterVisual, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterVisual, body.mobile-view-pad #mobileWidgetMount .swellMeterVisual, body.mobile-view-pad #mobilePadScreen .swellMeterVisual {
    grid-area: wave !important;
    position: relative !important;
    height: 34px !important;
    min-width: 0 !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    background: linear-gradient(90deg,rgba(148,163,184,.16) 1px,transparent 1px) 0 0/32px 100%,
      linear-gradient(180deg,rgba(147,197,253,.18),rgba(255,255,255,.28)) !important;
    border: 1px solid rgba(147,197,253,.35) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterVisual, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterVisual, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterVisual, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterVisual {
    background: linear-gradient(90deg,rgba(148,163,184,.11) 1px,transparent 1px) 0 0/32px 100%,
      linear-gradient(180deg,rgba(15,23,42,.35),rgba(30,41,59,.26)) !important;
    border-color: rgba(96,165,250,.20) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellWaveSvg, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellWaveSvg, body.mobile-view-pad #mobileWidgetMount .swellWaveSvg, body.mobile-view-pad #mobilePadScreen .swellWaveSvg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellWaveLine, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellWaveLine, body.mobile-view-pad #mobileWidgetMount .swellWaveLine, body.mobile-view-pad #mobilePadScreen .swellWaveLine {
    fill: none !important;
    stroke: url(#wclSwellWaveGradient) !important;
    stroke-width: 3.25 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 3px 5px rgba(37,99,235,.20)) !important;
    transition: points .18s linear !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellWaveDot, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellWaveDot, body.mobile-view-pad #mobileWidgetMount .swellWaveDot, body.mobile-view-pad #mobilePadScreen .swellWaveDot {
    fill: #7c3aed !important;
    stroke: #fff !important;
    stroke-width: 1.5 !important;
    filter: drop-shadow(0 3px 5px rgba(124,58,237,.25)) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTrack, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTrack, body.mobile-view-pad #mobileWidgetMount .swellMeterTrack, body.mobile-view-pad #mobilePadScreen .swellMeterTrack {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterLayers, body.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.mobile-view-pad #mobilePadScreen .swellMeterLayers {
    grid-area: mixer !important;
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 54px !important;
    height: 54px !important;
    padding: 7px 7px 5px !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.48) !important;
    border: 1px solid rgba(147,197,253,.35) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterLayers, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterLayers, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterLayers, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterLayers {
    background: rgba(15,23,42,.32) !important;
    border-color: rgba(96,165,250,.17) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow, body.mobile-view-pad #mobileWidgetMount .swellLayerRow, body.mobile-view-pad #mobilePadScreen .swellLayerRow {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 10px !important;
    min-width: 10px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow b, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow b, body.mobile-view-pad #mobileWidgetMount .swellLayerRow b, body.mobile-view-pad #mobilePadScreen .swellLayerRow b {
    display: block !important;
    width: 7px !important;
    height: 30px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,#22c55e var(--level,0%),rgba(148,163,184,.20) var(--level,0%)) !important;
    transform: rotate(180deg) !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow span, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow span, body.mobile-view-pad #mobileWidgetMount .swellLayerRow span, body.mobile-view-pad #mobilePadScreen .swellLayerRow span {
    display: block !important;
    width: 14px !important;
    color: #64748b !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellLayerRow em, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellLayerRow em, body.mobile-view-pad #mobileWidgetMount .swellLayerRow em, body.mobile-view-pad #mobilePadScreen .swellLayerRow em {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMixerEmpty, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMixerEmpty, body.mobile-view-pad #mobileWidgetMount .swellMixerEmpty, body.mobile-view-pad #mobilePadScreen .swellMixerEmpty {
    display: none !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadNow, body.mobile-view-pad #mobileWidgetMount .worshipPadNow, body.mobile-view-pad #mobilePadScreen .worshipPadNow {
    gap: 8px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    position: relative !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    grid-area: route !important;
    align-self: start !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    min-width: 0 !important;
    display: flex !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterVisual, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterVisual, body.mobile-view-pad #mobileWidgetMount .swellMeterVisual, body.mobile-view-pad #mobilePadScreen .swellMeterVisual, body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterLayers, body.mobile-view-pad #mobileWidgetMount .swellMeterLayers, body.mobile-view-pad #mobilePadScreen .swellMeterLayers {
    display: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, body.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    background: linear-gradient(180deg,rgba(148,163,184,.10),rgba(148,163,184,.04)),
      repeating-linear-gradient(90deg,rgba(148,163,184,.13) 0 1px,transparent 1px 8.33%) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBarTrack, body.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, body.mobile-view-pad #mobilePadScreen .swellKeyBarTrack {
    background: rgba(15,23,42,.12) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack span, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBarTrack span, body.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack span, body.mobile-view-pad #mobilePadScreen .swellKeyBarTrack span {
    height: var(--bar-level,0%) !important;
    min-height: 0 !important;
    background: linear-gradient(180deg,#22c55e 0%,#7c3aed 58%,#2563eb 100%) !important;
    box-shadow: 0 -8px 18px rgba(124,58,237,.28) !important;
    transition: height .22s linear, filter .22s linear !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive .swellKeyBarTrack span, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive .swellKeyBarTrack span, body.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive .swellKeyBarTrack span, body.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive .swellKeyBarTrack span {
    filter: saturate(1.22) brightness(1.08) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar b, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar b, body.mobile-view-pad #mobileWidgetMount .swellKeyBar b, body.mobile-view-pad #mobilePadScreen .swellKeyBar b {
    overflow: hidden !important;
    color: #7b8ca8 !important;
    font-weight: 950 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive b, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive b, body.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive b, body.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive b {
    color: #173b8d !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellKeyBars, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    background: linear-gradient(180deg,rgba(30,41,59,.74),rgba(15,23,42,.52)),
      repeating-linear-gradient(90deg,rgba(148,163,184,.15) 0 1px,transparent 1px 8.33%) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBarTrack, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellKeyBarTrack {
    background: rgba(2,6,23,.46) !important;
    border-color: rgba(148,163,184,.13) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar b, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar b, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellKeyBar b, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellKeyBar b {
    color: #8ea0ba !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive b, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive b, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellKeyBar.isActive b, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellKeyBar.isActive b {
    color: #eaf2ff !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 48px !important;
    grid-template-areas: "bars stop" !important;
    align-items: start !important;
    gap: 8px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    display: block !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    grid-area: stop !important;
    justify-self: end !important;
    align-self: start !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, body.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    grid-area: bars !important;
    align-self: stretch !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    background: rgba(37,99,235,.12) !important;
    border: 1px solid rgba(37,99,235,.12) !important;
    color: #173b8d !important;
    box-shadow: 0 6px 16px rgba(15,23,42,.06) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    background: rgba(37,99,235,.22) !important;
    border-color: rgba(147,197,253,.12) !important;
    color: #eaf2ff !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    position: relative !important;
    display: block !important;
    width: 100% !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    position: absolute !important;
    z-index: 8 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterRoute, body.mobile-view-pad #mobileWidgetMount .swellMeterRoute, body.mobile-view-pad #mobilePadScreen .swellMeterRoute {
    height: 22px !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    font-weight: 950 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    position: absolute !important;
    right: 14px !important;
    top: 10px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    z-index: 9 !important;
    line-height: 1 !important;
    transform: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, body.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    gap: 6px !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter, body.mobile-view-pad #mobileWidgetMount .worshipPadSwellMeter, body.mobile-view-pad #mobilePadScreen .worshipPadSwellMeter {
    height: 124px !important;
    min-height: 124px !important;
    padding: 42px 16px 12px 16px !important;
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellMeterTop, body.mobile-view-pad #mobileWidgetMount .swellMeterTop, body.mobile-view-pad #mobilePadScreen .swellMeterTop {
    left: 18px !important;
    top: 12px !important;
    width: calc(100% - 104px) !important;
    max-width: calc(100% - 104px) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.is-mobile-device.mobile-view-pad #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, body.mobile-view-pad #mobilePadScreen .worshipPadStopInline.worshipPadHardStopBtn {
    right: 16px !important;
    top: 10px !important;
    transform: none !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, body.mobile-view-pad #mobileWidgetMount .swellKeyBars, body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 auto !important;
    padding: 7px 8px 5px !important;
    align-items: end !important;
    justify-items: center !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg,rgba(255,255,255,.42),rgba(226,232,240,.22)) !important;
    border: 1px solid rgba(148,163,184,.22) !important;
  }
  html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBars, html[data-theme="dark"] body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBars, html[data-theme="dark"] body.mobile-view-pad #mobileWidgetMount .swellKeyBars, html[data-theme="dark"] body.mobile-view-pad #mobilePadScreen .swellKeyBars {
    background: linear-gradient(180deg,rgba(30,41,59,.68),rgba(15,23,42,.44)) !important;
    border-color: rgba(148,163,184,.18) !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar, body.mobile-view-pad #mobileWidgetMount .swellKeyBar, body.mobile-view-pad #mobilePadScreen .swellKeyBar {
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    display: grid !important;
    grid-template-rows: 44px 11px !important;
    gap: 3px !important;
    align-items: end !important;
    justify-items: center !important;
    text-align: center !important;
    opacity: .96 !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBarTrack, body.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack, body.mobile-view-pad #mobilePadScreen .swellKeyBarTrack {
    position: relative !important;
    width: min(100%, 34px) !important;
    min-width: 0 !important;
    height: 44px !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
    border-radius: 10px 10px 5px 5px !important;
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack span, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBarTrack span, body.mobile-view-pad #mobileWidgetMount .swellKeyBarTrack span, body.mobile-view-pad #mobilePadScreen .swellKeyBarTrack span {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    border-radius: 9px 9px 4px 4px !important;
  }
  body.is-mobile-device.mobile-view-pad #mobileWidgetMount .swellKeyBar b, body.is-mobile-device.mobile-view-pad #mobilePadScreen .swellKeyBar b, body.mobile-view-pad #mobileWidgetMount .swellKeyBar b, body.mobile-view-pad #mobilePadScreen .swellKeyBar b {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 11px !important;
    letter-spacing: -.04em !important;
  }
}
@media(min-width:901px) {
  .flowPanel .worshipPadNow, .flowPanel .worshipPadGaugeOnly, .panelCard .worshipPadNow, .panelCard .worshipPadGaugeOnly {
    position: relative !important;
  }
  .flowPanel .worshipPadSwellMeter, .panelCard .worshipPadSwellMeter {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 76px !important;
    height: auto !important;
    margin: 0 0 10px !important;
    padding: 34px 10px 10px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
  }
  .flowPanel .swellMeterTop, .panelCard .swellMeterTop {
    position: absolute !important;
    top: 9px !important;
    left: 10px !important;
    right: 68px !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .flowPanel .swellMeterRoute, .panelCard .swellMeterRoute {
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 20px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 10.5px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    color: #eaf2ff !important;
    background: rgba(37,99,235,.22) !important;
    border: 1px solid rgba(147,197,253,.12) !important;
  }
  .flowPanel .worshipPadHardStopBtn.worshipPadStopInline, .panelCard .worshipPadHardStopBtn.worshipPadStopInline {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 4 !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
  .flowPanel .swellKeyBars, .panelCard .swellKeyBars {
    display: grid !important;
    grid-template-columns: repeat(12,minmax(0,1fr)) !important;
    column-gap: 3px !important;
    row-gap: 0 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 4px 5px 3px !important;
    align-items: end !important;
    justify-items: center !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    background: rgba(15,23,42,.35) !important;
    border: 1px solid rgba(148,163,184,.12) !important;
  }
  .flowPanel .swellKeyBar, .panelCard .swellKeyBar {
    display: grid !important;
    grid-template-rows: 27px 9px !important;
    gap: 2px !important;
    align-items: end !important;
    justify-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .flowPanel .swellKeyBarTrack, .panelCard .swellKeyBarTrack {
    position: relative !important;
    display: block !important;
    width: min(100%,22px) !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 auto !important;
    align-self: end !important;
    justify-self: center !important;
    border-radius: 7px 7px 4px 4px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg,rgba(226,232,240,.78),rgba(148,163,184,.54)) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
  }
  html[data-theme="dark"] .flowPanel .swellKeyBarTrack, html[data-theme="dark"] .panelCard .swellKeyBarTrack {
    background: linear-gradient(180deg,rgba(51,65,85,.85),rgba(30,41,59,.78)) !important;
    border-color: rgba(148,163,184,.16) !important;
  }
  .flowPanel .swellKeyBarTrack span, .panelCard .swellKeyBarTrack span {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: 100% !important;
    height: var(--bar-level,0%) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    border-radius: 6px 6px 3px 3px !important;
    background: linear-gradient(180deg,#22c55e,#2563eb,#8b5cf6) !important;
    box-shadow: 0 0 12px rgba(124,58,237,.24) !important;
    transform: none !important;
    transition: height .12s linear !important;
  }
  .flowPanel .swellKeyBar.isActive .swellKeyBarTrack, .panelCard .swellKeyBar.isActive .swellKeyBarTrack {
    box-shadow: 0 0 0 1px rgba(96,165,250,.22), 0 8px 16px rgba(15,23,42,.20) !important;
  }
  .flowPanel .swellKeyBar b, .panelCard .swellKeyBar b {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 7px !important;
    line-height: 9px !important;
    font-weight: 950 !important;
    letter-spacing: -.06em !important;
    color: #9fb3cf !important;
  }
}
@media(min-width:901px) {
  html[data-theme="light"] .flowPanel .worshipPadSwellMeter, html[data-theme="light"] .panelCard .worshipPadSwellMeter {
    background: linear-gradient(180deg,#f8fbff,#edf5ff) !important;
    border: 1px solid #bcd5ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96),
      0 10px 24px rgba(37,99,235,.08) !important;
  }
  html[data-theme="light"] .flowPanel .swellMeterRoute, html[data-theme="light"] .panelCard .swellMeterRoute {
    color: #123a8a !important;
    background: linear-gradient(180deg,#dcebff,#cfe1ff) !important;
    border: 1px solid #b9d1fb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
  }
  html[data-theme="light"] .flowPanel .swellKeyBars, html[data-theme="light"] .panelCard .swellKeyBars {
    background: linear-gradient(180deg,#edf5ff,#e1ecf8) !important;
    border: 1px solid #c7d8ee !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  }
  html[data-theme="light"] .flowPanel .swellKeyBarTrack, html[data-theme="light"] .panelCard .swellKeyBarTrack {
    background: linear-gradient(180deg,#dce6f1,#c8d4e2) !important;
    border: 1px solid #b8c6d8 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75),
      0 2px 4px rgba(15,23,42,.06) !important;
  }
  html[data-theme="light"] .flowPanel .swellKeyBar.isActive .swellKeyBarTrack, html[data-theme="light"] .panelCard .swellKeyBar.isActive .swellKeyBarTrack {
    border-color: #8db7f4 !important;
    box-shadow: 0 0 0 1px rgba(37,99,235,.12),
      0 6px 12px rgba(37,99,235,.12) !important;
  }
  html[data-theme="light"] .flowPanel .swellKeyBarTrack span, html[data-theme="light"] .panelCard .swellKeyBarTrack span {
    background: linear-gradient(180deg,#22c55e 0%,#2563eb 52%,#8b5cf6 100%) !important;
    box-shadow: 0 0 10px rgba(37,99,235,.22) !important;
  }
  html[data-theme="light"] .flowPanel .swellKeyBar b, html[data-theme="light"] .panelCard .swellKeyBar b {
    color: #66809f !important;
    text-shadow: none !important;
  }
  html[data-theme="light"] .flowPanel .worshipPadHardStopBtn.worshipPadStopInline, html[data-theme="light"] .panelCard .worshipPadHardStopBtn.worshipPadStopInline {
    background: #f7fbff !important;
    color: #0b4bd3 !important;
    border: 1px solid #aac8fb !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.14) !important;
  }
}
.padLayerModeBtn.switchingPadLayerMode, .padLayerModeRow button.switchingPadLayerMode {
  position: relative !important;
  padding-left: 25px !important;
}
.padLayerModeBtn.switchingPadLayerMode::before, .padLayerModeRow button.switchingPadLayerMode::before {
  content: "";
  position: absolute;
  left: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.32);
  border-top-color: #fff;
  animation: wclPadModeSpin .75s linear infinite;
}
#worshipPadLayerModeReadout.padLayerReadoutSwitching {
  color: #f6d28c !important;
}
.worshipPadLayerModeBlock.padLayerSwitching {
  border-radius: 16px;
}
@keyframes wclPadModeSpin {
  to {
    transform: rotate(360deg);
  }
}
.worshipPadHardStopBtn.worshipPadStopInline, #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
  min-width: 42px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
@media(max-width:900px) {
  .worshipPadHardStopBtn.worshipPadStopInline, #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
    min-width: 38px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }
  .padLayerModeBtn.switchingPadLayerMode, .padLayerModeRow button.switchingPadLayerMode {
    padding-left: 22px !important;
  }
  .padLayerModeBtn.switchingPadLayerMode::before, .padLayerModeRow button.switchingPadLayerMode::before {
    left: 7px;
    width: 10px;
    height: 10px;
  }
}
.worshipPadGrid button.fadingOutPadKey, .droneKeyGrid button.fadingOutPadKey, .droneKeyBtn.fadingOutPadKey {
  position: relative !important;
  background: linear-gradient(135deg,#f97316,#c2410c) !important;
  color: #fff !important;
  border-color: rgba(251,146,60,.9) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.18), 0 10px 26px rgba(194,65,12,.22) !important;
  opacity: .96 !important;
}
.worshipPadGrid button.fadingOutPadKey::before, .droneKeyGrid button.fadingOutPadKey::before, .droneKeyBtn.fadingOutPadKey::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: wclPadModeSpin .75s linear infinite;
  pointer-events: none;
}
.worshipPadGrid button.fadingOutPadKey span, .droneKeyGrid button.fadingOutPadKey span, .droneKeyBtn.fadingOutPadKey span {
  transform: translateX(6px);
}
@media(max-width:900px) {
  #mobileWidgetMount .droneKeyBtn.fadingOutPadKey::before, #mobilePadScreen .droneKeyBtn.fadingOutPadKey::before {
    left: 7px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }
}
@media (min-width:901px) {
  .sidebar {
    min-height: 0 !important;
  }
  .setlist {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  #setListBox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 0 8px 14px !important;
    gap: 5px !important;
  }
  .setListHeader {
    flex: 0 0 auto !important;
    padding: 8px 8px 7px !important;
    gap: 6px !important;
  }
  .setListHeader > span {
    font-size: 11px !important;
    letter-spacing: .04em !important;
  }
  .setHeaderActions {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .setHeaderActions button, .sectionHeader .setHeaderActions button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .setItemEditable {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 7px 8px !important;
    margin-bottom: 6px !important;
    border-radius: 11px !important;
  }
  .setItemInfo {
    min-width: 0 !important;
    gap: 2px !important;
    padding-right: 2px !important;
  }
  .setItemTitle {
    max-width: 100% !important;
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .setItemSub {
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .setCapoText {
    color: #d9ab63 !important;
  }
  .setItemControls {
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .setKeyControl {
    flex: 0 0 auto !important;
    height: 26px !important;
    gap: 4px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }
  .setKeySelect {
    width: 46px !important;
    height: 21px !important;
    min-height: 21px !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  .setMoveBtn, .setRemoveBtn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .songActions {
    margin-top: 6px !important;
    gap: 4px !important;
  }
  .songMenuWrap {
    gap: 3px !important;
  }
}
.wclTunerAnchorBtn {
  white-space: nowrap;
}
.wclGuitarTunerFloat.wclTunerRebuilt {
  position: fixed !important;
  z-index: 95000 !important;
  width: 460px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 92px);
  overflow: visible;
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: rgba(8,13,22,.96);
  border: 1px solid rgba(148,163,184,.22);
  color: #f8fafc;
  box-shadow: 0 28px 80px rgba(0,0,0,.54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wclGuitarTunerFloat.wclTunerRebuilt[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.wclTunerRebuilt .wclTunerHeader strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerIcon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  color: white;
  font-size: 15px;
}
.wclTunerRebuilt .wclTunerHeader small {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}
.wclTunerRebuilt .wclTunerCloseBtn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 13px;
  background: rgba(148,163,184,.13);
  color: #e5e7eb;
  font-size: 20px;
  border: 1px solid rgba(148,163,184,.1);
}
.wclTunerRebuilt .wclTunerModeBar {
  position: relative;
}
.wclTunerRebuilt .wclTunerModeMenuBtn {
  width: 100%;
  height: 38px;
  border-radius: 13px;
  background: rgba(15,23,42,.86);
  border: 1px solid rgba(148,163,184,.20);
  color: #f8fafc;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  touch-action: none;
}
.wclTunerRebuilt .wclTunerModeMenuBtn span {
  color: #94a3b8;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerModeMenuBtn strong {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerModeMenuBtn b {
  color: #93c5fd;
  font-size: 12px;
}
.wclTunerRebuilt .wclTunerModePopup {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  padding: 8px;
  border-radius: 18px;
  background: rgba(8,13,22,.88);
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 22px 55px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.wclTunerRebuilt .wclTunerModePopup[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerModeHint {
  padding: 0 6px 7px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
}
.wclTunerRebuilt .wclTunerModeWheel {
  max-height: 216px;
  overflow: auto;
  padding: 22px 2px;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
}
.wclTunerRebuilt .wclTunerModeOption {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(15,23,42,.72);
  color: #e5e7eb;
  scroll-snap-align: center;
  transform: scale(.97);
  opacity: .72;
  transition: transform .15s ease,opacity .15s ease,background .15s ease,border-color .15s ease;
}
.wclTunerRebuilt .wclTunerModeOption strong {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerModeOption small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
}
.wclTunerRebuilt .wclTunerModeOption.active {
  opacity: 1;
  transform: scale(1);
  color: white;
  background: linear-gradient(135deg,rgba(37,99,235,.42),rgba(124,58,237,.34));
  border-color: rgba(147,197,253,.55);
  box-shadow: 0 0 0 1px rgba(147,197,253,.14),0 10px 24px rgba(0,0,0,.24);
}
.wclTunerRebuilt .wclTunerModeOption.active::after {
  content: "✓";
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16a34a;
  color: white;
  font-size: 11px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerDial {
  position: relative;
  height: 98px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: radial-gradient(circle at 50% 120%,rgba(37,99,235,.28),transparent 48%),linear-gradient(180deg,rgba(15,23,42,.96),rgba(8,13,22,.92));
  margin-bottom: 12px;
}
.wclTunerRebuilt .wclTunerDial::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 40px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,#ef4444 0%,#f59e0b 34%,#22c55e 48%,#22c55e 52%,#f59e0b 66%,#ef4444 100%);
}
.wclTunerRebuilt .wclTunerDial::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 18px;
  height: 50px;
  opacity: .32;
  background: repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1px,transparent 1px 13px);
  mask-image: linear-gradient(90deg,transparent,black 12%,black 88%,transparent);
}
.wclTunerRebuilt .wclTunerDialGlow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%,rgba(34,197,94,.18),transparent 24%);
  pointer-events: none;
}
.wclTunerRebuilt .wclTunerCenterLine {
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: 22px;
  width: 2px;
  background: rgba(226,232,240,.72);
  transform: translateX(-50%);
  z-index: 2;
}
.wclTunerRebuilt .wclTunerNeedle {
  position: absolute;
  left: 50%;
  top: 15px;
  width: 5px;
  height: 54px;
  border-radius: 999px;
  background: #dbeafe;
  color: #dbeafe;
  box-shadow: 0 0 18px rgba(147,197,253,.76);
  transform: translateX(-50%);
  z-index: 3;
  will-change: left,transform;
}
.wclTunerRebuilt .wclTunerNeedle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid currentColor;
}
.wclTunerRebuilt .wclTunerNeedle.inTune {
  background: #86efac;
  color: #86efac;
  box-shadow: 0 0 22px rgba(34,197,94,.92);
}
.wclTunerRebuilt .wclTunerNeedle.flat,.wclTunerRebuilt .wclTunerNeedle.sharp {
  background: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 18px rgba(251,191,36,.66);
}
.wclTunerRebuilt .wclTunerCents {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 11px;
  display: flex;
  justify-content: space-between;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerStringDots {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 7px;
  min-height: 26px;
  margin: 0 2px 8px;
  align-items: center;
}
.wclTunerRebuilt .wclTunerStringDots[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerStringDots.count-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.wclTunerRebuilt .wclTunerStringDots.count-5 {
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.wclTunerRebuilt .wclTunerStringDots.count-12 {
  grid-template-columns: repeat(6,minmax(0,1fr));
  row-gap: 5px;
}
.wclTunerRebuilt .wclTunerStringDot {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 850;
}
.wclTunerRebuilt .wclTunerStringDot:nth-child(odd) {
  transform: translateY(-3px);
}
.wclTunerRebuilt .wclTunerStringDot:nth-child(even) {
  transform: translateY(3px);
}
.wclTunerRebuilt .wclTunerStringDots.count-12 .wclTunerStringDot {
  transform: none;
}
.wclTunerRebuilt .wclTunerStringDot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #334155;
  border: 1px solid rgba(148,163,184,.36);
  box-shadow: none;
}
.wclTunerRebuilt .wclTunerStringDot.candidate i {
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96,165,250,.12);
}
.wclTunerRebuilt .wclTunerStringDot.active i {
  background: #22c55e;
  border-color: #86efac;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16),0 0 16px rgba(34,197,94,.52);
}
.wclTunerRebuilt .wclTunerStringDot.active small,.wclTunerRebuilt .wclTunerStringDot.candidate small {
  color: #e5e7eb;
}
.wclTunerRebuilt .wclTunerReadout {
  text-align: center;
  padding: 5px 4px 10px;
}
.wclTunerRebuilt .wclTunerNote {
  font-size: 58px;
  line-height: .96;
  font-weight: 950;
  letter-spacing: -.06em;
  color: white;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.wclTunerRebuilt .wclTunerCentsValue {
  min-height: 20px;
  margin-top: 8px;
  color: #c4b5fd;
  font-size: 14px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerHz,.wclTunerRebuilt .wclTunerTarget {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 750;
}
.wclTunerRebuilt .wclTunerTarget {
  color: #c4b5fd;
}
.wclTunerRebuilt .wclTunerStrings {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 7px;
  margin: 7px 0 12px;
}
.wclTunerRebuilt .wclTunerStrings[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerStrings.count-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.wclTunerRebuilt .wclTunerStrings.count-5 {
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.wclTunerRebuilt .wclTunerStrings.count-12 {
  grid-template-columns: repeat(6,minmax(0,1fr));
}
.wclTunerRebuilt .wclTunerStrings button {
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.82);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.wclTunerRebuilt .wclTunerStrings button span {
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerStrings button small {
  color: #94a3b8;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
}
.wclTunerRebuilt .wclTunerStrings button.candidate {
  background: rgba(37,99,235,.30);
  border-color: rgba(96,165,250,.55);
}
.wclTunerRebuilt .wclTunerStrings button.active {
  background: linear-gradient(135deg,#16a34a,#2563eb);
  border-color: rgba(134,239,172,.72);
  color: white;
}
.wclTunerRebuilt .wclTunerStrings button.active small {
  color: rgba(255,255,255,.84);
}
.wclTunerRebuilt .wclVocalGraphPane {
  display: none;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(15,23,42,.56);
}
.wclTunerRebuilt.vocalMode .wclVocalGraphPane {
  display: block;
}
.wclTunerRebuilt .wclVocalGraphHeader {
  display: flex;
  justify-content: space-between;
  color: #e5e7eb;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 7px;
}
.wclTunerRebuilt .wclVocalGraphHeader small {
  color: #94a3b8;
}
.wclTunerRebuilt .wclVocalGraph {
  display: block;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.14);
  background: #0f172a;
}
.wclTunerRebuilt .wclVocalGraphMeta {
  margin-top: 6px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 800;
}
.wclTunerRebuilt .wclTunerActions {
  display: grid;
  grid-template-columns: minmax(0,1fr) 86px;
  gap: 9px;
}
.wclTunerRebuilt .wclTunerActions button {
  height: 42px;
  border-radius: 14px;
  font-weight: 900;
}
.wclTunerRebuilt .wclTunerStartBtn {
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  color: white;
}
.wclTunerRebuilt .wclTunerStopBtn {
  background: #3b1f24;
  color: #fecaca;
  border: 1px solid rgba(248,113,113,.24);
}
.wclTunerRebuilt .wclTunerHint {
  margin: 10px 2px 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}
html[data-theme="light"] .wclGuitarTunerFloat.wclTunerRebuilt {
  background: rgba(255,255,255,.96);
  border-color: #dbe4f0;
  color: #0f172a;
  box-shadow: 0 24px 65px rgba(15,23,42,.20);
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerModeMenuBtn,html[data-theme="light"] .wclTunerRebuilt .wclTunerModeOption,html[data-theme="light"] .wclTunerRebuilt .wclTunerStrings button {
  background: #f8fafc;
  border-color: #dbe4f0;
  color: #0f172a;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerModePopup {
  background: rgba(255,255,255,.90);
  border-color: #dbe4f0;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerDial {
  background: linear-gradient(180deg,#f8fafc,#eaf1ff);
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerNote {
  color: #0f172a;
  text-shadow: none;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerHz,html[data-theme="light"] .wclTunerRebuilt .wclTunerHint,html[data-theme="light"] .wclTunerRebuilt .wclTunerHeader small {
  color: #64748b;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerTarget,html[data-theme="light"] .wclTunerRebuilt .wclTunerCentsValue {
  color: #1d4ed8;
}
@media(max-width:900px) {
  .wclGuitarTunerFloat.wclTunerRebuilt {
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(var(--navH, 72px) + 12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100svh - var(--navH, 72px) - 22px - env(safe-area-inset-bottom));
    overflow: auto;
    padding: 14px;
    border-radius: 20px;
  }
  body.performance .wclGuitarTunerFloat.wclTunerRebuilt {
    bottom: 12px !important;
    max-height: calc(100svh - 24px);
  }
  .wclTunerRebuilt.modePopupOpen {
    overflow: visible;
  }
  .wclTunerRebuilt .wclTunerDial {
    height: 84px;
    margin-bottom: 9px;
  }
  .wclTunerRebuilt .wclTunerNeedle {
    height: 46px;
    top: 13px;
  }
  .wclTunerRebuilt .wclTunerNote {
    font-size: 48px;
  }
  .wclTunerRebuilt .wclTunerStrings {
    gap: 6px;
  }
  .wclTunerRebuilt .wclTunerStrings button {
    height: 34px;
    border-radius: 11px;
  }
  .wclTunerRebuilt .wclTunerModePopup {
    max-height: 246px;
  }
  .wclTunerRebuilt .wclTunerModeWheel {
    max-height: 178px;
  }
  .wclTunerRebuilt .wclTunerActions {
    grid-template-columns: minmax(0,1fr) 82px;
  }
}
.wclTunerRebuilt .wclTunerManualState {
  min-height: 28px;
  margin: -4px 0 10px;
  padding: 7px 10px;
  border-radius: 13px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(15,23,42,.50);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.wclTunerRebuilt .wclTunerManualState[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerManualState strong {
  color: #e5e7eb;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  white-space: nowrap;
}
.wclTunerRebuilt .wclTunerManualState span {
  color: #bfdbfe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wclTunerRebuilt .wclTunerManualState em {
  margin-left: auto;
  color: #64748b;
  font-style: normal;
  font-size: 10px;
  white-space: nowrap;
}
.wclTunerRebuilt .wclTunerStrings button.manual {
  border-color: rgba(134,239,172,.72) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.16) !important;
}
.wclTunerRebuilt .wclTunerStrings button.manual:not(.active) {
  background: rgba(22,163,74,.17) !important;
}
.wclTunerRebuilt .wclTunerStringDot.manual i {
  border-color: #86efac;
  box-shadow: 0 0 0 4px rgba(34,197,94,.13);
}
.wclTunerRebuilt .wclVocalGraphPane {
  display: block !important;
  margin: 7px 0 12px;
  padding: 9px;
}
.wclTunerRebuilt .wclVocalGraphHeader strong::after {
  content: "";
}
.wclTunerRebuilt .wclVocalGraph {
  height: 72px;
}
.wclTunerRebuilt .wclVocalGraphMeta {
  min-height: 14px;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerManualState {
  background: #f8fafc;
  border-color: #dbe4f0;
  color: #64748b;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerManualState strong {
  color: #0f172a;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerManualState span {
  color: #1d4ed8;
}
@media(max-width:900px) {
  .wclTunerRebuilt .wclTunerManualState {
    margin-bottom: 8px;
    padding: 6px 9px;
  }
  .wclTunerRebuilt .wclTunerManualState em {
    display: none;
  }
  .wclTunerRebuilt .wclVocalGraph {
    height: 60px;
  }
}
.wclGuitarTunerFloat.wclTunerHighPerformance {
  max-width: calc(100vw - 20px);
}
.wclTunerHighPerformance .wclTunerProBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(34,197,94,.16);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.28);
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
}
.wclTunerHighPerformance .wclTunerDial {
  height: 100px;
  margin-bottom: 8px;
}
.wclTunerHighPerformance .wclTunerNeedle {
  transition: box-shadow .12s ease, background .12s ease, color .12s ease;
}
.wclTunerHighPerformance .wclTunerInputRow {
  display: grid;
  align-items: center;
  gap: 8px;
  margin: 0 3px 10px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wclTunerHighPerformance .wclTunerInputMeter {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15,23,42,.95);
  border: 1px solid rgba(148,163,184,.16);
}
.wclTunerHighPerformance .wclTunerInputMeter i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,#2563eb,#22c55e);
  transition: width .08s linear;
}
.wclTunerHighPerformance .wclTunerInputMeter i.hot {
  background: linear-gradient(90deg,#f59e0b,#ef4444);
}
.wclTunerHighPerformance .wclTunerInputMeter i.good {
  background: linear-gradient(90deg,#2563eb,#22c55e);
}
.wclTunerHighPerformance .wclTunerInputRow b {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.wclTunerHighPerformance .wclTunerManualState {
  margin-bottom: 10px;
}
.wclTunerHighPerformance .wclTunerReadout {
  padding-top: 4px;
}
.wclTunerHighPerformance .wclTunerNote {
  font-size: 56px;
}
.wclTunerHighPerformance .wclTunerCentsValue {
  color: #bfdbfe;
}
.wclTunerHighPerformance .wclVocalGraphPane {
  display: block !important;
  margin-top: 8px;
  margin-bottom: 12px;
}
.wclTunerHighPerformance .wclVocalGraphHeader strong::after {
  content: "" !important;
}
.wclTunerHighPerformance .wclVocalGraph {
  height: 78px;
}
.wclTunerHighPerformance .wclTunerStrings button.manual {
  outline: 2px solid rgba(196,181,253,.78);
  outline-offset: 1px;
}
.wclTunerHighPerformance .wclTunerStringDot.manual i {
  background: #a78bfa;
  border-color: #ddd6fe;
  box-shadow: 0 0 0 4px rgba(167,139,250,.16),0 0 16px rgba(167,139,250,.55);
}
.wclTunerHighPerformance .wclTunerStringDots.count-12, .wclTunerHighPerformance .wclTunerStrings.count-12 {
  grid-template-columns: repeat(6,minmax(0,1fr));
}
html[data-theme="light"] .wclTunerHighPerformance .wclTunerInputMeter {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
html[data-theme="light"] .wclTunerHighPerformance .wclTunerProBadge {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}
@media(max-width:900px) {
  .wclGuitarTunerFloat.wclTunerHighPerformance {
    overflow: auto;
  }
  .wclTunerHighPerformance .wclTunerDial {
    height: 86px;
  }
  .wclTunerHighPerformance .wclTunerNote {
    font-size: 48px;
  }
  .wclTunerHighPerformance .wclVocalGraph {
    height: 64px;
  }
  .wclTunerHighPerformance .wclTunerInputRow {
    margin-bottom: 8px;
  }
}
.wclTunerRebuilt .wclTunerModeBar {
  margin-bottom: 10px;
}
.wclTunerRebuilt .wclTunerModeSelectWrap {
  position: relative;
  width: 100%;
  height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(15,23,42,.82);
  color: #f8fafc;
}
.wclTunerRebuilt .wclTunerModeSelectWrap > span {
  color: #94a3b8;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
}
.wclTunerRebuilt .wclTunerInstrumentSelect {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 18px 0 0;
  border: 0;
  outline: 0;
  border-radius: 8px;
  background: transparent;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}
.wclTunerRebuilt .wclTunerInstrumentSelect option {
  background: #0f172a;
  color: #f8fafc;
}
.wclTunerRebuilt .wclTunerSelectArrow {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  pointer-events: none;
}
.wclTunerHighPerformance .wclTunerInputRow {
  grid-template-columns: auto minmax(0,1fr) minmax(86px,auto);
}
.wclTunerHighPerformance .wclTunerInputMeter i {
  transition: width .045s linear;
}
.wclTunerHighPerformance .wclTunerInputRow b {
  text-align: right;
  color: #bfdbfe;
}
.wclTunerHighPerformance .wclTunerHz {
  color: #b6c6dc;
}
.wclTunerHighPerformance .wclTunerHint::after {
  content: "";
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerModeSelectWrap {
  background: #f8fafc;
  border-color: #dbe4f0;
  color: #0f172a;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerInstrumentSelect {
  color: #0f172a;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerInstrumentSelect option {
  background: #ffffff;
  color: #0f172a;
}
html[data-theme="light"] .wclTunerHighPerformance .wclTunerInputRow b {
  color: #1d4ed8;
}
@media(max-width:900px) {
  .wclTunerRebuilt .wclTunerModeSelectWrap {
    height: 32px;
    border-radius: 11px;
  }
  .wclTunerRebuilt .wclTunerInstrumentSelect {
    height: 28px;
    min-height: 28px;
  }
}
.wclGuitarTunerFloat.wclTunerHighPerformance {
  width: 520px !important;
  max-height: calc(100vh - 84px) !important;
  overflow: auto !important;
}
.wclTunerRebuilt .wclTunerProControls {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.wclTunerRebuilt .wclTunerProControls .wclTunerModeSelectWrap {
  margin: 0 !important;
  min-width: 0 !important;
}
.wclTunerRebuilt .wclTunerProControls .wclTunerModeSelectWrap[hidden] {
  display: none !important;
}
.wclTunerRebuilt .wclTunerA4Wrap {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 10px !important;
}
.wclTunerRebuilt .wclTunerA4Input {
  min-width: 0 !important;
  width: 100% !important;
  height: 30px !important;
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
  color: #f8fafc !important;
  font-weight: 900 !important;
  text-align: right !important;
  outline: none !important;
}
.wclTunerRebuilt .wclTunerSelectArrow.green {
  color: #22c55e !important;
  font-size: 10px !important;
}
.wclTunerHighPerformance .wclTunerConfidenceRow, .wclTunerHighPerformance .wclTunerInputRow {
  display: grid !important;
  grid-template-columns: 58px 1fr 96px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 5px 0 !important;
}
.wclTunerHighPerformance .wclTunerConfidenceRow span, .wclTunerHighPerformance .wclTunerInputRow span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wclTunerHighPerformance .wclTunerConfidenceMeter {
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.86);
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.16);
}
.wclTunerHighPerformance .wclTunerConfidenceMeter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);
  transition: width .12s linear;
}
.wclTunerHighPerformance .wclTunerConfidenceMeter i.locked {
  background: linear-gradient(90deg,#16a34a,#86efac);
  box-shadow: 0 0 12px rgba(34,197,94,.42);
}
.wclTunerHighPerformance .wclTunerConfidenceMeter i.weak {
  background: linear-gradient(90deg,#f59e0b,#fbbf24);
}
.wclTunerHighPerformance .wclTunerConfidenceRow b {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}
.wclTunerHighPerformance .wclTunerStrobe {
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 8px;
  margin: 2px 0 10px;
}
.wclTunerHighPerformance .wclTunerStrobe > span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wclTunerHighPerformance .wclTunerStrobeWindow {
  position: relative;
  height: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  border: 1px solid rgba(148,163,184,.16);
}
.wclTunerHighPerformance .wclTunerStrobeWindow b {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(134,239,172,.92);
  box-shadow: 0 0 12px rgba(34,197,94,.56);
}
.wclTunerHighPerformance .wclTunerStrobeWindow i {
  position: absolute;
  inset: 0 -36px;
  display: block;
  background: repeating-linear-gradient(90deg,rgba(147,197,253,.08) 0 8px,rgba(147,197,253,.72) 8px 10px,transparent 10px 18px);
  opacity: .46;
  will-change: transform,opacity;
}
html[data-theme="light"] .wclTunerRebuilt .wclTunerA4Input {
  color: #0f172a !important;
}
html[data-theme="light"] .wclTunerHighPerformance .wclTunerConfidenceMeter, html[data-theme="light"] .wclTunerHighPerformance .wclTunerStrobeWindow {
  background: #f8fafc;
  border-color: #dbe4f0;
}
html[data-theme="light"] .wclTunerHighPerformance .wclTunerConfidenceRow b {
  color: #334155;
}
@media(max-width:900px) {
  .wclGuitarTunerFloat.wclTunerHighPerformance {
    width: auto !important;
    max-height: calc(100svh - var(--navH,72px) - 22px - env(safe-area-inset-bottom)) !important;
  }
  .wclTunerRebuilt .wclTunerProControls {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .wclTunerRebuilt .wclTunerInstrumentSelect {
    font-size: 11px !important;
  }
  .wclTunerRebuilt .wclTunerA4Wrap {
    padding: 0 8px !important;
  }
  .wclTunerHighPerformance .wclTunerConfidenceRow, .wclTunerHighPerformance .wclTunerInputRow, .wclTunerHighPerformance .wclTunerStrobe {
    grid-template-columns: 50px 1fr 82px !important;
    gap: 6px !important;
  }
  .wclTunerHighPerformance .wclTunerStrobe {
    grid-template-columns: 50px 1fr !important;
  }
  .wclTunerHighPerformance .wclTunerStrobeWindow {
    height: 18px;
  }
}
body.wcl-no-song .controls, body.wcl-no-song .mobileFlowNav, body.wcl-no-song #flowMeta, body.wcl-no-song #songLookupBtn, body.wcl-no-song .sectionTabs {
  display: none !important;
}
body.wcl-no-song .topbar {
  min-height: 72px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
body.wcl-no-song #songTitle {
  font-size: clamp(22px,2.2vw,30px) !important;
}
body.wcl-no-song #songMeta {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.wcl-no-song .desktopYoutubeQuick, body.wcl-no-song .mobileYoutubeNav {
  display: none !important;
}
@media(max-width:900px) {
  body.wcl-no-song .topbar {
    min-height: 64px !important;
    padding: 10px 14px 8px !important;
  }
  body.wcl-no-song .songTitleLine {
    align-items: center !important;
  }
  body.wcl-no-song #songTitle {
    font-size: 23px !important;
  }
  body.wcl-no-song #songMeta {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  body.wcl-no-song .mobileBottomNav {
    grid-template-columns: repeat(7,1fr) !important;
  }
}
@media(max-width:900px) {
  .mobileBottomNav button[onclick*="teacher/index.html"] {
    display: none !important;
  }
}
.welcomeScreen.welcomeLaunchpad {
  max-width: 1120px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 48px 44px 80px !important;
  color: #0f172a !important;
}
.welcomeLaunchpad .welcomeHero {
  margin: 0 0 22px !important;
}
.welcomeKicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
}
.welcomeKicker .welcomeLogoMark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(124,58,237,.22);
}
.welcomeLaunchpad .welcomeHero h2 {
  margin: 0 0 14px !important;
  color: #101827 !important;
}
.welcomeLaunchpad .welcomeLead {
  max-width: 760px !important;
  margin: 0 !important;
  color: #465569 !important;
  font-size: clamp(16px,2.15vw,20px) !important;
  line-height: 1.55 !important;
}
.welcomeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.welcomeActions button, .welcomeFeatureCard {
  height: auto !important;
  min-height: 0 !important;
  white-space: normal !important;
  cursor: pointer;
}
.welcomePrimaryAction, .welcomeSecondaryAction, .welcomeGhostAction {
  padding: 13px 18px !important;
  border-radius: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.12) !important;
}
.welcomePrimaryAction {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
}
.welcomeFeatureGrid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin: 28px 0 24px;
}
.welcomeFeatureCard {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 8px;
  border-radius: 20px !important;
  background: linear-gradient(145deg,#111827,#0b1220) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.18) !important;
  text-align: left !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.welcomeFeatureCard:hover, .welcomeFeatureCard:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.welcomeFeatureIcon {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,rgba(124,58,237,.9),rgba(37,99,235,.9));
}
.welcomeFeatureCard strong {
  letter-spacing: -.02em;
}
.welcomeFeatureCard small {
  color: #cbd5e1;
  font-weight: 650;
}
.welcomeLaunchpad .welcomeCard {
  max-width: none !important;
  padding: 24px !important;
  border-radius: 22px !important;
  margin: 0 0 18px !important;
  background: linear-gradient(145deg,#111827,#0b1220) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.16) !important;
}
.welcomeLaunchpad .welcomeCard h3 {
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 22px;
  letter-spacing: -.025em;
}
.welcomeLaunchpad .welcomeCard p {
  color: #e5e7eb !important;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
}
.welcomeVerse {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 4px solid #f6c768;
  border-radius: 14px;
  background: rgba(246,199,104,.10);
  color: #fff7ed;
  line-height: 1.55;
  font-weight: 750;
}
.welcomeVerse cite {
  display: block;
  margin-top: 6px;
  color: #f6c768;
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.compactFaqIntro details {
  border-top: 1px solid rgba(148,163,184,.18);
  padding: 11px 0;
}
.compactFaqIntro details:first-of-type {
  border-top: none;
}
.compactFaqIntro summary {
  cursor: pointer;
  color: #f8fafc;
  font-weight: 900;
  list-style: none;
}
.compactFaqIntro summary::-webkit-details-marker {
  display: none;
}
.compactFaqIntro summary::after {
  content: "+";
  float: right;
  color: #f6c768;
}
.compactFaqIntro details[open] summary::after {
  content: "–";
}
.compactFaqIntro p {
  margin: 8px 0 0 !important;
  font-size: 14px;
}
.compactFaqIntro a {
  color: #bfdbfe;
  font-weight: 900;
}
.welcomeSupportStrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 22px;
  background: #fff7ed;
  border: 1px solid rgba(251,146,60,.28);
  color: #111827;
}
.welcomeSupportStrip strong {
  display: block;
  font-size: 17px;
  margin-bottom: 3px;
}
.welcomeSupportStrip span {
  color: #64748b;
  line-height: 1.4;
}
.welcomeSupportStrip .donateBtn {
  margin: 0 !important;
  white-space: nowrap;
}
html[data-theme="light"] .welcomeKicker {
  background: #eef2ff !important;
  color: #334155 !important;
}
html[data-theme="light"] .welcomeLaunchpad .welcomeCard, html[data-theme="light"] .welcomeFeatureCard {
  background: linear-gradient(145deg,#ffffff,#f8fafc) !important;
  color: #111827 !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 14px 32px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] .welcomeLaunchpad .welcomeCard h3, html[data-theme="light"] .welcomeFeatureCard strong, html[data-theme="light"] .compactFaqIntro summary {
  color: #111827 !important;
}
html[data-theme="light"] .welcomeLaunchpad .welcomeCard p, html[data-theme="light"] .welcomeFeatureCard small {
  color: #475569 !important;
}
html[data-theme="light"] .welcomeVerse {
  background: #fff7ed !important;
  color: #7c2d12 !important;
}
@media(max-width:900px) {
  .welcomeKicker {
    margin-bottom: 12px;
    padding: 6px 10px 6px 7px;
    font-size: 12px;
  }
  .welcomeKicker .welcomeLogoMark {
    width: 36px;
    height: 36px;
  }
  .welcomeActions {
    display: grid;
  }
  .welcomePrimaryAction, .welcomeSecondaryAction, .welcomeGhostAction {
    padding: 13px 16px !important;
  }
  .welcomeFeatureGrid {
    grid-template-columns: 1fr 1fr;
    margin: 20px 0 18px;
  }
  .welcomeLaunchpad .welcomeCard {
    padding: 18px !important;
    border-radius: 20px !important;
  }
  .welcomeLaunchpad .welcomeCard h3 {
    font-size: 19px;
  }
  .welcomeLaunchpad .welcomeCard p {
    font-size: 14px;
    line-height: 1.6 !important;
  }
  .welcomeSupportStrip {
    display: block;
    padding: 16px;
    border-radius: 20px;
  }
  .welcomeSupportStrip .donateBtn {
    display: flex !important;
    justify-content: center;
    margin-top: 14px !important;
    width: 100%;
  }
}
@media(max-width:380px) {
  .welcomeFeatureGrid {
    grid-template-columns: 1fr;
  }
  body.wcl-no-song .mobileBottomNav {
    grid-template-columns: repeat(4,1fr) !important;
    height: auto !important;
    min-height: 64px !important;
  }
}
.welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
  display: grid !important;
  align-items: center !important;
}
.welcomeHeroLogoWrap {
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  padding: 17px !important;
  border-radius: 8px !important;
  background: radial-gradient(circle at 50% 46%, rgba(15,23,42,.14), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,199,104,.16)) !important;
  box-shadow: 0 18px 46px rgba(15,23,42,.08) !important;
}
.welcomeHeroLogo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  filter: drop-shadow(0 12px 22px rgba(15,23,42,.18)) !important;
}
.welcomeKicker {
  display: none !important;
}
.welcomePrimaryAction {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: #fff !important;
}
.welcomeSecondaryAction {
  background: #111827 !important;
  color: #fff !important;
}
.welcomeGhostAction {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border: 1px solid rgba(251,146,60,.34) !important;
}
.welcomeFeatureIcon {
  background: linear-gradient(135deg,#f6c768,#d9ab63) !important;
  color: #111827 !important;
  box-shadow: 0 10px 24px rgba(217,171,99,.20) !important;
}
.welcomeFeatureCard:hover, .welcomeFeatureCard:focus-visible {
  border-color: rgba(217,171,99,.70) !important;
  box-shadow: 0 22px 50px rgba(15,23,42,.22) !important;
}
.welcomeSupportStrip .donateBtn {
  background: linear-gradient(135deg,#111827,#263244) !important;
  color: #fff !important;
}
body.wcl-no-song .mobileBottomNav button.active {
  color: #f6c768 !important;
  background: rgba(246,199,104,.13) !important;
}
html[data-theme="light"] .welcomeHeroLogoWrap {
  background: radial-gradient(circle at 50% 46%, rgba(15,23,42,.12), transparent 48%),
    linear-gradient(135deg, #fffdf7, rgba(246,199,104,.20)) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.07) !important;
}
html[data-theme="light"] .welcomeFeatureIcon {
  background: linear-gradient(135deg,#f6c768,#d9ab63) !important;
  color: #111827 !important;
}
@media(max-width:900px) {
  .welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
    align-items: start !important;
  }
  .welcomeHeroLogoWrap {
    border-radius: 8px !important;
  }
  .welcomeActions {
    grid-column: 1 / -1 !important;
  }
}
@media(max-width:420px) {
  .welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
    grid-template-columns: minmax(0,1fr) 72px !important;
    gap: 10px !important;
  }
}
.welcomeScreen.welcomeLaunchpad {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(148,163,184,.32) rgba(255,253,247,.18) !important;
}
.welcomeScreen.welcomeLaunchpad::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
.welcomeScreen.welcomeLaunchpad::-webkit-scrollbar-track {
  background: rgba(255,253,247,.22) !important;
  border-radius: 999px !important;
}
.welcomeScreen.welcomeLaunchpad::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.28) !important;
  border: 3px solid #fffdf7 !important;
  border-radius: 999px !important;
}
.welcomeScreen.welcomeLaunchpad::-webkit-scrollbar-thumb:hover {
  background: rgba(100,116,139,.38) !important;
}
.welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin: 0 0 26px !important;
}
.welcomeHeroCopy {
  width: 100% !important;
  min-width: 0 !important;
}
.welcomeHeroCopy::after {
  content: "";
  display: block;
  clear: both;
}
.welcomeHeroLogoWrap {
  position: static !important;
  justify-self: auto !important;
}
.welcomeActions {
  clear: both !important;
}
html[data-theme="light"] .welcomeScreen.welcomeLaunchpad::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.30) !important;
  border-color: #fffdf7 !important;
}
@media(max-width:900px) {
  .welcomeScreen.welcomeLaunchpad {
    padding: 22px 15px 108px !important;
  }
  .welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
  }
  .welcomeHeroLogoWrap {
    position: static !important;
  }
  .welcomeLaunchpad .welcomeHero h2 {
    max-width: none !important;
  }
  .welcomeLaunchpad .welcomeLead {
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }
  .welcomeActions {
    clear: both !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }
  .welcomePrimaryAction, .welcomeSecondaryAction, .welcomeGhostAction {
    width: 100% !important;
    min-height: 48px !important;
    color: #1f2937 !important;
    background: rgba(124,58,237,.075) !important;
    border: 1px solid rgba(124,58,237,.16) !important;
    box-shadow: 0 8px 22px rgba(124,58,237,.055) !important;
  }
  .welcomePrimaryAction:hover, .welcomeSecondaryAction:hover, .welcomeGhostAction:hover, .welcomePrimaryAction:focus-visible, .welcomeSecondaryAction:focus-visible, .welcomeGhostAction:focus-visible {
    background: rgba(124,58,237,.12) !important;
    border-color: rgba(124,58,237,.26) !important;
  }
}
.welcomeLaunchpad .welcomeHero h2 {
  white-space: nowrap !important;
  font-size: clamp(32px,4.6vw,54px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  max-width: 100% !important;
}
.welcomeLaunchpad .welcomeHero h2 .liteBadge.light {
  white-space: nowrap !important;
  display: inline-flex !important;
  vertical-align: middle !important;
  transform: translateY(-2px) !important;
}
.welcomeHeroCopy {
  position: relative !important;
}
.welcomeHeroLogoWrap {
  float: right !important;
  width: clamp(118px,14vw,168px) !important;
  margin: 2px 0 16px 26px !important;
}
.welcomeFeatureCard {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 3px !important;
  min-height: 116px !important;
  padding: 16px 18px !important;
}
.welcomeFeatureIcon {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
}
.welcomeFeatureCard strong {
  grid-column: 2 !important;
  align-self: end !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
  margin: 0 !important;
}
.welcomeFeatureCard small {
  grid-column: 2 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
@media(max-width:900px) {
  .welcomeLaunchpad .welcomeHero h2 {
    font-size: clamp(23px,6.35vw,27px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
    margin-bottom: 10px !important;
  }
  .welcomeLaunchpad .welcomeHero h2 .liteBadge.light {
    font-size: .42em !important;
    padding: 3px 7px !important;
    border-radius: 7px !important;
    transform: translateY(-2px) !important;
  }
  .welcomeHeroLogoWrap {
    float: right !important;
    width: 78px !important;
    margin: 0 0 8px 11px !important;
    padding: 8px !important;
  }
  .welcomeFeatureGrid {
    gap: 10px !important;
  }
  .welcomeFeatureCard {
    grid-template-columns: 34px minmax(0,1fr) !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    min-height: 104px !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }
  .welcomeFeatureIcon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 11px !important;
    font-size: 15px !important;
  }
  .welcomeFeatureCard strong {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
  }
  .welcomeFeatureCard small {
    font-size: 11.5px !important;
    line-height: 1.32 !important;
  }
}
@media(max-width:420px) {
  .welcomeLaunchpad .welcomeHero h2 {
    font-size: clamp(22px,6.2vw,24px) !important;
  }
  .welcomeHeroLogoWrap {
    width: 70px !important;
    margin-left: 10px !important;
    padding: 7px !important;
  }
  .welcomeFeatureCard {
    min-height: 100px !important;
    padding: 12px !important;
  }
}
@media(max-width:360px) {
  .welcomeLaunchpad .welcomeHero h2 {
    font-size: 21px !important;
    letter-spacing: -.05em !important;
  }
}
.welcomeLaunchpad .welcomeActions {
  clear: none !important;
  margin-top: 22px !important;
}
@media(min-width:901px) {
  .welcomeLaunchpad .welcomeHero.welcomeHeroWithLogo {
    margin-bottom: 22px !important;
  }
  .welcomeHeroLogoWrap {
    margin-bottom: 12px !important;
  }
}
@media(max-width:900px) {
  .welcomeLaunchpad .welcomeActions {
    clear: none !important;
    margin-top: 16px !important;
  }
}
.searchWrap {
  position: relative;
  margin: 0 14px 12px;
  padding: 0 !important;
}
.searchWrap .search {
  width: 100%;
  margin: 0;
  padding-right: 42px;
}
.clearSearchBtn {
  position: absolute;
  display: flex;
  background: rgba(148,163,184,.14);
  font-weight: 900;
  transform: translateY(-50%) scale(.92);
  transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.searchWrap.hasValue .clearSearchBtn {
  transform: translateY(-50%) scale(1);
}
.clearSearchBtn:hover, .clearSearchBtn:focus-visible {
  background: rgba(148,163,184,.24);
  color: #fff;
}
html[data-theme="light"] .clearSearchBtn {
  background: rgba(15,23,42,.08);
  color: #475569;
}
html[data-theme="light"] .clearSearchBtn:hover, html[data-theme="light"] .clearSearchBtn:focus-visible {
  background: rgba(15,23,42,.14);
  color: #0f172a;
}
.clearSearchBtn {
  top: 50% !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  background: rgba(148,163,184,.08) !important;
  border: 1px solid rgba(148,163,184,.10) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  transform: translateY(-50%) scale(.92) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
.searchWrap.hasValue .clearSearchBtn {
  opacity: .74 !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scale(1) !important;
}
.clearSearchBtn::before, .clearSearchBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(226,232,240,.72);
  transform-origin: center;
}
.clearSearchBtn::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.clearSearchBtn::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.clearSearchBtn:hover, .clearSearchBtn:focus-visible {
  background: rgba(148,163,184,.14) !important;
  border-color: rgba(148,163,184,.18) !important;
  opacity: 1 !important;
  outline: none !important;
}
.clearSearchBtn:hover::before, .clearSearchBtn:hover::after, .clearSearchBtn:focus-visible::before, .clearSearchBtn:focus-visible::after {
  background: rgba(255,255,255,.92);
}
html[data-theme="light"] .clearSearchBtn {
  background: rgba(15,23,42,.045) !important;
  border-color: rgba(15,23,42,.06) !important;
}
html[data-theme="light"] .clearSearchBtn::before, html[data-theme="light"] .clearSearchBtn::after {
  background: rgba(15,23,42,.50);
}
html[data-theme="light"] .clearSearchBtn:hover, html[data-theme="light"] .clearSearchBtn:focus-visible {
  background: rgba(15,23,42,.09) !important;
  border-color: rgba(15,23,42,.12) !important;
}
html[data-theme="light"] .clearSearchBtn:hover::before, html[data-theme="light"] .clearSearchBtn:hover::after, html[data-theme="light"] .clearSearchBtn:focus-visible::before, html[data-theme="light"] .clearSearchBtn:focus-visible::after {
  background: rgba(15,23,42,.72);
}
.wclYoutubeTransposeQuick {
  background: linear-gradient(135deg,rgba(124,58,237,.95),rgba(37,99,235,.92)) !important;
  color: #fff !important;
}
.wclYoutubePlayer {
  width: min(402px,calc(100vw - 28px));
}
.wclYoutubeTransposePanel {
  margin: 0 8px 8px;
  padding: 10px;
  border-radius: 17px;
  color: #f8fafc;
  background: linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.68));
  border: 1px solid rgba(148,163,184,.16);
}
.wclYoutubeTransposeHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 9px;
}
.wclYoutubeTransposeHead strong {
  display: block;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.wclYoutubeTransposeHead small {
  display: block;
  margin-top: 3px;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.35;
}
.wclYoutubeTransposeStatus {
  flex: 0 0 auto;
  min-width: 74px;
  padding: 6px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  background: rgba(148,163,184,.14);
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,.16);
}
.wclYoutubeTransposeStatus[data-state="running"] {
  color: #dcfce7;
  background: rgba(22,163,74,.20);
  border-color: rgba(34,197,94,.34);
}
.wclYoutubeTransposeStatus[data-state="starting"] {
  color: #fef9c3;
  background: rgba(234,179,8,.18);
  border-color: rgba(234,179,8,.28);
}
.wclYoutubeTransposeStatus[data-state="warn"], .wclYoutubeTransposeStatus[data-state="error"] {
  color: #fee2e2;
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.30);
}
.wclYoutubeTransposeKeys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 7px;
}
.wclYoutubeTransposeKeys label {
  display: block;
  min-width: 0;
}
.wclYoutubeTransposeKeys span {
  display: block;
  color: #a5b4fc;
  font-size: 10.5px;
  font-weight: 900;
  margin-bottom: 4px;
}
.wclYoutubeTransposeKeys select {
  width: 100%;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  background: rgba(15,23,42,.96) !important;
  color: #f8fafc !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}
.wclYoutubeTransposeKeyActions {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 7px;
  margin-bottom: 7px;
}
.wclYoutubeTransposeKeyActions button, .wclYoutubeTransposePresets button, .wclYoutubeTransposeActions button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  background: rgba(30,41,59,.92) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}
.wclYoutubeTransposeKeyActions .primary, .wclYoutubeTransposeActions .primary {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
}
.wclYoutubeTransposeKeyResult {
  margin: 0 0 9px;
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(6,78,59,.24);
  color: #a7f3d0;
  font-size: 11.5px;
  font-weight: 900;
  text-align: center;
}
.wclYoutubeTransposePresets {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.wclYoutubeTransposePresets button.activeTransposePreset {
  background: linear-gradient(135deg,#16a34a,#15803d) !important;
  color: white !important;
}
.wclYoutubeTransposeSlider {
  display: block;
  margin: 0;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
}
.wclYoutubeTransposeSlider span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
#wclYoutubeTransposeValue {
  color: #93c5fd;
  font-size: 13px;
}
.wclYoutubeTransposeSlider input[type="range"] {
  width: 100%;
  accent-color: #16a34a;
}
.wclYoutubeTransposeActions {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}
.wclYoutubeTransposeNote {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 10.5px;
  line-height: 1.3;
}
html[data-theme="light"] .wclYoutubeTransposePanel {
  background: rgba(255,255,255,.94);
  color: #0f172a;
  border-color: rgba(15,23,42,.12);
}
html[data-theme="light"] .wclYoutubeTransposeHead small, html[data-theme="light"] .wclYoutubeTransposeSlider, html[data-theme="light"] .wclYoutubeTransposeNote {
  color: #475569;
}
html[data-theme="light"] .wclYoutubeTransposeKeys span {
  color: #4f46e5;
}
html[data-theme="light"] .wclYoutubeTransposeKeys select, html[data-theme="light"] .wclYoutubeTransposePresets button, html[data-theme="light"] .wclYoutubeTransposeActions button, html[data-theme="light"] .wclYoutubeTransposeKeyActions button {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.10) !important;
}
html[data-theme="light"] .wclYoutubeTransposeKeyActions .primary, html[data-theme="light"] .wclYoutubeTransposeActions .primary {
  color: #fff !important;
}
@media(max-width:900px) {
  .wclYoutubePlayer {
    width: min(352px,calc(100vw - 20px));
  }
  .wclYoutubeTransposePanel {
    padding: 9px;
  }
  .wclYoutubeTransposePresets {
    gap: 5px;
  }
  .wclYoutubeTransposeKeyActions button, .wclYoutubeTransposePresets button, .wclYoutubeTransposeActions button {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
    padding: 0 7px !important;
  }
}
.wclYoutubeTransposeToggle {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
}
.wclYoutubeTransposeTitleBlock {
  min-width: 0;
  flex: 1 1 auto;
}
.wclYoutubeTransposeHeadRight {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wclYoutubeTransposeChevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #c4b5fd;
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(148,163,184,.16);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.wclYoutubeTransposeBody {
  display: block;
}
.wclYoutubeTransposePanel.isCollapsed {
  padding-bottom: 10px;
}
.wclYoutubeTransposePanel.isCollapsed .wclYoutubeTransposeHead {
  margin-bottom: 0;
}
.wclYoutubeTransposePanel.isCollapsed .wclYoutubeTransposeBody {
  display: none;
}
.wclYoutubeTransposePanel.isCollapsed .wclYoutubeTransposeChevron {
  color: #a7f3d0;
  background: rgba(22,163,74,.12);
}
.wclYoutubeTransposeMobileNotice {
  margin: 8px 0 0;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(234,179,8,.13);
  border: 1px solid rgba(234,179,8,.22);
  color: #fef3c7;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
}
.wclYoutubeTransposePanel.isMobileUnsupported .wclYoutubeTransposeMobileNotice {
  display: block !important;
}
.wclYoutubeTransposePanel.isMobileUnsupported #wclYoutubeTransposeStartBtn, #wclYoutubeTransposeStartBtn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: saturate(.55) !important;
}
@media(max-width:900px) {
  .wclYoutubeTransposeHead small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wclYoutubeTransposePanel.isCollapsed .wclYoutubeTransposeHead small {
    -webkit-line-clamp: 1;
  }
  .wclYoutubeTransposeStatus {
    min-width: 66px;
    padding: 5px 7px;
    font-size: 10px;
  }
  .wclYoutubeTransposeChevron {
    width: 22px;
    height: 22px;
    font-size: 15px;
  }
}
#wclYoutubeTransposeStartBtn {
  min-height: 38px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.26) !important;
  box-shadow: 0 10px 24px rgba(37,99,235,.20) !important;
}
#wclYoutubeTransposeStopBtn {
  min-height: 38px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  background: rgba(127,29,29,.72) !important;
  border: 1px solid rgba(248,113,113,.28) !important;
  color: #fee2e2 !important;
}
#wclYoutubeTransposeStopBtn:hover {
  background: rgba(185,28,28,.86) !important;
}
.wclYoutubeTransposeActions {
  grid-template-columns: minmax(0,1fr) 88px;
}
html[data-theme="light"] #wclYoutubeTransposeStopBtn {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}
@media(max-width:900px) {
  #wclYoutubeTransposeStartBtn, #wclYoutubeTransposeStopBtn {
    min-height: 36px !important;
  }
}
.wclExtensionGuideBtn, .wclExtensionGuideInline {
  background: linear-gradient(135deg,#7c3aed,#2563eb) !important;
  color: #fff !important;
}
.wclExtensionGuideInline {
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin-top: 8px !important;
  border-radius: 11px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
.wclExtensionModal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2,6,23,.66);
  backdrop-filter: blur(14px);
}
.wclExtensionModal.isHidden {
  display: none !important;
}
.wclExtensionCard {
  width: min(520px,100%);
  max-height: min(720px,calc(100svh - 36px));
  overflow: auto;
  padding: 20px;
  border-radius: 22px;
  color: #f8fafc;
  background: radial-gradient(circle at 0% 0%,rgba(124,58,237,.22),transparent 34%),linear-gradient(180deg,#111827,#07111f);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.52);
}
.wclExtensionHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.wclExtensionHeader small {
  display: block;
  margin-bottom: 5px;
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wclExtensionHeader h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.wclExtensionClose {
  flex: 0 0 auto;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(148,163,184,.13) !important;
  color: #f8fafc !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.wclExtensionIntro, .wclExtensionFootnote {
  margin: 0 0 14px;
  color: #cbd5e1;
  font-size: 13.5px;
  line-height: 1.5;
}
.wclExtensionDownload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  margin: 12px 0 16px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  background: linear-gradient(135deg,#16a34a,#2563eb);
  box-shadow: 0 14px 30px rgba(37,99,235,.22);
}
.wclExtensionSteps {
  margin: 0 0 14px;
  padding-left: 22px;
  color: #e5e7eb;
  font-size: 13.5px;
  line-height: 1.55;
}
.wclExtensionSteps li {
  margin-bottom: 7px;
}
.wclExtensionFootnote {
  margin-top: 12px;
  margin-bottom: 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #fef3c7;
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.22);
  font-weight: 800;
}
html[data-theme="light"] .wclExtensionCard {
  color: #0f172a;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  border-color: rgba(15,23,42,.12);
}
html[data-theme="light"] .wclExtensionIntro, html[data-theme="light"] .wclExtensionSteps {
  color: #334155;
}
html[data-theme="light"] .wclExtensionClose {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}
html[data-theme="light"] .wclExtensionFootnote {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}
html.is-mobile-device .wclYoutubeTransposePanel, body.is-mobile-device .wclYoutubeTransposePanel, .wclYoutubeTransposePanel.isMobileHidden {
  display: none !important;
}
@media(max-width:900px) {
  .wclYoutubeTransposePanel {
    display: none !important;
  }
  .wclExtensionCard {
    padding: 18px;
    border-radius: 20px;
  }
  .wclExtensionHeader h2 {
    font-size: 21px;
  }
}
body.wclTourActive .wclYoutubePlayer {
  z-index: 2147482500 !important;
}
body.wclTourActive .wclYoutubePlayer.wclYoutubeTourPreview {
  width: min(360px,calc(100vw - 28px)) !important;
  pointer-events: none !important;
}
.wclYoutubeGuidePreview {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  text-align: center;
  color: #e5e7eb;
  background: radial-gradient(circle at 50% 0%,rgba(239,68,68,.18),transparent 40%),linear-gradient(180deg,#111827,#020617);
}
.wclYoutubeGuidePreview strong {
  display: block;
  color: #f8fafc;
  font-size: 15px;
}
.wclYoutubeGuidePreview span {
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
  max-width: 260px;
}
body.wclTourActive [id*="tour" i], body.wclTourActive [class*="tour" i], body.wclTourActive [id*="walk" i], body.wclTourActive [class*="walk" i], body.wclTourActive [id*="guide" i], body.wclTourActive [class*="guide" i] {
  z-index: 2147483600 !important;
}
body.wclTourActive iframe {
  pointer-events: none !important;
}
.wclExtensionModal {
  z-index: 2147483600 !important;
}
@media(max-width:900px) {
  body.wclTourActive .wclYoutubePlayer {
    display: none !important;
  }
}
@media(max-width:900px) {
  body.wclTourActive .wclTourRoot, body.wclTourActive .wclTourCard, body.wclTourActive .wclTourSpotlight, body.wclTourActive .wclTourShade {
    z-index: 2147483000 !important;
  }
  body.wclTourActive .wclTourCard {
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
  body.wcl-no-song.is-mobile-device .topbar, body.wcl-no-song.mobile-view-home .topbar, body.wcl-no-song .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 64px !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 14px 8px !important;
    overflow: visible !important;
    transform: none !important;
  }
  body.wcl-no-song.is-mobile-device .main, body.wcl-no-song.mobile-view-home .main {
    height: 100svh !important;
    overflow: hidden !important;
  }
  body.wcl-no-song.is-mobile-device .contentArea, body.wcl-no-song.mobile-view-home .contentArea {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  body.wcl-no-song.is-mobile-device .chart, body.wcl-no-song.mobile-view-home .chart {
    height: 100% !important;
    overflow-y: auto !important;
  }
  body.wcl-no-song #chartOutput {
    display: none !important;
  }
  body.wcl-no-song #welcomeScreen {
    display: block !important;
  }
  body.wclTourActive .wclYoutubePlayer.wclYoutubeTourPreview {
    right: 10px !important;
    left: auto !important;
    top: 76px !important;
    width: min(260px, calc(100vw - 20px)) !important;
    max-height: 210px !important;
    transform: none !important;
    z-index: 2147482500 !important;
  }
  body.wclTourActive .wclYoutubePlayer.wclYoutubeTourPreview iframe, body.wclTourActive .wclYoutubePlayer.wclYoutubeTourPreview .wclYoutubeFrameWrap {
    min-height: 120px !important;
    height: 120px !important;
  }
  body.wclTourActive .wclYoutubePlayer.wclYoutubeTourPreview .wclYoutubeHeader {
    min-height: 34px !important;
    padding: 6px 8px !important;
  }
}
.wclLikeWidget {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 85000;
}
.wclLikeHiddenPlacement {
  display: none !important;
}
.wclLikeDesktopPlacement {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  height: 32px;
  margin: 0 0 0 -2px;
}
.wclLikeBtn {
  pointer-events: auto;
  position: relative;
  width: 42px;
  height: 32px;
  min-width: 42px;
  min-height: 32px;
  padding: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101d2b;
  color: #fda4af;
  box-shadow: none;
  border: 1px solid rgba(248,113,113,.24);
  overflow: visible;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.wclLikeBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28),
    0 0 0 4px rgba(244,63,94,.10);
}
.wclLikeBtn:focus-visible {
  outline: 3px solid rgba(244,63,94,.38);
  outline-offset: 3px;
}
.wclLikeBtn.liked {
  background: linear-gradient(135deg,#be123c,#7f1d1d);
  color: white;
  border-color: rgba(255,255,255,.20);
}
.wclLikeHeart {
  font-size: 21px;
  line-height: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.25));
}
.wclLikeCount {
  position: absolute;
  right: -6px;
  bottom: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #facc15;
  color: #111827;
  border: 2px solid #07101d;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.03em;
  box-shadow: 0 7px 16px rgba(0,0,0,.28);
}
.wclLikeMessage {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  width: max-content;
  max-width: 190px;
  padding: 9px 11px;
  border-radius: 13px;
  background: rgba(8,13,22,.97);
  color: #f8fafc;
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 16px 35px rgba(0,0,0,.34);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.wclLikeMessage.show {
  opacity: 1;
  transform: translateY(0);
}
.wclLikePop {
  animation: wclLikePop .38s ease both;
}
@keyframes wclLikePop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}
body.performance .wclLikeWidget, body.wclPerformance .wclLikeWidget {
  display: none !important;
}
html[data-theme="light"] .wclLikeBtn {
  background: #fff7ed;
  color: #e11d48;
  border-color: rgba(225,29,72,.20);
}
html[data-theme="light"] .wclLikeBtn.liked {
  background: linear-gradient(145deg,#f43f5e,#be123c);
  color: white;
}
html[data-theme="light"] .wclLikeCount {
  border-color: #fff7ed;
}
html[data-theme="light"] .wclLikeMessage {
  background: rgba(255,255,255,.97);
  color: #111827;
  border-color: rgba(15,23,42,.12);
}
@media(min-width:901px) {
  .desktopQuickTools .wclLikeWidget {
    order: 0;
  }
}
@media(max-width:900px) {
  .wclLikeMobileWelcomePlacement {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    z-index: 30;
  }
  .wclLikeMobileWelcomePlacement .wclLikeBtn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 17px;
    background: linear-gradient(145deg,#111827,#07101d);
    box-shadow: 0 12px 30px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.10);
  }
  .wclLikeMobileWelcomePlacement .wclLikeHeart {
    font-size: 27px;
  }
  .wclLikeMobileWelcomePlacement .wclLikeCount {
    right: -5px;
    bottom: -5px;
    min-width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .wclLikeMobileWelcomePlacement .wclLikeMessage {
    top: calc(100% + 7px);
    right: 0;
    max-width: 170px;
    font-size: 11px;
  }
  body:not(.wcl-no-song) .wclLikeWidget {
    display: none !important;
  }
}
.desktopQuickTools .wclLikeWidget button.wclLikeBtn {
  width: 42px !important;
  height: 32px !important;
  min-width: 42px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #101d2b !important;
  color: #fda4af !important;
  border: 1px solid rgba(248,113,113,.24) !important;
  box-shadow: none !important;
}
.desktopQuickTools .wclLikeWidget button.wclLikeBtn.liked {
  background: linear-gradient(135deg,#be123c,#7f1d1d) !important;
  color: white !important;
}
.desktopQuickTools .wclLikeWidget button.wclLikeBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 0 4px rgba(244,63,94,.10) !important;
}
html[data-theme="light"] .desktopQuickTools .wclLikeWidget button.wclLikeBtn {
  background: #fff7ed !important;
  color: #e11d48 !important;
  border-color: rgba(225,29,72,.20) !important;
}
html[data-theme="light"] .desktopQuickTools .wclLikeWidget button.wclLikeBtn.liked {
  background: linear-gradient(145deg,#f43f5e,#be123c) !important;
  color: white !important;
}
:root {
  --wcl-chart-font: Consolas, "Courier New", monospace;
  --wcl-chart-letter-spacing: normal;
  --wcl-chart-text-colour: var(--wcl-sheet-ink);
}
.chartOutput, .sectionContent, .chartOutput pre {
  font-family: var(--wcl-chart-font) !important;
  letter-spacing: var(--wcl-chart-letter-spacing) !important;
  font-variant-ligatures: none !important;
  font-kerning: none !important;
  tab-size: 4;
}
body.wcl-chart-font-mono {
  --wcl-chart-font: Consolas, "Courier New", monospace;
  --wcl-chart-letter-spacing: normal;
}
body.wcl-chart-font-sans {
  --wcl-chart-font: "Cascadia Mono", "Aptos Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --wcl-chart-letter-spacing: normal;
}
body.wcl-chart-font-serif {
  --wcl-chart-font: "Courier Prime", "Courier New", Courier, monospace;
  --wcl-chart-letter-spacing: normal;
}
body.wcl-chart-font-rounded {
  --wcl-chart-font: "Roboto Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", monospace;
  --wcl-chart-letter-spacing: normal;
}
body.wcl-chart-font-wide {
  --wcl-chart-font: "Lucida Console", Monaco, "Cascadia Mono", Consolas, "Courier New", monospace;
  --wcl-chart-letter-spacing: .01em;
}
body.wcl-chart-bold .sectionContent, body.wcl-chart-bold .chartOutput pre {
  font-weight: 800 !important;
}
body.wcl-lyric-only .chord {
  display: none !important;
}
body.wcl-lyric-only .sectionContent {
  white-space: pre-wrap;
}
.lyricOnlyBtn.activeBtn, .chartBoldBtn.activeBtn, #desktopLyricOnlyBtn.activeBtn, #desktopChartBoldBtn.activeBtn, #mobileToolsLyricOnlyBtn.activeBtn, #mobileToolsChartBoldBtn.activeBtn {
  background: #16a34a !important;
  color: #fff !important;
}
.chartBoldBtn {
  font-weight: 950 !important;
  font-size: 18px !important;
}
.chartFontSelect {
  min-width: 86px;
}
@media(max-width:900px) {
  .controls .lyricOnlyBtn, .controls .chartBoldBtn, .controls .chartFontSelect {
    display: inline-flex !important;
  }
  .controls .chartFontSelect {
    min-width: 0 !important;
    font-size: 12px !important;
  }
  body.wcl-chart-font-sans .sectionContent, body.wcl-chart-font-serif .sectionContent, body.wcl-chart-font-rounded .sectionContent {
    letter-spacing: normal !important;
  }
  body.wcl-chart-font-wide .sectionContent {
    letter-spacing: .01em !important;
  }
}
.chart {
  position: relative;
}
.wclChartReadabilityDock {
  position: sticky;
  display: flex;
}
body.wcl-no-song .wclChartReadabilityDock {
  display: none !important;
}
.wclChartToolsToggle {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,253,247,.86) !important;
  color: #172033 !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  box-shadow: 0 10px 28px rgba(17,24,39,.12), 0 1px 1px rgba(17,24,39,.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.wclChartToolsToggle:hover, .wclChartReadabilityDock.open .wclChartToolsToggle {
  transform: translateY(-1px);
  background: #fffaf0 !important;
  border-color: rgba(79,70,229,.28) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.16) !important;
}
.wclChartToolsToggle.active:not(.open) {
  color: #4f46e5 !important;
  border-color: rgba(79,70,229,.30) !important;
}
.wclChartToolsIcon {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.055em;
  transform: translateX(-1px);
}
.wclChartToolsPanel {
  width: 0;
  max-width: min(248px,calc(100vw - 72px));
  opacity: 0;
  transform: translateX(8px) scale(.985);
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,253,247,.92);
  color: #172033;
  border: 1px solid rgba(17,24,39,.10);
  backdrop-filter: blur(18px) saturate(1.05);
  box-shadow: 0 18px 48px rgba(17,24,39,.18), 0 1px 1px rgba(17,24,39,.05);
  padding: 0;
  transition: width .20s ease, opacity .16s ease, transform .20s ease, padding .20s ease;
}
.wclChartReadabilityDock.open .wclChartToolsPanel {
  opacity: 1;
  transform: translateX(0) scale(1);
  padding: 9px;
}
.wclChartToolsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 7px;
  margin: 0;
}
.wclChartToolsHead strong {
  display: block;
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wclChartToolsHead small {
  display: none;
}
.wclChartToolsClose {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #64748b !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}
.wclChartToolsClose:hover {
  background: rgba(15,23,42,.06) !important;
  color: #0f172a !important;
}
.wclChartToolsActions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 0 0 6px;
}
.wclChartOptionBtn {
  position: relative;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 48px 0 10px !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #172033 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.wclChartOptionBtn:hover {
  background: rgba(15,23,42,.045) !important;
}
.wclChartOptionBtn span {
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}
.wclChartOptionBtn small {
  display: none;
}
.wclChartOptionBtn::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background: rgba(15,23,42,.14);
  box-shadow: inset 0 0 0 1px rgba(15,23,42,.07);
  transform: translateY(-50%);
  transition: background .16s ease, box-shadow .16s ease;
}
.wclChartOptionBtn::before {
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fffdf7;
  box-shadow: 0 1px 2px rgba(15,23,42,.22);
  transform: translateY(-50%);
  transition: right .16s ease, background .16s ease;
}
.wclChartOptionBtn.active, .wclChartOptionBtn.activeBtn {
  background: rgba(79,70,229,.065) !important;
  border-color: rgba(79,70,229,.13) !important;
  color: #312e81 !important;
}
.wclChartOptionBtn.active::after, .wclChartOptionBtn.activeBtn::after {
  background: #4f46e5;
  box-shadow: none;
}
.wclChartOptionBtn.active::before, .wclChartOptionBtn.activeBtn::before {
  right: 12px;
  background: #fff;
}
.wclChartFontField {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 5px 5px 5px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.045);
  border: 1px solid rgba(15,23,42,.06);
}
.wclChartFontField span {
  color: #475569;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}
.wclChartFontField select {
  flex: 0 0 118px;
  width: 118px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 28px 0 10px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important;
  color: #172033 !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}
html:not([data-theme="light"]) .wclChartToolsToggle, html[data-theme="dark"] .wclChartToolsToggle {
  background: rgba(255,253,247,.88) !important;
  color: #172033 !important;
}
html:not([data-theme="light"]) .wclChartToolsPanel, html[data-theme="dark"] .wclChartToolsPanel {
  background: rgba(255,253,247,.94);
  color: #172033;
  border-color: rgba(17,24,39,.10);
}
html[data-theme="light"] .wclChartToolsToggle {
  background: rgba(255,255,255,.86) !important;
}
html[data-theme="light"] .wclChartToolsPanel {
  background: rgba(255,255,255,.94);
}
#lyricOnlyBtn, #chartBoldBtn, #topChartFontSelect, #desktopLyricOnlyBtn, #desktopChartBoldBtn, #desktopChartFontSelect, #mobileToolsLyricOnlyBtn, #mobileToolsChartBoldBtn, #mobileToolsChartFontSelect {
  display: none !important;
}
@media(max-width:900px) {
  .wclChartReadabilityDock {
    right: 10px;
    margin-bottom: -46px;
  }
  .wclChartToolsHead {
    padding-bottom: 6px;
  }
  .wclChartOptionBtn, .wclChartFontField {
    min-height: 40px !important;
  }
  .wclChartFontField select {
    flex-basis: 112px;
  }
}
.wclChartReadabilityDock {
  position: sticky !important;
  top: 14px !important;
  right: auto !important;
  left: auto !important;
  z-index: 2600 !important;
  float: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 12px 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  pointer-events: none !important;
  clear: none !important;
}
.wclChartReadabilityDock.open {
  width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin-bottom: 0 !important;
}
.wclChartReadabilityDock * {
  pointer-events: auto;
}
.wclChartToolsPanel {
  flex: 0 0 auto !important;
}
.wclChartToolsToggle {
  flex: 0 0 auto !important;
}
@media(max-width:900px) {
  .wclChartReadabilityDock {
    top: 8px !important;
    margin: 0 8px 0 auto !important;
    gap: 6px !important;
    transform: translateZ(0);
  }
  .wclChartToolsToggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(17,24,39,.13), 0 0 0 1px rgba(17,24,39,.04) !important;
  }
  .wclChartToolsIcon {
    font-size: 12px !important;
    letter-spacing: -.05em;
  }
  .wclChartToolsPanel {
    max-width: min(198px,calc(100vw - 60px)) !important;
    border-radius: 15px !important;
    box-shadow: 0 16px 42px rgba(17,24,39,.18), 0 1px 1px rgba(17,24,39,.04) !important;
  }
  .wclChartReadabilityDock.open .wclChartToolsPanel {
    padding: 7px !important;
  }
  .wclChartToolsHead {
    padding: 0 0 4px !important;
    gap: 6px !important;
  }
  .wclChartToolsHead strong {
    font-size: 10px !important;
    letter-spacing: .075em !important;
  }
  .wclChartToolsClose {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 18px !important;
  }
  .wclChartToolsActions {
    gap: 1px !important;
    margin-bottom: 5px !important;
  }
  .wclChartOptionBtn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 40px 0 9px !important;
    border-radius: 10px !important;
  }
  .wclChartOptionBtn span {
    font-size: 12px !important;
    font-weight: 760 !important;
  }
  .wclChartOptionBtn::after {
    right: 8px !important;
    width: 28px !important;
    height: 16px !important;
  }
  .wclChartOptionBtn::before {
    right: 22px !important;
    width: 12px !important;
    height: 12px !important;
  }
  .wclChartOptionBtn.active::before, .wclChartOptionBtn.activeBtn::before {
    right: 10px !important;
  }
  .wclChartFontField {
    min-height: 36px !important;
    padding: 4px 4px 4px 9px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .wclChartFontField span {
    font-size: 12px !important;
    font-weight: 760 !important;
  }
  .wclChartFontField select {
    flex: 0 0 94px !important;
    width: 94px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 24px 0 9px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }
  body.performance .wclChartReadabilityDock {
    top: 10px !important;
  }
}
@media(max-width:380px) {
  .wclChartReadabilityDock.open .wclChartToolsPanel, .wclChartToolsPanel {
    width: min(184px,calc(100vw - 54px)) !important;
    max-width: min(184px,calc(100vw - 54px)) !important;
  }
  .wclChartFontField select {
    flex-basis: 86px !important;
    width: 86px !important;
  }
}
.chartFocusBtn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  background: linear-gradient(135deg,#1e293b,#111827) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(148,163,184,.24) !important;
  box-shadow: 0 8px 18px rgba(2,6,23,.18) !important;
}
.chartFocusBtn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
}
body.chart-focus .chartFocusBtn {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.35),0 10px 22px rgba(37,99,235,.24) !important;
}
@media(min-width:901px) {
  body.is-desktop-device .topbar .controls > .chartFocusBtn, body.is-desktop-device .chartFocusBtn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 14px !important;
    margin-left: 0 !important;
  }
  body.chart-focus.is-desktop-device .desktopAppBar {
    display: none !important;
  }
  body.chart-focus.is-desktop-device .sidebar, body.chart-focus.is-desktop-device .flowPanel {
    display: none !important;
  }
  body.chart-focus.is-desktop-device .app, body.chart-focus.is-desktop-device .contentArea {
    grid-template-columns: 1fr !important;
  }
  body.chart-focus.is-desktop-device .topbar {
    min-height: 52px !important;
    padding: 8px 14px !important;
  }
  body.chart-focus.is-desktop-device #songMeta, body.chart-focus.is-desktop-device #flowMeta {
    display: none !important;
  }
  body.chart-focus.is-desktop-device #songTitle {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
}
@media(max-width:900px) {
  .topbar .controls > .chartFocusBtn, body.is-mobile-device .topbar .controls > .chartFocusBtn {
    order: 11 !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    padding: 0 !important;
  }
  body.chart-focus .mobileBottomNav, body.chart-focus.is-mobile-device .mobileBottomNav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.chart-focus .topbar > div:first-child, body.chart-focus.is-mobile-device .topbar > div:first-child {
    min-height: 0 !important;
    padding-right: 0 !important;
  }
  body.chart-focus #songMeta, body.chart-focus #flowMeta, body.chart-focus .mobileFlowNav, body.chart-focus.is-mobile-device #songMeta, body.chart-focus.is-mobile-device #flowMeta, body.chart-focus.is-mobile-device .mobileFlowNav {
    display: none !important;
  }
  body.chart-focus .controls, body.chart-focus.is-mobile-device .controls {
    margin-top: 3px !important;
    background: rgba(15,23,42,.52) !important;
    overflow-x: auto !important;
  }
  body.chart-focus .controls > button:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus .controls > select, body.chart-focus .controls > .padNowPlaying, body.chart-focus.is-mobile-device .controls > button:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus.is-mobile-device .controls > select, body.chart-focus.is-mobile-device .controls > .padNowPlaying {
    display: none !important;
  }
  body.chart-focus .mobileAutoTop, body.chart-focus.is-mobile-device .mobileAutoTop {
    order: 10 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    gap: 7px !important;
    border-radius: 11px !important;
  }
  body.chart-focus .mobileAutoTop button, body.chart-focus.is-mobile-device .mobileAutoTop button {
    width: 42px !important;
    min-width: 42px !important;
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }
  body.chart-focus .mobileAutoTop input[type="range"], body.chart-focus.is-mobile-device .mobileAutoTop input[type="range"] {
    min-width: 80px !important;
  }
  body.chart-focus #chartFocusBtn, body.chart-focus.is-mobile-device #chartFocusBtn {
    flex: 0 0 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 11px !important;
  }
  body.chart-focus .chartOutput, body.chart-focus.is-mobile-device .chartOutput {
    padding-bottom: 24px !important;
  }
}
html[data-theme="light"] body:not(.performance) .chartFocusBtn {
  background: linear-gradient(180deg,#ffffff,#f1f6ff) !important;
  color: #172033 !important;
  border: 1px solid #cbd8ea !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.08) !important;
}
html[data-theme="light"] body.chart-focus:not(.performance) .chartFocusBtn {
  background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.chartFocusOnly, .chartFocusMeta {
  display: none !important;
}
@media(max-width:900px) {
  body.chart-focus, body.chart-focus.is-mobile-device {
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background: #070b12 !important;
  }
  body.chart-focus .app, body.chart-focus.is-mobile-device .app {
    height: 100svh !important;
    max-height: 100svh !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }
  body.chart-focus .main, body.chart-focus.is-mobile-device .main {
    height: 100svh !important;
    max-height: 100svh !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body.chart-focus .topbar, body.chart-focus.is-mobile-device .topbar {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 5px 7px !important;
    background: rgba(7,12,21,.74) !important;
    border-bottom: 1px solid rgba(148,163,184,.16) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
    box-shadow: 0 8px 24px rgba(2,6,23,.16) !important;
  }
  body.chart-focus .songTitleWrap, body.chart-focus.is-mobile-device .songTitleWrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.chart-focus .songTitleLine, body.chart-focus.is-mobile-device .songTitleLine {
    display: block !important;
    min-width: 0 !important;
  }
  body.chart-focus #songTitle, body.chart-focus.is-mobile-device #songTitle {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    letter-spacing: -.015em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.chart-focus #songLookupBtn, body.chart-focus.is-mobile-device #songLookupBtn, body.chart-focus #songMeta, body.chart-focus #flowMeta, body.chart-focus .mobileFlowNav, body.chart-focus.is-mobile-device #songMeta, body.chart-focus.is-mobile-device #flowMeta, body.chart-focus.is-mobile-device .mobileFlowNav {
    display: none !important;
  }
  body.chart-focus .chartFocusMeta, body.chart-focus.is-mobile-device .chartFocusMeta {
    display: block !important;
    margin: 2px 0 0 !important;
    max-width: 100% !important;
    color: rgba(203,213,225,.88) !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.chart-focus .controls, body.chart-focus.is-mobile-device .controls {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 3px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    grid-template-columns: none !important;
    overflow: visible !important;
    border-radius: 15px !important;
    background: rgba(15,23,42,.46) !important;
    border: 1px solid rgba(148,163,184,.14) !important;
    box-shadow: none !important;
  }
  body.chart-focus .controls > *, body.chart-focus.is-mobile-device .controls > * {
    order: 50 !important;
    display: none !important;
  }
  body.chart-focus #chartFocusPrevBtn, body.chart-focus #chartFocusNextBtn, body.chart-focus #keySelect, body.chart-focus #capoSelect, body.chart-focus #columnsBtn, body.chart-focus #chartFocusBtn, body.chart-focus.is-mobile-device #chartFocusPrevBtn, body.chart-focus.is-mobile-device #chartFocusNextBtn, body.chart-focus.is-mobile-device #keySelect, body.chart-focus.is-mobile-device #capoSelect, body.chart-focus.is-mobile-device #columnsBtn, body.chart-focus.is-mobile-device #chartFocusBtn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    background: rgba(30,41,59,.72) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    box-shadow: none !important;
  }
  body.chart-focus #chartFocusPrevBtn, body.chart-focus.is-mobile-device #chartFocusPrevBtn {
    order: 1 !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    font-size: 20px !important;
  }
  body.chart-focus #chartFocusNextBtn, body.chart-focus.is-mobile-device #chartFocusNextBtn {
    order: 2 !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    font-size: 20px !important;
  }
  body.chart-focus #keySelect, body.chart-focus.is-mobile-device #keySelect {
    order: 3 !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 7px !important;
  }
  body.chart-focus #capoSelect, body.chart-focus.is-mobile-device #capoSelect {
    order: 4 !important;
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    padding: 0 7px !important;
  }
  body.chart-focus #columnsBtn, body.chart-focus.is-mobile-device #columnsBtn {
    order: 5 !important;
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }
  body.chart-focus #columnsBtn span, body.chart-focus.is-mobile-device #columnsBtn span {
    display: none !important;
  }
  body.chart-focus #chartFocusBtn, body.chart-focus.is-mobile-device #chartFocusBtn {
    order: 6 !important;
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    font-size: 15px !important;
    background: linear-gradient(135deg,#2563eb,#7c3aed) !important;
    color: #fff !important;
  }
  body.chart-focus .contentArea, body.chart-focus.is-mobile-device .contentArea {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    background: var(--paper) !important;
  }
  body.chart-focus .chart, body.chart-focus.is-mobile-device .chart {
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: auto !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(180deg,#fffdf7,#fffaf0) !important;
  }
  body.chart-focus .chartOutput, body.chart-focus.is-mobile-device .chartOutput {
    min-height: 100% !important;
    padding: 10px 14px 14px !important;
    background: transparent !important;
  }
}
@media(max-width:430px) {
  body.chart-focus #keySelect, body.chart-focus.is-mobile-device #keySelect {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding: 0 5px !important;
  }
  body.chart-focus #capoSelect, body.chart-focus.is-mobile-device #capoSelect {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding: 0 5px !important;
  }
  body.chart-focus #columnsBtn, body.chart-focus.is-mobile-device #columnsBtn {
    width: 32px !important;
    min-width: 32px !important;
  }
  body.chart-focus #chartFocusBtn, body.chart-focus.is-mobile-device #chartFocusBtn {
    width: 28px !important;
    min-width: 28px !important;
  }
}
html[data-theme="light"] body.chart-focus:not(.performance) .topbar {
  background: rgba(248,250,252,.72) !important;
  border-bottom: 1px solid rgba(148,163,184,.28) !important;
}
html[data-theme="light"] body.chart-focus:not(.performance) .controls {
  background: rgba(255,255,255,.54) !important;
  border-color: rgba(148,163,184,.28) !important;
}
html[data-theme="light"] body.chart-focus:not(.performance) .chartFocusMeta {
  color: rgba(71,85,105,.88) !important;
}
@media(max-width:900px) {
  body.chart-focus .controls > #chartFocusPrevBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus .controls > #chartFocusNextBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus .controls > #columnsBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus.is-mobile-device .controls > #chartFocusPrevBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus.is-mobile-device .controls > #chartFocusNextBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn), body.chart-focus.is-mobile-device .controls > #columnsBtn:not(#mobileAutoScrollBtn):not(#chartFocusBtn) {
    display: inline-flex !important;
  }
}
@media(max-width:900px) {
  body.chart-focus .controls, body.chart-focus.is-mobile-device .controls {
    align-items: center !important;
  }
  body.chart-focus #chartFocusPrevBtn, body.chart-focus #chartFocusNextBtn, body.chart-focus.is-mobile-device #chartFocusPrevBtn, body.chart-focus.is-mobile-device #chartFocusNextBtn {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
    background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    border: 1px solid rgba(196,181,253,.42) !important;
    box-shadow: 0 5px 14px rgba(124,58,237,.24) !important;
  }
  body.chart-focus #chartFocusPrevBtn::before, body.chart-focus #chartFocusNextBtn::before, body.chart-focus.is-mobile-device #chartFocusPrevBtn::before, body.chart-focus.is-mobile-device #chartFocusNextBtn::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    font-family: Inter, Segoe UI, Arial, sans-serif !important;
    transform: translateY(-1px) !important;
  }
  body.chart-focus #chartFocusPrevBtn::before, body.chart-focus.is-mobile-device #chartFocusPrevBtn::before {
    content: "‹";
  }
  body.chart-focus #chartFocusNextBtn::before, body.chart-focus.is-mobile-device #chartFocusNextBtn::before {
    content: "›";
  }
  body.chart-focus .chartFocusMeta, body.chart-focus.is-mobile-device .chartFocusMeta {
    letter-spacing: .01em !important;
  }
}
@media(max-width:430px) {
  body.chart-focus #chartFocusPrevBtn, body.chart-focus #chartFocusNextBtn, body.chart-focus.is-mobile-device #chartFocusPrevBtn, body.chart-focus.is-mobile-device #chartFocusNextBtn {
    width: 28px !important;
    min-width: 28px !important;
  }
}
@media(max-width:900px) {
  body:not(.chart-focus) .controls > #chartFocusPrevBtn, body:not(.chart-focus) .controls > #chartFocusNextBtn, body:not(.chart-focus).is-mobile-device .controls > #chartFocusPrevBtn, body:not(.chart-focus).is-mobile-device .controls > #chartFocusNextBtn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
@media(max-width:900px) {
  body:not(.chart-focus) .topbar .controls > #chartFocusBtn, body:not(.chart-focus).is-mobile-device .topbar .controls > #chartFocusBtn {
    order: -20 !important;
  }
  body.chart-focus .topbar .controls > #chartFocusPrevBtn, body.chart-focus.is-mobile-device .topbar .controls > #chartFocusPrevBtn {
    order: 1 !important;
  }
  body.chart-focus .topbar .controls > #chartFocusNextBtn, body.chart-focus.is-mobile-device .topbar .controls > #chartFocusNextBtn {
    order: 2 !important;
  }
  body.chart-focus .topbar .controls > #keySelect, body.chart-focus.is-mobile-device .topbar .controls > #keySelect {
    order: 3 !important;
  }
  body.chart-focus .topbar .controls > #capoSelect, body.chart-focus.is-mobile-device .topbar .controls > #capoSelect {
    order: 4 !important;
  }
  body.chart-focus .topbar .controls > #columnsBtn, body.chart-focus.is-mobile-device .topbar .controls > #columnsBtn {
    order: 5 !important;
  }
  body.chart-focus .topbar .controls > #chartFocusBtn, body.chart-focus.is-mobile-device .topbar .controls > #chartFocusBtn {
    order: 99 !important;
  }
}
@media(max-width:900px) {
  body:not(.wcl-no-song):not(.chart-focus) .mobileFlowNav, body:not(.wcl-no-song):not(.chart-focus).is-mobile-device .mobileFlowNav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.chart-focus .mobileFlowNav, body.chart-focus.is-mobile-device .mobileFlowNav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
.welcomeDailyVerse {
  display: none;
  flex: 1 1 420px;
  max-width: 640px;
  min-height: 0;
  margin-left: auto;
  padding: 0 8px 0 24px;
  text-align: right;
  color: rgba(203,213,225,.72);
  font-size: 13px;
  line-height: 1.32;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .005em;
}
.welcomeDailyVerseText {
  display: block;
  min-height: 0;
  margin: 0;
}
.welcomeDailyVerseRef {
  display: block;
  margin-top: 0;
  padding-top: 0;
  color: rgba(246,199,104,.78);
  font-size: 11px;
  line-height: 1.15;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body.wcl-no-song .welcomeDailyVerse {
  display: block;
}
body:not(.wcl-no-song) .welcomeDailyVerse, body.performance .welcomeDailyVerse, body.chart-focus .welcomeDailyVerse {
  display: none !important;
}
html[data-theme="light"] .welcomeDailyVerse {
  color: rgba(71,85,105,.76);
}
html[data-theme="light"] .welcomeDailyVerseRef {
  color: rgba(124,58,237,.78);
}
@media(max-width:900px) {
  body.wcl-no-song .welcomeDailyVerse {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
  }
  body.wcl-no-song .welcomeDailyVerseText {
    display: block !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  body.wcl-no-song .welcomeDailyVerseRef {
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}
@media(max-width:900px) {
  body.wcl-no-song .topbar {
    position: relative !important;
    padding-right: 48px !important;
  }
  body.wcl-no-song .wclLikeMobileWelcomePlacement {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    transform: none !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 60 !important;
  }
  body.wcl-no-song .wclLikeMobileWelcomePlacement .wclLikeBtn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 13px !important;
    padding: 0 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  body.wcl-no-song .wclLikeMobileWelcomePlacement .wclLikeHeart {
    font-size: 22px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }
  body.wcl-no-song .wclLikeMobileWelcomePlacement .wclLikeCount {
    right: -4px !important;
    bottom: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    border-width: 2px !important;
  }
  body.wcl-no-song .welcomeDailyVerse {
    margin-top: 8px !important;
    padding-right: 0 !important;
  }
}
.songLibraryControls {
  margin: 0 14px 10px;
  padding: 5px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 12px;
  background: rgba(8,15,26,.62);
  box-shadow: none;
}
.songSortControls {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
}
.songSortControls button {
  min-width: 0;
  width: 100%;
  height: 29px;
  min-height: 29px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7f8da3;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
}
.songSortControls button:hover {
  color: #e5e7eb;
  background: rgba(148,163,184,.07);
}
.songSortControls button.active {
  border-color: rgba(167,139,250,.38);
  background: rgba(124,58,237,.18);
  color: #f8fafc;
}
.songSortArrow {
  display: inline-block;
  margin-left: 2px;
  color: #a78bfa;
  font-size: 10px;
  font-weight: 950;
}
.songPlayCount {
  grid-area: views !important;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(148,163,184,.48);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}
.songPlayCount strong {
  color: inherit;
  font-size: 8px;
  font-weight: 800;
}
.songPlayCount.isZero {
  opacity: .62;
}
html[data-theme="light"] .songLibraryControls {
  border-color: #e2e8f0;
  background: rgba(248,250,252,.82);
}
html[data-theme="light"] .songSortControls button {
  color: #64748b;
}
html[data-theme="light"] .songSortControls button:hover {
  color: #0f172a;
  background: #eef2f7;
}
html[data-theme="light"] .songSortControls button.active {
  border-color: rgba(124,58,237,.28);
  background: rgba(124,58,237,.09);
  color: #4c1d95;
}
html[data-theme="light"] .songPlayCount {
  color: rgba(100,116,139,.56);
}
@media(max-width:900px) {
  .songLibraryControls {
    margin: 0 6px 8px;
    padding: 4px;
    border-radius: 11px;
  }
  .songSortControls {
    gap: 4px;
  }
  .songSortControls button {
    height: 28px;
    min-height: 28px;
    padding: 0 5px;
    border-radius: 8px;
    font-size: 8.5px;
  }
  .songSortArrow {
    font-size: 9px;
  }
  body.is-mobile-device .songPlayCount {
    font-size: 7.5px;
    line-height: 1;
  }
  body.is-mobile-device .songPlayCount strong {
    font-size: 7.5px;
  }
}
.wclTeacherReturnBtn {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 220000;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: linear-gradient(135deg,#15803d,#22c55e);
  color: #fff;
  font: 850 13px Inter,Segoe UI,Arial,sans-serif;
  box-shadow: 0 16px 38px rgba(0,0,0,.34);
  cursor: pointer;
}
.wclTeacherReturnBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}
@media(max-width:900px) {
  .wclTeacherReturnBtn {
    left: 12px;
    bottom: calc(var(--navH,72px) + 12px);
    min-height: 40px;
    padding: 0 13px;
    font-size: 12px;
  }
}
@media(max-width:900px) {
  :root {
    --navH: 62px;
    --wcl-mobile-glass: rgba(12,16,23,.42);
    --wcl-mobile-glass-border: rgba(255,255,255,.18);
    --wcl-mobile-glass-highlight: rgba(255,255,255,.08);
  }
  html, body {
    overscroll-behavior: none;
  }
  body {
    background: var(--paper,#fffdf7) !important;
  }
  .main {
    height: 100svh !important;
    padding-bottom: 0 !important;
    background: var(--paper,#fffdf7) !important;
  }
  .contentArea {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: var(--paper,#fffdf7) !important;
  }
  .chart {
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    background: linear-gradient(180deg,#fffdf7,#fffaf0) !important;
    overscroll-behavior-y: contain;
  }
  #chartOutput, .chartOutput {
    min-height: 100% !important;
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    will-change: transform,opacity;
    transition: transform .18s ease,opacity .18s ease;
  }
  .welcomeScreen {
    min-height: 100% !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg,#fffdf7,#fffaf0) !important;
  }
  .mobileBottomNav {
    left: 50% !important;
    right: auto !important;
    bottom: max(7px,env(safe-area-inset-bottom)) !important;
    width: min(448px,calc(100vw - 16px)) !important;
    max-width: 448px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 5px 6px !important;
    display: grid !important;
    grid-template-columns: repeat(7,minmax(0,1fr)) !important;
    align-items: center !important;
    gap: 1px !important;
    border: 1px solid var(--wcl-mobile-glass-border) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg,var(--wcl-mobile-glass-highlight),rgba(255,255,255,.01)),
      var(--wcl-mobile-glass) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%) !important;
    backdrop-filter: blur(30px) saturate(190%) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.12) !important;
    transform: translateX(-50%) translateZ(0) !important;
    overflow: visible !important;
  }
  .mobileBottomNav > button:nth-child(5), .mobileBottomNav > button:nth-child(9) {
    display: none !important;
  }
  .mobileBottomNav > button:nth-child(1) {
    order: 1;
  }
  .mobileBottomNav > button:nth-child(2) {
    order: 2;
  }
  .mobileBottomNav > button:nth-child(3) {
    order: 3;
  }
  .mobileBottomNav > button:nth-child(6) {
    order: 4;
  }
  .mobileBottomNav > button:nth-child(4) {
    order: 5;
  }
  .mobileBottomNav > button:nth-child(7) {
    order: 6;
  }
  .mobileBottomNav > button:nth-child(8) {
    order: 7;
  }
  .mobileBottomNav > button[data-mobile-view], .mobileBottomNav .wclNavButton, .mobileBottomNav .wclNavUtility[data-mobile-view] {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(248,250,252,.75) !important;
    box-shadow: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: background .16s ease,color .16s ease,transform .16s ease !important;
    -webkit-tap-highlight-color: transparent;
  }
  .mobileBottomNav > button[data-mobile-view]:active {
    transform: scale(.90) !important;
  }
  .mobileBottomNav > button[data-mobile-view].active {
    color: #fff !important;
    background: rgba(255,255,255,.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  .mobileBottomNav > button[data-mobile-view].active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 9px rgba(255,255,255,.7);
  }
  .mobileBottomNav .wclNavIcon, .mobileBottomNav .wclUtilityNavIcon {
    width: 22px !important;
    height: 22px !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  .mobileBottomNav .wclNavIcon svg {
    width: 22px !important;
    height: 22px !important;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobileBottomNav > button[data-mobile-view].active .wclNavIcon svg {
    stroke-width: 2.25;
  }
  .mobileBottomNav > button[data-mobile-view] small {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .topbar {
    padding: 10px 12px 8px !important;
    background: rgba(10,13,19,.84) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    box-shadow: none !important;
  }
  .songTitleLine {
    min-height: 34px !important;
  }
  #songTitle, h1 {
    font-size: 21px !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
  #songMeta, #flowMeta {
    margin-top: 3px !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  .topbar .controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar .controls::-webkit-scrollbar {
    display: none;
  }
  .topbar .controls > button, .topbar .controls > select, .topbar .controls > .mobileAutoTop {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.075) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
    font-size: 12px !important;
    scroll-snap-align: start;
  }
  .topbar .controls > .primary {
    grid-column: auto !important;
    background: rgba(99,102,241,.24) !important;
    border-color: rgba(129,140,248,.24) !important;
  }
  .topbar .mobileAutoTop {
    width: 128px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .topbar .mobileAutoTop button {
    width: 44px !important;
    min-width: 44px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 10px !important;
  }
  .topbar .mobileAutoTop input {
    width: 58px !important;
  }
  .sidebar, .mobileToolsScreen, .mobilePadScreen {
    background: radial-gradient(circle at 50% -20%,rgba(99,102,241,.15),transparent 38%),
      #080b11 !important;
  }
  .sidebar {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    border-right: 0 !important;
  }
  .sidebar .brand {
    padding: 14px 16px 8px !important;
  }
  .sidebar .search {
    height: 38px !important;
    margin: 4px 12px 8px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
  }
  .sidebar .tabs {
    margin: 0 12px 8px !important;
    padding: 3px !important;
    gap: 2px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.075) !important;
  }
  .sidebar .tabs button {
    height: 32px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 11px !important;
  }
  .sidebar .tabs button.active {
    background: rgba(255,255,255,.12) !important;
  }
  #songList {
    padding: 4px 10px calc(74px + env(safe-area-inset-bottom)) !important;
  }
  #songList .song {
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #songList .song.active {
    background: rgba(124,58,237,.10) !important;
  }
  #songList .songCover {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 9px !important;
  }
  .songFolderStar {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.72) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
  .songFolderStar.isStarred {
    color: #f8c24f !important;
    background: rgba(248,194,79,.13) !important;
    border-color: rgba(248,194,79,.32) !important;
  }
  .songMenuCombinedSetAction {
    color: #f8c24f !important;
  }
  .mobileToolsScreen {
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom)) !important;
  }
  .mobileToolGrid.slimMobileTools {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .mobileToolGrid.slimMobileTools > button, .mobileToolGrid.slimMobileTools > select {
    min-height: 54px !important;
    height: auto !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
    font-size: 11px !important;
  }
  .mobileToolCard {
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: none !important;
  }
  .wclGestureToast {
    position: fixed;
    left: 50%;
    bottom: calc(70px + env(safe-area-inset-bottom));
    z-index: 250000;
    max-width: calc(100vw - 36px);
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(17,20,27,.68);
    color: #fff;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 10px 28px rgba(0,0,0,.24);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate(-50%,8px) scale(.97);
    pointer-events: none;
    transition: opacity .18s ease,transform .18s ease;
  }
  .wclGestureToast.show {
    opacity: 1;
    transform: translate(-50%,0) scale(1);
  }
  .wclGestureHint {
    position: fixed;
    left: 50%;
    bottom: calc(69px + env(safe-area-inset-bottom));
    z-index: 249999;
    width: max-content;
    max-width: calc(100vw - 28px);
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(17,20,27,.64);
    color: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 10px 30px rgba(0,0,0,.24);
    font-size: 10.5px;
    font-weight: 750;
    text-align: center;
    opacity: 0;
    transform: translate(-50%,8px);
    pointer-events: none;
    transition: opacity .24s ease,transform .24s ease;
  }
  .wclGestureHint.show {
    opacity: 1;
    transform: translate(-50%,0);
  }
  body.wclMenuSwipeTracking .mobileBottomNav {
    box-shadow: 0 12px 36px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
  body.performance .mobileBottomNav, body.chart-focus .mobileBottomNav {
    display: none !important;
  }
  body.performance .main, body.chart-focus .main {
    padding-bottom: 0 !important;
  }
}
@media(max-width:900px) and (prefers-reduced-motion:reduce) {
  .mobileBottomNav > button[data-mobile-view], .wclGestureToast, .wclGestureHint {
    transition: none !important;
  }
}
@media(max-width:900px) {
  html[data-theme="light"] {
    --wcl-mobile-glass: rgba(255,255,255,.44);
    --wcl-mobile-glass-border: rgba(15,23,42,.14);
    --wcl-mobile-glass-highlight: rgba(255,255,255,.58);
  }
  html[data-theme="light"] .mobileBottomNav > button[data-mobile-view] {
    color: rgba(15,23,42,.62) !important;
  }
  html[data-theme="light"] .mobileBottomNav > button[data-mobile-view].active {
    color: #0f172a !important;
    background: rgba(15,23,42,.08) !important;
  }
  html[data-theme="light"] .mobileBottomNav > button[data-mobile-view].active::after {
    background: #0f172a;
    box-shadow: none;
  }
  html[data-theme="light"] .wclGestureToast, html[data-theme="light"] .wclGestureHint {
    border-color: rgba(15,23,42,.10);
    background: rgba(248,250,252,.72);
    color: #0f172a;
  }
}
@media(max-width:900px) {
  :root {
    --wcl-mobile-glass: rgba(8,12,18,.30);
    --wcl-safe-bottom: env(safe-area-inset-bottom,0px);
  }
  html, body, body.is-mobile-device, body.is-mobile-device .app, body.is-mobile-device .main, body.is-mobile-device .contentArea, body.is-mobile-device .chart {
    background: linear-gradient(180deg,#fffdf7,#fffaf0) !important;
  }
  body.is-mobile-device .app {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }
  body.is-mobile-device .main, body.wcl-no-song.is-mobile-device .main, body.mobile-view-home.is-mobile-device .main {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }
  body.is-mobile-device .contentArea, body.wcl-no-song.is-mobile-device .contentArea, body.mobile-view-home.is-mobile-device .contentArea {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  body.is-mobile-device .chart, body.wcl-no-song.is-mobile-device .chart, body.mobile-view-home.is-mobile-device .chart {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.is-mobile-device #chartOutput, body.is-mobile-device .chartOutput, body.is-mobile-device #welcomeScreen, body.is-mobile-device .welcomeScreen {
    min-height: 100% !important;
    background: linear-gradient(180deg,#fffdf7,#fffaf0) !important;
  }
  body.is-mobile-device #chartOutput, body.is-mobile-device .chartOutput {
    padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }
  body.is-mobile-device #welcomeScreen, body.is-mobile-device .welcomeScreen {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  body.is-mobile-device .mobileBottomNav {
    background: linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)),
      var(--wcl-mobile-glass) !important;
    -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
    backdrop-filter: blur(26px) saturate(175%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.10) !important;
  }
  body.is-mobile-device .wclYoutubePlayer {
    width: min(352px,calc(100vw - 20px)) !important;
    max-height: calc(100svh - 86px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 20px !important;
    transform-origin: bottom center !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-songs .sidebar, body.is-mobile-device.mobile-view-set .sidebar, body.mobile-view-songs .sidebar, body.mobile-view-set .sidebar, body.mobileShowSongs .sidebar, body.mobileShowSet .sidebar {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    background: radial-gradient(circle at 50% -20%,rgba(99,102,241,.15),transparent 38%),
      #080b11 !important;
  }
  body.is-mobile-device.mobile-view-songs .library, body.mobile-view-songs .library, body.mobileShowSongs .library {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.is-mobile-device.mobile-view-songs #songList, body.mobile-view-songs #songList, body.mobileShowSongs #songList {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  body.is-mobile-device.mobile-view-set .setlist, body.mobile-view-set .setlist, body.mobileShowSet .setlist {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  body.is-mobile-device.mobile-view-set #setListBox, body.mobile-view-set #setListBox, body.mobileShowSet #setListBox {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  body.is-mobile-device.mobile-view-tools #mobileToolsScreen, body.mobile-view-tools #mobileToolsScreen, body.mobileShowTools #mobileToolsScreen, body.is-mobile-device.mobile-view-pad #mobilePadScreen, body.mobile-view-pad #mobilePadScreen, body.mobileShowPads #mobilePadScreen {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: radial-gradient(circle at 50% -20%,rgba(99,102,241,.15),transparent 38%),
      #080b11 !important;
  }
}
@media(max-width:900px) {
  body.is-mobile-device .mobileBottomNav, body.mobile-view-songs .mobileBottomNav, body.mobile-view-set .mobileBottomNav, body.mobile-view-tools .mobileBottomNav, body.mobile-view-pad .mobileBottomNav, body.mobileShowSongs .mobileBottomNav, body.mobileShowSet .mobileBottomNav, body.mobileShowTools .mobileBottomNav, body.mobileShowPads .mobileBottomNav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    z-index: 2147483000 !important;
    isolation: isolate !important;
  }
  body.is-mobile-device.mobile-view-songs .sidebar, body.is-mobile-device.mobile-view-set .sidebar, body.mobile-view-songs .sidebar, body.mobile-view-set .sidebar, body.mobileShowSongs .sidebar, body.mobileShowSet .sidebar, body.is-mobile-device.mobile-view-tools #mobileToolsScreen, body.mobile-view-tools #mobileToolsScreen, body.mobileShowTools #mobileToolsScreen, body.is-mobile-device.mobile-view-pad #mobilePadScreen, body.mobile-view-pad #mobilePadScreen, body.mobileShowPads #mobilePadScreen {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body.is-mobile-device.mobile-view-songs, body.is-mobile-device.mobile-view-set, body.is-mobile-device.mobile-view-tools, body.is-mobile-device.mobile-view-pad, body.mobile-view-songs, body.mobile-view-set, body.mobile-view-tools, body.mobile-view-pad, body.mobileShowSongs, body.mobileShowSet, body.mobileShowTools, body.mobileShowPads {
    background: #080b11 !important;
  }
  body.is-mobile-device.mobile-view-tools .app, body.is-mobile-device.mobile-view-tools .main, body.is-mobile-device.mobile-view-tools .contentArea, body.mobile-view-tools .app, body.mobile-view-tools .main, body.mobile-view-tools .contentArea, body.mobileShowTools .app, body.mobileShowTools .main, body.mobileShowTools .contentArea, body.is-mobile-device.mobile-view-pad .app, body.is-mobile-device.mobile-view-pad .main, body.is-mobile-device.mobile-view-pad .contentArea, body.mobile-view-pad .app, body.mobile-view-pad .main, body.mobile-view-pad .contentArea, body.mobileShowPads .app, body.mobileShowPads .main, body.mobileShowPads .contentArea {
    background: #080b11 !important;
  }
  body.is-mobile-device.mobile-view-tools #mobileToolsScreen, body.mobile-view-tools #mobileToolsScreen, body.mobileShowTools #mobileToolsScreen, body.is-mobile-device.mobile-view-pad #mobilePadScreen, body.mobile-view-pad #mobilePadScreen, body.mobileShowPads #mobilePadScreen {
    padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.is-mobile-device.mobile-view-songs #songList, body.mobile-view-songs #songList, body.mobileShowSongs #songList, body.is-mobile-device.mobile-view-set #setListBox, body.mobile-view-set #setListBox, body.mobileShowSet #setListBox {
    padding-bottom: calc(88px + env(safe-area-inset-bottom,0px)) !important;
  }
}
.worshipPadCard.wclDjPadDeck, #mobileWidgetMount .worshipPadCard {
  --pad-shell: #0b0f15;
  --pad-panel: #111824;
  --pad-panel-2: #0d131d;
  --pad-edge: rgba(148,163,184,.17);
  --pad-edge-strong: rgba(148,163,184,.30);
  --pad-ink: #f8fafc;
  --pad-muted: #8793a5;
  --pad-accent: #f3bd57;
  --pad-live: #2dd57f;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pad-edge) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.025),transparent 22%),
    var(--pad-shell) !important;
  color: var(--pad-ink) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.worshipPadCard.wclDjPadDeck::before, #mobileWidgetMount .worshipPadCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,transparent,rgba(243,189,87,.65),transparent);
  pointer-events: none;
}
.wclPadDeckTop {
  display: flex;
}
.wclPadDeckIdentity {
  min-width: 0;
}
.wclPadDeckEyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--pad-accent);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .18em;
}
.worshipPadCard.wclDjPadDeck h3, #mobileWidgetMount .worshipPadCard h3 {
  margin: 0 !important;
  color: var(--pad-ink) !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.worshipPadCard .worshipPadLiveBadge {
  min-width: 50px;
  height: 25px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 999px;
  background: #080c12;
  color: #7f8a9a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.worshipPadCard .worshipPadLiveBadge.on {
  border-color: rgba(45,213,127,.38);
  background: rgba(45,213,127,.11);
  color: #8cf2bc;
  box-shadow: 0 0 0 1px rgba(45,213,127,.05),0 0 18px rgba(45,213,127,.10);
}
.wclPadNowDeck {
  display: grid !important;
  margin: 0 0 10px !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 14px !important;
  background: #06090e !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26),inset 0 8px 20px rgba(0,0,0,.30) !important;
}
.wclPadNowDisplay {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148,163,184,.11);
  border-radius: 10px;
  background: linear-gradient(180deg,#0f1821,#0b1118);
}
.wclPadNowDisplay > span {
  margin-bottom: 4px;
  color: #667386;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .18em;
}
.wclPadNowDisplay > strong, #worshipPadCurrent, [data-wcl-id="worshipPadCurrent"] {
  display: block;
  overflow: hidden;
  color: #e8edf5;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.worshipPadCard .worshipPadHardStopBtn, #mobileWidgetMount .worshipPadHardStopBtn {
  min-width: 64px !important;
  height: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(248,113,113,.28) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg,#5a2328,#3e181d) !important;
  color: #ffd8d8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.22) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
.worshipPadCard .worshipPadHardStopBtn:active, #mobileWidgetMount .worshipPadHardStopBtn:active {
  transform: translateY(1px) scale(.985) !important;
}
.wclPadModeConsole, .wclPadLayerDeck, .wclPadMixerDeck, .wclSeeSawBlock {
  border: 1px solid rgba(148,163,184,.13) !important;
  border-radius: 13px !important;
  background: var(--pad-panel-2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.wclPadModeConsole {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
}
.wclPadConsoleLabel {
  min-width: 0;
  padding-left: 3px;
}
.wclPadConsoleLabel > span, .worshipPadCard .worshipPadControlHead label {
  display: block;
  color: #c9d1dc !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wclPadConsoleLabel > small {
  display: block;
  margin-top: 3px;
  color: #6d7889;
  font-size: 9px;
  line-height: 1.2;
}
.worshipPadCard .worshipPadModeRow {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 10px;
  background: #080c12;
}
.worshipPadCard .worshipPadModeRow button {
  min-width: 68px !important;
  height: 31px !important;
  min-height: 31px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #7f8a9b !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}
.worshipPadCard .worshipPadModeRow button.activeDroneMode, .worshipPadCard .worshipPadModeRow button.activePadLayerMode {
  background: #273142 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 3px 9px rgba(0,0,0,.20) !important;
}
.wclDjKeyGrid, .worshipPadCard .worshipPadGrid, #mobileWidgetMount .worshipPadGrid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.worshipPadCard .droneKeyBtn, #mobileWidgetMount .droneKeyBtn, #mobilePadScreen .droneKeyBtn {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 62px !important;
  min-height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #2d3747 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 35%),
    linear-gradient(180deg,#1a2330,#101720) !important;
  color: #e8edf5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -3px 0 rgba(0,0,0,.24),
    0 4px 9px rgba(0,0,0,.22) !important;
  transform: none !important;
  transition: transform .10s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.worshipPadCard .droneKeyBtn::before, #mobileWidgetMount .droneKeyBtn::before, #mobilePadScreen .droneKeyBtn::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3d4959;
  box-shadow: 0 0 0 2px rgba(0,0,0,.22);
}
.worshipPadCard .droneKeyBtn::after, #mobileWidgetMount .droneKeyBtn::after, #mobilePadScreen .droneKeyBtn::after {
  content: "PAD";
  position: absolute;
  left: 8px;
  bottom: 6px;
  color: #586476;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}
.worshipPadCard .droneKeyBtn span, #mobileWidgetMount .droneKeyBtn span, #mobilePadScreen .droneKeyBtn span {
  position: relative;
  z-index: 1;
  display: block;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.04em;
}
.worshipPadCard .droneKeyBtn:active, #mobileWidgetMount .droneKeyBtn:active, #mobilePadScreen .droneKeyBtn:active {
  transform: translateY(2px) scale(.985) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.32) !important;
}
.worshipPadCard .droneKeyBtn.activeDroneKey, #mobileWidgetMount .droneKeyBtn.activeDroneKey, #mobilePadScreen .droneKeyBtn.activeDroneKey {
  border-color: rgba(243,189,87,.68) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%),
    linear-gradient(180deg,#8d6428,#5b3b15) !important;
  color: #fff7e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(50,29,4,.34),
    0 0 0 1px rgba(243,189,87,.12),
    0 6px 18px rgba(243,189,87,.13) !important;
}
.worshipPadCard .droneKeyBtn.activeDroneKey::before, #mobileWidgetMount .droneKeyBtn.activeDroneKey::before, #mobilePadScreen .droneKeyBtn.activeDroneKey::before {
  background: #ffe3a0;
  box-shadow: 0 0 9px rgba(255,220,132,.75);
}
.worshipPadCard .droneKeyBtn.activeDroneKey::after, #mobileWidgetMount .droneKeyBtn.activeDroneKey::after, #mobilePadScreen .droneKeyBtn.activeDroneKey::after {
  content: "LIVE";
  color: rgba(255,245,220,.72);
}
.worshipPadCard .droneKeyBtn.queuedPadKey, #mobileWidgetMount .droneKeyBtn.queuedPadKey {
  border-color: rgba(167,139,250,.55) !important;
  background: linear-gradient(180deg,#3b3157,#251f3c) !important;
}
.worshipPadCard .droneKeyBtn.queuedPadKey::before, #mobileWidgetMount .droneKeyBtn.queuedPadKey::before {
  background: #b9a3ff;
  box-shadow: 0 0 8px rgba(167,139,250,.62);
}
.worshipPadCard .droneKeyBtn.queuedPadKey::after, #mobileWidgetMount .droneKeyBtn.queuedPadKey::after {
  content: "CUE";
  color: #b9a3ff;
}
.worshipPadCard .droneKeyBtn.fadingOutPadKey, #mobileWidgetMount .droneKeyBtn.fadingOutPadKey {
  opacity: .68 !important;
  border-color: rgba(248,113,113,.42) !important;
}
.wclPadMixerDeck {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px;
}
.wclPadChannel {
  min-width: 0;
  margin: 0 !important;
  padding: 7px 8px 8px !important;
  border: 1px solid rgba(148,163,184,.10) !important;
  border-radius: 10px !important;
  background: #080c12 !important;
}
.worshipPadCard .worshipPadControlHead {
  margin: 0 0 7px !important;
}
.worshipPadCard .worshipPadControlHead span {
  color: var(--pad-accent) !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.worshipPadCard input[type="range"], #mobileWidgetMount .worshipPadCard input[type="range"] {
  width: 100% !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--pad-accent) !important;
}
.wclPadLayerDeck {
  margin: 0 !important;
  padding: 8px !important;
}
.wclPadLayerDeck .padLayerModeRow {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  margin-top: 7px !important;
}
.wclPadLayerDeck .padLayerModeRow button {
  min-width: 0 !important;
}
.worshipPadCard .wclSeeSawBlock, #mobileWidgetMount .wclSeeSawBlock {
  margin: 8px 0 0 !important;
  padding: 8px !important;
}
.worshipPadCard .wclSeeSawHead, #mobileWidgetMount .wclSeeSawHead {
  min-height: 22px !important;
  margin-bottom: 6px !important;
}
.worshipPadCard .wclSeeSawControls, #mobileWidgetMount .wclSeeSawControls {
  gap: 6px !important;
}
.worshipPadCard .wclSeeSawControls label, #mobileWidgetMount .wclSeeSawControls label {
  min-width: 0 !important;
}
.worshipPadCard .wclSeeSawControls select, #mobileWidgetMount .wclSeeSawControls select, .worshipPadCard .wavesToggleBtn, #mobileWidgetMount .wavesToggleBtn {
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 9px !important;
  background: #080c12 !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  box-shadow: none !important;
}
.wclPadNowDeck .worshipPadSwellMeter {
  background: #080c12 !important;
}
.wclPadNowDeck .swellMeterTop {
  margin-bottom: 4px !important;
}
.wclPadNowDeck .swellKeyBars {
  min-height: 25px !important;
  height: 25px !important;
  gap: 3px !important;
  padding: 3px 4px !important;
}
.worshipPadCard .worshipPadRecommendations, .worshipPadCard #padRecommendations, .worshipPadCard [data-wcl-id="padRecommendations"], .worshipPadCard #droneRecommendationBox, .worshipPadCard [data-wcl-id="droneRecommendationBox"], .worshipPadCard .delayTool, .worshipPadCard .worshipPadDelay, .worshipPadCard #delayReadout, .worshipPadCard [data-wcl-id="delayReadout"] {
  display: none !important;
}
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobilePadScreen, body.mobile-view-pad #mobilePadScreen, body.mobileShowPads #mobilePadScreen {
    padding: max(10px,env(safe-area-inset-top,0px))
      10px
      calc(82px + env(safe-area-inset-bottom,0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: radial-gradient(circle at 50% -12%,rgba(243,189,87,.07),transparent 34%),
      #080b11 !important;
  }
  #mobileWidgetMount {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
  }
  #mobileWidgetMount .mobileWidgetClone.worshipPadCard, #mobileWidgetMount .worshipPadCard {
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 11px !important;
    overflow: visible !important;
    border-radius: 18px !important;
  }
  #mobileWidgetMount .worshipPadCard h3 {
    font-size: 17px !important;
  }
  #mobileWidgetMount .wclPadNowDeck {
    margin-bottom: 8px !important;
  }
  #mobileWidgetMount .wclPadModeConsole {
    margin-bottom: 8px !important;
    padding: 7px !important;
  }
  #mobileWidgetMount .wclPadConsoleLabel small {
    display: none !important;
  }
  #mobileWidgetMount .worshipPadGrid {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }
  #mobileWidgetMount .droneKeyBtn {
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 10px !important;
  }
  #mobileWidgetMount .droneKeyBtn span {
    font-size: 19px !important;
  }
  #mobileWidgetMount .wclPadMixerDeck {
    gap: 6px !important;
    margin-bottom: 8px !important;
    padding: 7px !important;
  }
  #mobileWidgetMount .wclPadLayerDeck {
    padding: 7px !important;
  }
  #mobileWidgetMount .wclSeeSawBlock {
    margin-top: 7px !important;
    padding: 7px !important;
  }
  #mobileWidgetMount .wclPadNowDeck .worshipPadSwellMeter {
    max-height: 47px !important;
    overflow: hidden !important;
  }
}
@media(max-width:390px) {
  #mobileWidgetMount .droneKeyBtn {
    height: 54px !important;
    min-height: 54px !important;
  }
  #mobileWidgetMount .wclPadNowDisplay > strong, #mobileWidgetMount [data-wcl-id="worshipPadCurrent"] {
    font-size: 17px !important;
  }
  #mobileWidgetMount .wclPadChannel {
    padding: 6px !important;
  }
}
html[data-theme="light"] .worshipPadCard.wclDjPadDeck, html[data-theme="light"] #mobileWidgetMount .worshipPadCard {
  --pad-shell: #eef1f5;
  --pad-panel: #f7f8fa;
  --pad-panel-2: #e5e9ef;
  --pad-edge: rgba(15,23,42,.17);
  --pad-edge-strong: rgba(15,23,42,.26);
  --pad-ink: #111827;
  --pad-muted: #64748b;
  background: linear-gradient(180deg,rgba(255,255,255,.65),transparent 25%),var(--pad-shell) !important;
  color: #111827 !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.85) !important;
}
html[data-theme="light"] .worshipPadCard.wclDjPadDeck h3, html[data-theme="light"] #mobileWidgetMount .worshipPadCard h3 {
  color: #111827 !important;
}
.wclPadDeckEyebrow {
  display: none !important;
}
.wclPadDeckTop {
  min-height: 34px !important;
  margin-bottom: 8px !important;
}
.wclPadNowDeck {
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
}
.worshipPadCard .worshipPadHardStopBtn.worshipPadStopInline, #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .worshipPadHardStopBtn.worshipPadStopInline {
  width: auto !important;
  min-width: 52px !important;
  height: 30px !important;
  min-height: 30px !important;
  align-self: center !important;
  padding: 0 10px !important;
  gap: 6px !important;
  border: 1px solid rgba(248,113,113,.30) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,rgba(112,38,45,.88),rgba(63,22,28,.94)) !important;
  color: #ffe4e6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 9px rgba(0,0,0,.24) !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
}
.wclPadStopIcon {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  display: inline-block;
  border-radius: 2px;
  background: #ffd4d8;
  box-shadow: 0 0 7px rgba(255,125,139,.30);
}
.wclPadStopLabel {
  display: inline-block;
  line-height: 1;
}
.worshipPadCard .worshipPadHardStopBtn.worshipPadStopInline:hover, #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline:hover {
  border-color: rgba(251,113,133,.48) !important;
  background: linear-gradient(180deg,rgba(130,43,52,.94),rgba(71,24,31,.98)) !important;
}
.wclPadNowDeck .worshipPadSwellMeter {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(103,232,249,.10) !important;
  border-radius: 10px !important;
  background: radial-gradient(circle at 50% 100%,rgba(34,211,238,.08),transparent 58%),
    linear-gradient(180deg,#050a10,#070b12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 -12px 26px rgba(0,0,0,.26) !important;
}
.wclPadNowDeck .swellMeterTop {
  min-height: 10px !important;
  margin: 0 2px 1px !important;
}
.wclPadNowDeck .swellMeterRoute {
  color: #657489 !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
}
.wclVectorEqualizer {
  width: 100%;
  overflow: hidden;
  border-radius: 7px;
}
.wclVectorEqualizer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wclEqGrid line {
  stroke: rgba(100,116,139,.10);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}
.wclEqBaseline {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(34,211,238,.20));
}
.wclEqBar, .wclEqReflectionBar {
  fill: none;
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transition: opacity .25s ease,filter .25s ease;
}
.wclEqBar {
  opacity: .40;
  transform-origin: center bottom;
  transform: scaleY(var(--eq-floor,.48));
}
.wclEqReflectionBar {
  opacity: .08;
  transform-origin: center top;
  transform: scaleY(calc(var(--eq-floor,.48) * .72));
}
.wclEq-cyan {
  stroke: #2ef2e6;
}
.wclEq-blue {
  stroke: #2d8cff;
}
.wclEq-violet {
  stroke: #b251ff;
}
.worshipPadSwellMeter.isActive .wclEqBar {
  opacity: .96;
  filter: drop-shadow(0 0 3px currentColor);
  animation: wclVectorEqRise var(--eq-speed,880ms) ease-in-out infinite alternate;
  animation-delay: var(--eq-delay,0ms);
}
.worshipPadSwellMeter.isActive .wclEqReflectionBar {
  opacity: .20;
  animation: wclVectorEqReflect var(--eq-speed,880ms) ease-in-out infinite alternate;
  animation-delay: var(--eq-delay,0ms);
}
@keyframes wclVectorEqRise {
  0% {
    transform: scaleY(var(--eq-floor,.48));
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes wclVectorEqReflect {
  0% {
    transform: scaleY(calc(var(--eq-floor,.48) * .55));
    opacity: .07;
  }
  100% {
    transform: scaleY(.88);
    opacity: .22;
  }
}
.wclPadNowDeck .swellKeyBars, .wclPadNowDeck [data-swell-key-bars] {
  display: none !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .wclPadDeckTop {
    min-height: 31px !important;
    margin-bottom: 7px !important;
  }
  #mobileWidgetMount .wclPadNowDeck {
    gap: 6px !important;
    padding: 6px !important;
  }
}
@media(max-width:360px) {
  .worshipPadCard .worshipPadHardStopBtn.worshipPadStopInline, #mobileWidgetMount .worshipPadHardStopBtn.worshipPadStopInline {
    min-width: 46px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    gap: 5px !important;
  }
  .wclPadStopIcon {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }
}
html[data-theme="light"] .wclPadNowDeck .worshipPadSwellMeter {
  border-color: rgba(15,23,42,.18) !important;
  background: radial-gradient(circle at 50% 100%,rgba(34,211,238,.10),transparent 58%),
    linear-gradient(180deg,#111827,#0b1220) !important;
}
.wclPadDeckTop {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.wclPadDeckActions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
}
.wclPadDeckActions .worshipPadHardStopBtn.worshipPadStopInline {
  order: 1 !important;
  width: auto !important;
  min-width: 45px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  gap: 5px !important;
  margin: 0 !important;
  font-size: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09),0 2px 6px rgba(0,0,0,.20) !important;
}
.wclPadDeckActions .worshipPadLiveBadge {
  order: 2 !important;
  margin: 0 !important;
}
.wclPadDeckActions .wclPadStopIcon {
  width: 6px !important;
  height: 6px !important;
  flex-basis: 6px !important;
  border-radius: 1.5px !important;
}
.wclPadNowDeck {
  display: block !important;
  padding: 7px !important;
}
.wclPadNowDisplay {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  align-content: center !important;
  gap: 2px !important;
}
.wclPadTransitionStatus {
  display: block !important;
  min-width: 0 !important;
  margin-top: 1px !important;
  overflow: hidden !important;
  color: #7f8da2 !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .035em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.wclPadTransitionStatus.isTransitioning {
  color: #67e8f9 !important;
  text-shadow: 0 0 8px rgba(34,211,238,.18) !important;
}
.wclEqBaseline {
  display: none !important;
  stroke: none !important;
}
.wclPadNowDeck .swellMeterTop, .wclPadNowDeck .swellMeterRoute {
  display: none !important;
}
.wclPadNowDeck .worshipPadSwellMeter {
  min-height: 54px !important;
  padding: 4px 7px 5px !important;
}
.wclVectorEqualizer {
  height: 44px !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .wclPadDeckActions {
    gap: 5px !important;
  }
  #mobileWidgetMount .wclPadDeckActions .worshipPadHardStopBtn.worshipPadStopInline {
    min-width: 42px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 7px !important;
  }
  #mobileWidgetMount .wclPadNowDisplay {
    min-height: 46px !important;
  }
  #mobileWidgetMount .wclPadTransitionStatus {
    font-size: 7.5px !important;
  }
  #mobileWidgetMount .wclPadNowDeck .worshipPadSwellMeter {
    min-height: 51px !important;
    padding: 3px 6px 4px !important;
  }
  #mobileWidgetMount .wclVectorEqualizer {
    height: 42px !important;
  }
}
html[data-theme="light"] .wclPadTransitionStatus {
  color: #64748b !important;
}
html[data-theme="light"] .wclPadTransitionStatus.isTransitioning {
  color: #0369a1 !important;
  text-shadow: none !important;
}
.wclPadDeckActions {
  gap: 10px !important;
  overflow: visible !important;
}
.wclPadDeckActions .worshipPadHardStopBtn.worshipPadStopInline {
  position: relative !important;
  z-index: 1 !important;
  transform: translate(-8px,-3px) !important;
  margin-right: 2px !important;
}
.wclPadDeckActions .worshipPadLiveBadge {
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
}
.wclPadNowDisplay {
  min-height: 48px !important;
  padding: 8px 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.wclPadNowDisplay > span, .wclPadNowDisplay > small:not(.wclPadTransitionPrimary) {
  display: none !important;
}
.wclPadTransitionStatus.wclPadTransitionPrimary, .wclPadNowDisplay > strong[data-pad-transition-status] {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #dbe7f5 !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: .015em !important;
  white-space: normal !important;
  text-overflow: clip !important;
}
.wclPadTransitionStatus.wclPadTransitionPrimary.isTransitioning, .wclPadNowDisplay > strong[data-pad-transition-status].isTransitioning {
  color: #67e8f9 !important;
  text-shadow: 0 0 10px rgba(34,211,238,.20) !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .wclPadDeckActions, #mobilePadScreen .wclPadDeckActions {
    gap: 9px !important;
  }
  #mobileWidgetMount .wclPadDeckActions .worshipPadHardStopBtn.worshipPadStopInline, #mobilePadScreen .wclPadDeckActions .worshipPadHardStopBtn.worshipPadStopInline {
    transform: translate(-7px,-3px) !important;
    margin-right: 1px !important;
  }
  #mobileWidgetMount .wclPadTransitionStatus.wclPadTransitionPrimary, #mobilePadScreen .wclPadTransitionStatus.wclPadTransitionPrimary {
    font-size: 10px !important;
    line-height: 1.32 !important;
  }
}
html[data-theme="light"] .wclPadTransitionStatus.wclPadTransitionPrimary {
  color: #334155 !important;
}
html[data-theme="light"] .wclPadTransitionStatus.wclPadTransitionPrimary.isTransitioning {
  color: #0369a1 !important;
  text-shadow: none !important;
}
.worshipPadCard.wclPadRebuild {
  --pad-bg: #0a1018;
  --pad-panel: #101823;
  --pad-panel-2: #131e2c;
  --pad-border: #263447;
  --pad-text: #f5f7fb;
  --pad-muted: #7f8da3;
  --pad-cyan: #36d7e8;
  --pad-blue: #5f7cff;
  --pad-violet: #9a63ff;
  --pad-amber: #f2b84b;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  margin: 0 0 12px !important;
  overflow: visible !important;
  border: 1px solid var(--pad-border) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%),
    var(--pad-bg) !important;
  color: var(--pad-text) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.28) !important;
  isolation: isolate !important;
}
.worshipPadCard.wclPadRebuild::before, .worshipPadCard.wclPadRebuild::after {
  content: none !important;
  display: none !important;
}
.worshipPadCard.wclPadRebuild > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}
.wclPadRebuildHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wclPadRebuildHeader .wclPadDeckIdentity {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.wclPadRebuildHeader h3 {
  margin: 0 !important;
  color: var(--pad-text) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.wclPadPowerModule {
  position: static !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 104px !important;
  height: 34px !important;
  padding: 3px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #2b394c !important;
  border-radius: 999px !important;
  background: #0d1520 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transform: none !important;
}
.wclPadPowerModule .worshipPadHardStopBtn.worshipPadStopInline, .wclPadPowerModule .wclPadPowerStop {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 60px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #472028 !important;
  color: #ffdce1 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}
.wclPadPowerModule .wclPadStopIcon {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  box-shadow: none !important;
}
.wclPadPowerModule .wclPadPowerState, .wclPadPowerModule .worshipPadLiveBadge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 38px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #718096 !important;
  box-shadow: none !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}
.wclPadPowerModule .worshipPadLiveBadge.on {
  background: linear-gradient(135deg,#21b978,#6d68e8) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(74,214,169,.22) !important;
}
.wclPadPowerModule .worshipPadLiveBadge::before, .wclPadPowerModule .worshipPadLiveBadge::after {
  content: none !important;
  display: none !important;
}
.wclPadRebuildStatus {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 11px !important;
  overflow: hidden !important;
  border: 1px solid #233146 !important;
  border-radius: 15px !important;
  background: #08111a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.wclPadStatusHeader {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 12px !important;
  color: #718096 !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .18em !important;
}
.wclPadStatusHeader i {
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #3d4b61 !important;
}
.wclPadRebuildStatus:has(.wclPadStatusText.isTransitioning) .wclPadStatusHeader i {
  background: var(--pad-cyan) !important;
  box-shadow: 0 0 9px rgba(54,215,232,.75) !important;
}
.wclPadStatusText, .wclPadRebuild [data-pad-transition-status] {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #dce7f5 !important;
  background: transparent !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: .015em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  clip: auto !important;
  transform: none !important;
}
.wclPadStatusText.isTransitioning, .wclPadRebuild [data-pad-transition-status].isTransitioning {
  color: #67e8f9 !important;
  text-shadow: 0 0 12px rgba(54,215,232,.18) !important;
}
.wclPadRebuildEqualizer, .wclPadRebuild .worshipPadSwellMeter {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #071019 !important;
}
.wclPadRebuild .wclVectorEqualizer {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.wclPadRebuild .wclVectorEqualizer svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.wclPadRebuildBank {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 144px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid var(--pad-border) !important;
  border-radius: 14px !important;
  background: var(--pad-panel) !important;
}
.wclPadRebuild .wclPadConsoleLabel span, .wclPadRebuild .worshipPadControlHead label {
  color: #c7d0dd !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
.wclPadRebuild .wclPadConsoleLabel small {
  display: block !important;
  margin-top: 4px !important;
  color: var(--pad-muted) !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
}
.wclPadRebuild .worshipPadModeRow {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: 3px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid #273448 !important;
  border-radius: 11px !important;
  background: #09111a !important;
}
.wclPadRebuild .worshipPadModeRow button {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #7f8da3 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}
.wclPadRebuild .worshipPadModeRow button.activeDroneMode, .wclPadRebuild .worshipPadModeRow button.activePadLayerMode {
  background: #29364a !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.wclPadRebuildGrid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wclPadRebuildGrid .droneKeyBtn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1.18 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #314055 !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.035),transparent 36%),
    #141e2b !important;
  color: #edf3fb !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
    0 2px 0 #070b11 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  transform: none !important;
}
.wclPadRebuildGrid .droneKeyBtn::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #4c5b70 !important;
  box-shadow: none !important;
}
.wclPadRebuildGrid .droneKeyBtn::after {
  content: "PAD" !important;
  position: absolute !important;
  left: 8px !important;
  bottom: 6px !important;
  color: #59677b !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 6px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
}
.wclPadRebuildGrid .droneKeyBtn.activeDroneKey {
  border-color: #e78b2f !important;
  background: linear-gradient(180deg,#b55317,#8d3513) !important;
  color: #fff5e9 !important;
  box-shadow: inset 0 0 0 2px rgba(255,187,87,.18),
    0 0 18px rgba(230,111,30,.22) !important;
}
.wclPadRebuildGrid .droneKeyBtn.activeDroneKey::before {
  background: #ffd27d !important;
  box-shadow: 0 0 8px rgba(255,210,125,.75) !important;
}
.wclPadRebuildGrid .droneKeyBtn.queuedPadKey, .wclPadRebuildGrid .droneKeyBtn.lastSelectedPadKey {
  border-color: #9468ff !important;
  background: #29223b !important;
}
.wclPadRebuildGrid .droneKeyBtn.queuedPadKey::before, .wclPadRebuildGrid .droneKeyBtn.lastSelectedPadKey::before {
  background: #b99aff !important;
  box-shadow: 0 0 8px rgba(185,154,255,.65) !important;
}
.wclPadRebuildGrid .droneKeyBtn.queuedPadKey::after, .wclPadRebuildGrid .droneKeyBtn.lastSelectedPadKey::after {
  content: "CUE" !important;
  color: #b99aff !important;
}
.wclPadRebuildGrid .droneKeyBtn.fadingOutPadKey {
  opacity: .58 !important;
  filter: saturate(.65) !important;
}
.wclPadRebuildMixer {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid var(--pad-border) !important;
  border-radius: 14px !important;
  background: var(--pad-panel) !important;
}
.wclPadRebuildMixer .wclPadChannel {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid #202c3d !important;
  border-radius: 10px !important;
  background: #0b131d !important;
}
.wclPadRebuild .worshipPadControlHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 8px !important;
}
.wclPadRebuild .worshipPadControlHead span {
  color: #f6c64c !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 8px !important;
  font-weight: 850 !important;
}
.wclPadRebuildDeckMode {
  display: block !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 1px solid var(--pad-border) !important;
  border-radius: 14px !important;
  background: var(--pad-panel) !important;
}
.wclPadRebuildDeckMode .worshipPadControlHead.mini {
  margin-bottom: 7px !important;
}
.wclPadRebuildDeckMode .padLayerModeRow {
  grid-template-columns: repeat(3,1fr) !important;
}
.wclPadRebuild .worshipPadRecommendations, .wclPadRebuild #padRecommendations, .wclPadRebuild [data-wcl-id="padRecommendations"], .wclPadRebuild #droneRecommendationBox, .wclPadRebuild [data-wcl-id="droneRecommendationBox"], .wclPadRebuild .delayTool, .wclPadRebuild .worshipPadDelay, .wclPadRebuild #delayReadout, .wclPadRebuild [data-wcl-id="delayReadout"] {
  display: none !important;
}
@media(max-width:900px) {
  #mobileWidgetMount .worshipPadCard.wclPadRebuild, #mobilePadScreen .worshipPadCard.wclPadRebuild, .mobilePadScreen .worshipPadCard.wclPadRebuild {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    gap: 9px !important;
    overflow: visible !important;
  }
  #mobileWidgetMount .wclPadRebuildHeader h3, #mobilePadScreen .wclPadRebuildHeader h3 {
    font-size: 18px !important;
  }
  #mobileWidgetMount .wclPadPowerModule, #mobilePadScreen .wclPadPowerModule {
    min-width: 102px !important;
    height: 33px !important;
  }
  #mobileWidgetMount .wclPadRebuildStatus, #mobilePadScreen .wclPadRebuildStatus {
    min-height: 108px !important;
    padding: 10px !important;
  }
  #mobileWidgetMount .wclPadStatusText, #mobilePadScreen .wclPadStatusText, #mobileWidgetMount .wclPadRebuild [data-pad-transition-status], #mobilePadScreen .wclPadRebuild [data-pad-transition-status] {
    min-height: 28px !important;
    font-size: 10.5px !important;
  }
  #mobileWidgetMount .wclPadRebuildBank, #mobilePadScreen .wclPadRebuildBank {
    grid-template-columns: minmax(0,1fr) 144px !important;
  }
  #mobileWidgetMount .wclPadRebuildGrid .droneKeyBtn, #mobilePadScreen .wclPadRebuildGrid .droneKeyBtn {
    min-height: 58px !important;
    font-size: 17px !important;
  }
}
html[data-theme="light"] body:not(.performance) .worshipPadCard.wclPadRebuild {
  --pad-bg: #f7f9fc;
  --pad-panel: #eef2f7;
  --pad-panel-2: #e7edf5;
  --pad-border: #cbd5e1;
  --pad-text: #172033;
  --pad-muted: #64748b;
  background: #f7f9fc !important;
  color: #172033 !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.12) !important;
}
html[data-theme="light"] body:not(.performance) .wclPadRebuildHeader h3 {
  color: #172033 !important;
}
html[data-theme="light"] body:not(.performance) .wclPadRebuildStatus, html[data-theme="light"] body:not(.performance) .wclPadRebuildEqualizer, html[data-theme="light"] body:not(.performance) .wclPadRebuild .worshipPadSwellMeter {
  background: #e8eef6 !important;
}
html[data-theme="light"] body:not(.performance) .wclPadStatusText, html[data-theme="light"] body:not(.performance) .wclPadRebuild [data-pad-transition-status] {
  color: #26354a !important;
}
html[data-theme="light"] body:not(.performance) .wclPadRebuildGrid .droneKeyBtn {
  background: #e8eef6 !important;
  color: #26354a !important;
  border-color: #c5d0df !important;
  box-shadow: 0 2px 0 #c3cedd !important;
}
.wclPadRebuildGrid .droneKeyBtn.queuedPadKey::after, .wclPadRebuildGrid .droneKeyBtn.lastSelectedPadKey::after, .wclPadRebuildGrid .droneKeyBtn.activeDroneKey::after {
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: 8px !important;
  bottom: 6px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.wclPadRebuild .wclPadPowerModule {
  column-gap: 4px !important;
  min-width: 108px !important;
}
.wclPadRebuild input[type="range"] {
  --wcl-range-fill: 50%;
  --wcl-range-active: #7568d6;
  --wcl-range-rest: #344155;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(
      90deg,
      var(--wcl-range-active) 0%,
      var(--wcl-range-active) var(--wcl-range-fill),
      var(--wcl-range-rest) var(--wcl-range-fill),
      var(--wcl-range-rest) 100%
    ) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  accent-color: var(--wcl-range-active) !important;
}
.wclPadRebuild input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.wclPadRebuild input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -5.5px !important;
  border: 2px solid #0b131d !important;
  border-radius: 50% !important;
  background: var(--wcl-range-active) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
}
.wclPadRebuild input[type="range"]::-moz-range-track {
  width: 100% !important;
  height: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wcl-range-rest) !important;
  box-shadow: none !important;
}
.wclPadRebuild input[type="range"]::-moz-range-progress {
  height: 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wcl-range-active) !important;
}
.wclPadRebuild input[type="range"]::-moz-range-thumb {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #0b131d !important;
  border-radius: 50% !important;
  background: var(--wcl-range-active) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
}
.wclPadRebuild input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 2px 7px rgba(0,0,0,.32),
    0 0 0 3px rgba(117,104,214,.24) !important;
}
html[data-theme="light"] body:not(.performance) .wclPadRebuild input[type="range"] {
  --wcl-range-active: #7568d6;
  --wcl-range-rest: #dbe3ec;
}
html[data-theme="light"] body:not(.performance) .wclPadRebuild input[type="range"]::-webkit-slider-thumb, html[data-theme="light"] body:not(.performance) .wclPadRebuild input[type="range"]::-moz-range-thumb {
  border-color: #f8fafc !important;
}
@media(min-width:901px) {
  .wclPadRebuild input[type="range"] {
    height: 14px !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        var(--wcl-range-active) 0%,
        var(--wcl-range-active) var(--wcl-range-fill),
        var(--wcl-range-rest) var(--wcl-range-fill),
        var(--wcl-range-rest) 100%
      )
      center / 100% 5px no-repeat !important;
  }
  .wclPadRebuild input[type="range"]::-webkit-slider-runnable-track {
    height: 5px !important;
  }
  .wclPadRebuild input[type="range"]::-webkit-slider-thumb {
    width: 14px !important;
    height: 14px !important;
    margin-top: -4.5px !important;
    border-width: 2px !important;
  }
  .wclPadRebuild input[type="range"]::-moz-range-track, .wclPadRebuild input[type="range"]::-moz-range-progress {
    height: 5px !important;
  }
  .wclPadRebuild input[type="range"]::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;
    border-width: 2px !important;
  }
}
@media(max-width:900px) {
  body.mobile-view-pad .desktopAppBar, body.mobile-view-pad .topbar, body.mobile-view-pad .contentArea, body.mobile-view-pad .sidebar, body.mobile-view-pad #mobileToolsScreen, body.mobile-view-pad .mobileToolsScreen, body.mobile-view-pad .wclYoutubePlayer, body.mobile-view-pad .wclTunerPanel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.mobile-view-pad, body.mobile-view-pad .app, body.mobile-view-pad .main {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #080b11 !important;
  }
  body.mobile-view-pad #mobilePadScreen {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: none !important;
    background: radial-gradient(circle at 50% -12%,rgba(243,189,87,.07),transparent 34%),
      #080b11 !important;
  }
  body.mobile-view-pad #mobileWidgetMount .worshipPadCard.wclPadRebuild, body.mobile-view-pad #mobilePadScreen .worshipPadCard.wclPadRebuild {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }
}
.mobileBottomNav .wclPadNavButton, .mobileBottomNav [data-mobile-view="pad"] {
  position: relative !important;
}
.mobileBottomNav .wclPadNavButton.padAudioActive::after, .mobileBottomNav [data-mobile-view="pad"].padAudioActive::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18),
    0 0 14px rgba(34,197,94,.58);
  pointer-events: none;
}
@media(max-width:900px) {
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuildHeader, body.mobile-view-pad #mobilePadScreen .wclPadRebuildHeader {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadDeckIdentity, body.mobile-view-pad #mobilePadScreen .wclPadDeckIdentity {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuildHeader h3, body.mobile-view-pad #mobilePadScreen .wclPadRebuildHeader h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--pad-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.025em !important;
    text-transform: none !important;
    transform: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule {
    position: static !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 4px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 108px !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid #2b394c !important;
    border-radius: 999px !important;
    background: #0d1520 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    transform: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .wclPadPowerStop, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .wclPadPowerStop, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .worshipPadHardStopBtn, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .worshipPadHardStopBtn {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 60px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #472028 !important;
    color: #ffdce1 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .wclPadPowerState, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .wclPadPowerState, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .worshipPadLiveBadge, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .worshipPadLiveBadge {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 38px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #718096 !important;
    box-shadow: none !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    transform: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .worshipPadLiveBadge.on, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .worshipPadLiveBadge.on {
    background: linear-gradient(135deg,#21b978,#6d68e8) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(74,214,169,.22) !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"], body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        var(--wcl-range-active) 0%,
        var(--wcl-range-active) var(--wcl-range-fill),
        var(--wcl-range-rest) var(--wcl-range-fill),
        var(--wcl-range-rest) 100%
      )
      center / 100% 5px no-repeat !important;
    box-shadow: none !important;
    cursor: ew-resize !important;
    pointer-events: auto !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"]::-webkit-slider-runnable-track, body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"]::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"]::-webkit-slider-thumb, body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -5.5px !important;
    border: 2px solid #0b131d !important;
    border-radius: 50% !important;
    background: var(--wcl-range-active) !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"]::-moz-range-track, body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"]::-moz-range-track, body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"]::-moz-range-progress, body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"]::-moz-range-progress {
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
  }
  body.mobile-view-pad #mobileWidgetMount .wclPadRebuild input[type="range"]::-moz-range-thumb, body.mobile-view-pad #mobilePadScreen .wclPadRebuild input[type="range"]::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #0b131d !important;
    border-radius: 50% !important;
    background: var(--wcl-range-active) !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
  }
}
.wclPadPowerModule, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule {
  position: static !important;
  inset: auto !important;
  direction: ltr !important;
  display: grid !important;
  grid-template-columns: 52px 52px !important;
  grid-template-rows: 28px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 4px !important;
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid #2b394c !important;
  border-radius: 999px !important;
  background: #0d1520 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transform: none !important;
}
.wclPadPowerModule .wclPadPowerStop, .wclPadPowerModule .worshipPadHardStopBtn, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .wclPadPowerStop, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .wclPadPowerStop {
  order: 1 !important;
  grid-column: 1 !important;
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #472028 !important;
  color: #ffdce1 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
}
.wclPadPowerModule .wclPadPowerState, .wclPadPowerModule .worshipPadLiveBadge, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .wclPadPowerState, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .wclPadPowerState {
  order: 2 !important;
  grid-column: 2 !important;
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111b28 !important;
  color: #718096 !important;
  box-shadow: none !important;
  transform: none !important;
  white-space: nowrap !important;
}
.wclPadPowerModule .worshipPadLiveBadge.on, body.mobile-view-pad #mobileWidgetMount .wclPadPowerModule .worshipPadLiveBadge.on, body.mobile-view-pad #mobilePadScreen .wclPadPowerModule .worshipPadLiveBadge.on {
  background: linear-gradient(135deg,#21b978,#6d68e8) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(74,214,169,.22) !important;
}
@media(max-width:900px) {
  body.mobile-view-pad #mobilePadScreen {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147482000 !important;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: max(8px,env(safe-area-inset-top,0px))
      9px
      calc(88px + env(safe-area-inset-bottom,0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: radial-gradient(circle at 50% -10%,rgba(125,104,214,.09),transparent 32%),
      #080c12 !important;
  }
  body.mobile-view-pad #mobileWidgetMount {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #mobilePadScreen .wclMobilePadV7, #mobilePadScreen .wclMobilePadV7 * {
    box-sizing: border-box !important;
  }
  #mobilePadScreen .wclMobilePadV7 {
    --mp-bg: #0b1119;
    --mp-panel: #101925;
    --mp-panel-2: #0c141f;
    --mp-border: #2a394d;
    --mp-text: #f5f7fb;
    --mp-muted: #78869b;
    --mp-purple: #7868dc;
    --mp-purple-soft: #312b51;
    --mp-green: #2cb67d;
    --mp-red: #5c252e;
    --mp-track: #38465a;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%),
      var(--mp-bg) !important;
    color: var(--mp-text) !important;
    font-family: Inter,Segoe UI,Arial,sans-serif !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.26) !important;
    isolation: isolate !important;
  }
  #mobilePadScreen .wclMobilePadV7 button, #mobilePadScreen .wclMobilePadV7 input, #mobilePadScreen .wclMobilePadV7 select {
    font: inherit !important;
  }
  #mobilePadScreen .wclMobilePadHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobilePadScreen .wclMobilePadTitle {
    margin: 0 !important;
    color: var(--mp-text) !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
  }
  #mobilePadScreen .wclMobilePadPower {
    display: grid !important;
    grid-template-columns: 54px 54px !important;
    grid-template-rows: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    width: 118px !important;
    min-width: 118px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid #304057 !important;
    border-radius: 999px !important;
    background: #0c1520 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
  #mobilePadScreen .wclMobilePadStop, #mobilePadScreen .wclMobilePadState {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
  }
  #mobilePadScreen .wclMobilePadStop {
    order: 1 !important;
    grid-column: 1 !important;
    background: var(--mp-red) !important;
    color: #ffe0e5 !important;
    cursor: pointer !important;
  }
  #mobilePadScreen .wclMobilePadStopIcon {
    display: block !important;
    border-radius: 2px !important;
    background: currentColor !important;
  }
  #mobilePadScreen .wclMobilePadState {
    order: 2 !important;
    grid-column: 2 !important;
    background: #111c29 !important;
    color: #718096 !important;
    letter-spacing: .08em !important;
  }
  #mobilePadScreen .wclMobilePadState.on {
    background: var(--mp-green) !important;
    color: #fff !important;
    box-shadow: 0 0 13px rgba(44,182,125,.25) !important;
  }
  #mobilePadScreen .wclMobilePadStatus {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-height: 126px !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 15px !important;
    background: #0c1724 !important;
  }
  #mobilePadScreen .wclMobilePadStatusHead {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #7c8aa0 !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .17em !important;
  }
  #mobilePadScreen .wclMobilePadStatusHead i {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #415067 !important;
  }
  #mobilePadScreen .wclMobilePadStatus:has([data-pad-transition-status].isTransitioning) .wclMobilePadStatusHead i {
    background: #47dbe6 !important;
    box-shadow: 0 0 9px rgba(71,219,230,.7) !important;
  }
  #mobilePadScreen .wclMobilePadStatusText, #mobilePadScreen .wclMobilePadV7 [data-pad-transition-status] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #e2eaf5 !important;
    background: transparent !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #mobilePadScreen .wclMobilePadV7 [data-pad-transition-status].isTransitioning {
    color: #67e8f9 !important;
  }
  #mobilePadScreen .wclMobilePadMeter, #mobilePadScreen .wclMobilePadMeter.worshipPadSwellMeter {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #09131e !important;
  }
  #mobilePadScreen .wclMobilePadMeter .wclVectorEqualizer, #mobilePadScreen .wclMobilePadMeter svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  #mobilePadScreen .wclMobilePadModule {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 14px !important;
    background: var(--mp-panel) !important;
  }
  #mobilePadScreen .wclMobilePadModuleHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
  }
  #mobilePadScreen .wclMobilePadModuleHead strong, #mobilePadScreen .wclMobilePadFieldLabel {
    color: #cbd4e0 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
  }
  #mobilePadScreen .wclMobilePadModuleHead span {
    color: #f1c84b !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 8px !important;
    font-weight: 850 !important;
  }
  #mobilePadScreen .wclMobilePadSegment {
    display: grid !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    border: 1px solid #2b3b51 !important;
    border-radius: 11px !important;
    background: #09121c !important;
  }
  #mobilePadScreen .wclMobilePadSegment.two {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  #mobilePadScreen .wclMobilePadSegment.three {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  #mobilePadScreen .wclMobilePadSegment button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #8592a6 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  #mobilePadScreen .wclMobilePadSegment button.activeDroneMode, #mobilePadScreen .wclMobilePadSegment button.activePadLayerMode {
    background: #304059 !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  #mobilePadScreen .wclMobilePadHarmony {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 145px !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #mobilePadScreen .wclMobilePadHarmonyCopy small {
    display: block !important;
    margin-top: 4px !important;
    color: var(--mp-muted) !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
  #mobilePadScreen .wclMobilePadGrid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #304056 !important;
    border-radius: 10px !important;
    background: #14202e !important;
    color: #edf3fb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transform: none !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn::before {
    content: "" !important;
    position: absolute !important;
    top: 7px !important;
    right: 7px !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #516079 !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn::after {
    content: "PAD" !important;
    position: absolute !important;
    left: 7px !important;
    bottom: 5px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: #647389 !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 5.5px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    box-shadow: none !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.activeDroneKey {
    border-color: #e1872d !important;
    background: #9a3d16 !important;
    color: #fff4e6 !important;
    box-shadow: inset 0 0 0 2px rgba(255,190,100,.16),0 0 16px rgba(225,112,39,.18) !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.queuedPadKey, #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey {
    border-color: #936fff !important;
    background: #2b2341 !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.queuedPadKey::after, #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::after {
    content: "CUE" !important;
    color: #b99aff !important;
  }
  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn.fadingOutPadKey {
    opacity: .58 !important;
  }
  #mobilePadScreen .wclMobilePadMixer {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  #mobilePadScreen .wclMobilePadChannel {
    min-width: 0 !important;
    padding: 8px !important;
    border: 1px solid #223044 !important;
    border-radius: 10px !important;
    background: #0b141f !important;
  }
  #mobilePadScreen .wclMobilePadRange {
    --wcl-range-fill: 50%;
    --wcl-range-active: #7868dc;
    --wcl-range-rest: #38465a;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        var(--wcl-range-active) 0%,
        var(--wcl-range-active) var(--wcl-range-fill),
        var(--wcl-range-rest) var(--wcl-range-fill),
        var(--wcl-range-rest) 100%
      )
      center / 100% 5px no-repeat !important;
    box-shadow: none !important;
    cursor: ew-resize !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }
  #mobilePadScreen .wclMobilePadRange::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
  }
  #mobilePadScreen .wclMobilePadRange::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -5.5px !important;
    border: 2px solid #0b141f !important;
    border-radius: 50% !important;
    background: #7868dc !important;
    box-shadow: 0 2px 7px rgba(0,0,0,.32) !important;
  }
  #mobilePadScreen .wclMobilePadRange::-moz-range-track, #mobilePadScreen .wclMobilePadRange::-moz-range-progress {
    height: 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
  }
  #mobilePadScreen .wclMobilePadRange::-moz-range-track {
    background: #38465a !important;
  }
  #mobilePadScreen .wclMobilePadRange::-moz-range-progress {
    background: #7868dc !important;
  }
  #mobilePadScreen .wclMobilePadRange::-moz-range-thumb {
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #0b141f !important;
    border-radius: 50% !important;
    background: #7868dc !important;
  }
  #mobilePadScreen .wclMobilePadWaves {
    display: block !important;
  }
  #mobilePadScreen .wclMobilePadWavesHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  #mobilePadScreen .wclMobilePadWaveIcon {
    display: block !important;
    width: 34px !important;
    height: 16px !important;
  }
  #mobilePadScreen .wclMobilePadWaveIcon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    fill: none !important;
    stroke: #7ebcff !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
  }
  #mobilePadScreen .wclMobilePadWavesControls {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px !important;
    gap: 7px !important;
    align-items: end !important;
  }
  #mobilePadScreen .wclMobilePadWavesControls label {
    display: block !important;
    min-width: 0 !important;
    color: #8190a5 !important;
    font-size: 8px !important;
    font-weight: 800 !important;
  }
  #mobilePadScreen .wclMobilePadWavesControls select {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    margin-top: 5px !important;
    padding: 0 9px !important;
    border: 1px solid #27364a !important;
    border-radius: 10px !important;
    background: #09121c !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  #mobilePadScreen .wclMobilePadWaveToggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #27364a !important;
    border-radius: 10px !important;
    background: #09121c !important;
    color: #9bc8ff !important;
    box-shadow: none !important;
  }
  #mobilePadScreen .wclMobilePadWaveToggle.activeSeeSaw, #mobilePadScreen .wclMobilePadWaveToggle.activeWaves {
    border-color: #7868dc !important;
    background: #2b2341 !important;
    color: #fff !important;
  }
  body.mobile-view-pad .mobileBottomNav {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
  }
}
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadStop {
    gap: 4px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: .015em !important;
  }
  #mobilePadScreen .wclMobilePadStopIcon {
    width: 5px !important;
    min-width: 5px !important;
    height: 5px !important;
  }
  #mobilePadScreen .wclMobilePadState {
    font-size: 8px !important;
  }
}
@media(min-width:901px) {
  .worshipPadCard.wclPadRebuild .wclPadPowerModule {
    position: static !important;
    inset: auto !important;
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: 54px 54px !important;
    grid-template-rows: 28px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px !important;
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 3px !important;
    overflow: hidden !important;
    border: 1px solid #2b394c !important;
    border-radius: 999px !important;
    background: #0d1520 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    transform: none !important;
  }
  .worshipPadCard.wclPadRebuild .wclPadPowerModule .wclPadPowerStop, .worshipPadCard.wclPadRebuild .wclPadPowerModule .worshipPadHardStopBtn {
    order: 1 !important;
    grid-column: 1 !important;
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #472028 !important;
    color: #ffdce1 !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: nowrap !important;
    font-size: 8.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .015em !important;
  }
  .worshipPadCard.wclPadRebuild .wclPadPowerModule .wclPadPowerState, .worshipPadCard.wclPadRebuild .wclPadPowerModule .worshipPadLiveBadge {
    order: 2 !important;
    grid-column: 2 !important;
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #111b28 !important;
    color: #718096 !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: nowrap !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
  }
  .worshipPadCard.wclPadRebuild .wclPadPowerModule .worshipPadLiveBadge.on {
    background: linear-gradient(135deg,#21b978,#6d68e8) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(74,214,169,.22) !important;
  }
  .worshipPadCard.wclPadRebuild .wclPadPowerModule .wclPadStopIcon {
    width: 5px !important;
    min-width: 5px !important;
    height: 5px !important;
  }
}
#songList .songSetToggleWrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#songList .songSetToggleBtn, #songList .songFolderStar {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: Inter,Segoe UI,Arial,sans-serif !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: transform .12s ease, color .12s ease, opacity .12s ease !important;
}
#songList .songSetToggleBtn > span, #songList .songFolderStar > span {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: 1 !important;
  color: inherit !important;
  transform: translateY(-1px) !important;
}
#songList .songSetToggleBtn.isAvailable, #songList .songFolderStar.isAvailable {
  color: #50C878 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#songList .songSetToggleBtn.isAdded, #songList .songFolderStar.isAdded {
  color: #FF746C !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#songList .songSetToggleBtn:hover, #songList .songSetToggleBtn:focus-visible, #songList .songFolderStar:hover, #songList .songFolderStar:focus-visible {
  transform: scale(1.13) !important;
  opacity: 1 !important;
  filter: brightness(1.15) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#songList .songSetToggleBtn:active, #songList .songFolderStar:active {
  transform: scale(.88) !important;
}
#songList .songMore, #songList .songMenu, #songList .songMenuCombinedSetAction {
  display: none !important;
}
@media(max-width:900px) {
  body.is-mobile-device #songList .songSetToggleWrap, body.mobile-view-songs #songList .songSetToggleWrap {
    width: 24px !important;
    min-width: 24px !important;
    height: 26px !important;
  }
  body.is-mobile-device #songList .songSetToggleBtn, body.mobile-view-songs #songList .songSetToggleBtn, body.is-mobile-device #songList .songFolderStar, body.mobile-view-songs #songList .songFolderStar {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    font-size: 21px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
:root {
  --wcl-sheet-width: 920px;
  --wcl-sheet-wide-width: 1180px;
  --wcl-sheet-bg: #fffdf9;
  --wcl-sheet-ink: #172033;
  --wcl-sheet-muted: #64748b;
  --wcl-sheet-border: rgba(15,23,42,.085);
}
body:not(.wcl-no-song) .topbar .controls > .wclSecondaryChartControl {
  display: none !important;
}
body:not(.wcl-no-song) .topbar .controls {
  align-items: center !important;
}
body:not(.wcl-no-song) .topbar .controls > .iconBtn, body:not(.wcl-no-song) .topbar .controls > #keySelect, body:not(.wcl-no-song) .topbar .controls > #capoSelect, body:not(.wcl-no-song) .topbar .controls > #chartFocusBtn, body:not(.wcl-no-song) .topbar .controls > .mobileAutoTop {
  box-shadow: 0 4px 14px rgba(2,6,23,.14);
}
body:not(.performance):not(.confidence):not(.chart-focus) .chart {
  background: radial-gradient(circle at 8% 0%,rgba(79,70,229,.055),transparent 30%),
    linear-gradient(180deg,#eef2f6,#e9edf2) !important;
  padding: 30px 26px 100px !important;
}
body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput {
  width: min(var(--wcl-sheet-width),calc(100% - 8px)) !important;
  max-width: var(--wcl-sheet-width) !important;
  min-height: calc(100% - 12px);
  margin: 0 auto !important;
  padding: 42px 48px 120px !important;
  background: var(--wcl-sheet-bg) !important;
  color: var(--wcl-sheet-ink) !important;
  border: 1px solid var(--wcl-sheet-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(15,23,42,.10),
    0 2px 8px rgba(15,23,42,.05) !important;
}
body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.twoColumns {
  width: min(var(--wcl-sheet-wide-width),calc(100% - 8px)) !important;
  max-width: var(--wcl-sheet-wide-width) !important;
  column-count: 2 !important;
  column-gap: 54px !important;
  column-rule: 1px solid rgba(100,116,139,.14);
}
body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.oneColumn {
  column-count: 1 !important;
}
.sectionContent {
  white-space: normal !important;
  color: var(--wcl-chart-text-colour, var(--wcl-sheet-ink));
}
.chartLine {
  display: block;
  white-space: pre !important;
  min-height: 1.34em;
  overflow: visible;
  font-family: inherit;
  letter-spacing: inherit;
}
.chordRow {
  min-height: 1.18em;
  margin: 2px 0 0;
  font-size: .96em;
  line-height: 1.24 !important;
  font-weight: 850;
  color: var(--chord);
}
.chordRow + .lyricRow {
  margin-top: 0;
}
.lyricRow {
  line-height: 1.50 !important;
  font-weight: 500;
  color: var(--wcl-sheet-ink);
}
.chartSpacer {
  min-height: .72em;
  height: .72em;
  line-height: .72em !important;
}
body.wcl-chart-bold .lyricRow {
  font-weight: 800;
}
body.wcl-chart-bold .chordRow {
  font-weight: 950;
}
.sectionBlock {
  position: relative;
  max-width: none !important;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.sectionBlock .sectionLabel, .sectionLabel {
  width: 100% !important;
  max-width: none !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left;
  overflow: visible;
}
.sectionBlock .sectionLabel::after {
  content: "";
  height: 1px;
  min-width: 24px;
  flex: 1 1 auto;
  background: linear-gradient(90deg,rgba(100,116,139,.30),rgba(100,116,139,.06));
}
.sectionToggleIcon {
  color: #94a3b8 !important;
  opacity: .9;
}
.sectionName {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px !important;
  border-radius: 999px;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sectionLabel.intro .sectionName {
  background: #e8f7ee;
  color: #18723a;
}
.sectionLabel.verse .sectionName {
  background: #eaf2ff;
  color: #2457c5;
}
.sectionLabel.chorus .sectionName {
  background: #f2eaff;
  color: #7137b8;
}
.sectionLabel.bridge .sectionName {
  background: #fff0dc;
  color: #a45108;
}
.sectionLabel.ending .sectionName, .sectionLabel.outro .sectionName, .sectionLabel.tag .sectionName {
  background: #edf1f5;
  color: #475569;
}
.sectionLabel.song .sectionName {
  background: #eef2ff;
  color: #4338ca;
}
.inlineLoop {
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  font-size: .88em !important;
  letter-spacing: 0;
}
.sectionBlock.is-active-section::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 30px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg,#7c3aed,#2563eb);
  box-shadow: 0 0 0 1px rgba(124,58,237,.05),0 0 16px rgba(124,58,237,.18);
}
.sectionBlock.is-active-section .sectionName {
  box-shadow: 0 0 0 2px rgba(124,58,237,.09);
}
.sectionTabs button.activeSectionTab {
  background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
  color: #fff !important;
  border-color: rgba(196,181,253,.34) !important;
  box-shadow: 0 6px 16px rgba(124,58,237,.20) !important;
}
.wclChartReadabilityDock.open .wclChartToolsPanel {
  width: 270px !important;
  max-width: min(270px,calc(100vw - 64px)) !important;
}
.wclPremiumDisplayExtras {
  padding-top: 3px;
}
.wclDisplayDivider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 7px 3px 6px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wclDisplayDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(100,116,139,.18);
}
.wclPremiumToggleGrid {
  grid-template-columns: 1fr !important;
}
.wclPremiumDisplayField {
  margin-top: 4px;
}
.wclPremiumDisplayField select {
  flex: 0 0 128px !important;
  width: 128px !important;
}
.wclPremiumZoomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin-top: 4px;
  padding: 5px 5px 5px 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.045);
  border: 1px solid rgba(15,23,42,.06);
}
.wclPremiumZoomRow > span {
  color: #475569;
  font-size: 13px;
  font-weight: 760;
}
.wclPremiumZoomRow > div {
  display: flex;
  gap: 4px;
}
.wclPremiumZoomRow button, .wclPremiumActionRow button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.76) !important;
  color: #172033 !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.wclPremiumActionRow {
  display: flex;
  margin-top: 7px;
}
.wclPremiumActionRow button {
  width: 100% !important;
  height: 34px !important;
}
body.performance .chartOutput, body.confidence .chartOutput, body.chart-focus .chartOutput {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.performance .lyricRow, body.confidence .lyricRow, body.chart-focus .lyricRow {
  color: inherit;
}
body.performance .sectionBlock.is-active-section::before, body.confidence .sectionBlock.is-active-section::before, body.chart-focus .sectionBlock.is-active-section::before {
  left: -12px;
}
@media(max-width:900px) {
  body:not(.performance):not(.confidence):not(.chart-focus) .chart {
    background: var(--wcl-sheet-bg) !important;
    padding: 0 !important;
  }
  body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput {
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 20px 16px 116px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    column-count: 1 !important;
  }
  body.is-mobile-device .sectionContent, body.is-mobile-device .chartOutput, body.is-mobile-device pre {
    font-size: 16px !important;
  }
  .chartLine {
    white-space: pre !important;
  }
  .chordRow {
    font-size: .96em;
    line-height: 1.22 !important;
  }
  .lyricRow {
    line-height: 1.48 !important;
  }
  .sectionBlock {
    margin-bottom: 22px !important;
  }
  .sectionBlock .sectionLabel, .sectionLabel {
    margin-bottom: 8px !important;
  }
  .sectionName {
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
  .sectionBlock.is-active-section::before {
    left: -9px;
    top: 28px;
  }
  .wclChartReadabilityDock.open .wclChartToolsPanel {
    width: min(264px,calc(100vw - 58px)) !important;
  }
  body:not(.wcl-no-song) .topbar .controls {
    gap: 6px !important;
  }
}
@media(min-width:901px) and (max-width:1350px) {
  body:not(.performance):not(.confidence):not(.chart-focus) .chart {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput {
    padding-left: 34px !important;
    padding-right: 34px !important;
  }
}
body:not(.wcl-no-song) .topbar .controls > #mobileChordColourBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #chordStyleSelect.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #simplifyBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #columnsBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > .chartZoomBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #confidenceBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #numbersBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #mobileFullscreenBtn.wclSecondaryChartControl, body:not(.wcl-no-song) .topbar .controls > #topMetronomeBtn.wclSecondaryChartControl {
  display: none !important;
}
@media(max-width:900px) {
  .lyricRow {
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .chordRow {
    white-space: pre !important;
  }
}
body:not(.wcl-no-song) .chart > .wclChartReadabilityDock {
  top: 8px !important;
  margin: 0 70px 0 auto !important;
}
body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chart {
  padding: 5px !important;
}
body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput, body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput.oneColumn, body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput.twoColumns {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput {
  padding-top: 30px !important;
}
body:not(.wcl-no-song) .topbar .controls > #mobileChordColourBtn, body:not(.wcl-no-song) .topbar .controls > #chordStyleSelect, body:not(.wcl-no-song) .topbar .controls > #simplifyBtn, body:not(.wcl-no-song) .topbar .controls > #columnsBtn, body:not(.wcl-no-song) .topbar .controls > .chartZoomBtn, body:not(.wcl-no-song) .topbar .controls > #confidenceBtn, body:not(.wcl-no-song) .topbar .controls > #numbersBtn, body:not(.wcl-no-song) .topbar .controls > #topMetronomeBtn {
  display: inline-flex !important;
}
body:not(.wcl-no-song) .topbar .controls {
  max-width: none !important;
}
@media(min-width:901px) {
  body:not(.wcl-no-song) .topbar .controls > #mobileChordColourBtn, body:not(.wcl-no-song) .topbar .controls > #simplifyBtn, body:not(.wcl-no-song) .topbar .controls > #columnsBtn, body:not(.wcl-no-song) .topbar .controls > .chartZoomBtn, body:not(.wcl-no-song) .topbar .controls > #confidenceBtn, body:not(.wcl-no-song) .topbar .controls > #numbersBtn, body:not(.wcl-no-song) .topbar .controls > #topMetronomeBtn {
    height: 38px !important;
    min-height: 38px !important;
  }
  body:not(.wcl-no-song) .topbar .controls > #chordStyleSelect {
    height: 38px !important;
    min-height: 38px !important;
    max-width: 150px;
  }
}
@media(max-width:900px) {
  body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chart {
    padding: 5px !important;
  }
  body:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body:not(.wcl-no-song) .chart > .wclChartReadabilityDock {
    top: 6px !important;
    margin-right: 52px !important;
  }
}
.wclChordLyricPair {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
}
.wclPairVisualLine {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wclChordLyricPair .chartLine, .wclChordLyricPair .chordRow, .wclChordLyricPair .lyricRow {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: pre !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.wclChordLyricPair .wclPairVisualLine + .wclPairVisualLine {
  margin-top: 2px !important;
}
.wclPairMeasureProbe {
  position: absolute !important;
  left: -100000px !important;
  top: -100000px !important;
  visibility: hidden !important;
  pointer-events: none !important;
  white-space: pre !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}
@media(max-width:900px) {
  .wclChordLyricPair .lyricRow, .wclChordLyricPair .chordRow, .wclChordLyricPair .chartLine {
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}
body.performance .wclChordLyricPair .chartLine, body.confidence .wclChordLyricPair .chartLine, body.chart-focus .wclChordLyricPair .chartLine {
  white-space: pre !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.chord, .chartOutput .chord, .sectionContent .chord {
  cursor: default !important;
}
.chord[data-shape]::after, .chord[data-shape]:hover::after {
  content: none !important;
  display: none !important;
}
#chordStyleSelect.wclHiddenChordStyleSource, body:not(.wcl-no-song) .topbar .controls > #chordStyleSelect.wclHiddenChordStyleSource {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body:not(.wcl-no-song) .topbar .controls {
  gap: 5px !important;
}
body:not(.wcl-no-song) .topbar .controls > button, body:not(.wcl-no-song) .topbar .controls > select {
  height: 36px !important;
  min-height: 36px !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
body:not(.wcl-no-song) .topbar .controls > .iconBtn, body:not(.wcl-no-song) .topbar .controls > .iconOnlyBtn, body:not(.wcl-no-song) .topbar .controls > .chartZoomBtn {
  width: 38px !important;
  min-width: 38px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body:not(.wcl-no-song) #keySelect {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding-left: 7px !important;
  padding-right: 20px !important;
  font-size: 12px !important;
  text-align: center !important;
  text-align-last: center !important;
}
body:not(.wcl-no-song) #capoSelect, body:not(.wcl-no-song) #capoSelect.capoCompactSelect {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  padding-left: 7px !important;
  padding-right: 20px !important;
  font-size: 11.5px !important;
  text-align: center !important;
  text-align-last: center !important;
}
body:not(.wcl-no-song) .mobileAutoTop {
  min-width: 108px !important;
  width: 108px !important;
  height: 36px !important;
  padding: 0 7px !important;
  gap: 6px !important;
}
body:not(.wcl-no-song) .mobileAutoTop button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
}
body:not(.wcl-no-song) .mobileAutoTop input[type="range"] {
  min-width: 42px !important;
  width: 48px !important;
}
@media(min-width:701px) and (max-width:1150px) {
  body:not(.wcl-no-song) .topbar {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body:not(.wcl-no-song) .topbar .controls {
    gap: 4px !important;
  }
  body:not(.wcl-no-song) .topbar .controls > button, body:not(.wcl-no-song) .topbar .controls > select {
    height: 34px !important;
    min-height: 34px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 11px !important;
  }
  body:not(.wcl-no-song) .topbar .controls > .iconBtn, body:not(.wcl-no-song) .topbar .controls > .iconOnlyBtn, body:not(.wcl-no-song) .topbar .controls > .chartZoomBtn {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
  }
  body:not(.wcl-no-song) #keySelect {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding-right: 17px !important;
    font-size: 11px !important;
  }
  body:not(.wcl-no-song) #capoSelect, body:not(.wcl-no-song) #capoSelect.capoCompactSelect {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding-left: 5px !important;
    padding-right: 17px !important;
    font-size: 10.5px !important;
  }
  body:not(.wcl-no-song) #simplifyBtn, body:not(.wcl-no-song) #numbersBtn, body:not(.wcl-no-song) #columnsBtn {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  body:not(.wcl-no-song) .mobileAutoTop {
    width: 98px !important;
    min-width: 98px !important;
    height: 34px !important;
  }
  body:not(.wcl-no-song) .mobileAutoTop input[type="range"] {
    width: 42px !important;
    min-width: 38px !important;
  }
}
@media(max-width:700px) {
  body.is-mobile-device:not(.wcl-no-song) .controls {
    gap: 4px !important;
    padding: 5px !important;
  }
  body.is-mobile-device:not(.wcl-no-song) .controls button, body.is-mobile-device:not(.wcl-no-song) .controls select {
    height: 34px !important;
    min-height: 34px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 10.5px !important;
  }
  body.is-mobile-device:not(.wcl-no-song) #keySelect {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    padding-right: 16px !important;
  }
  body.is-mobile-device:not(.wcl-no-song) #capoSelect, body.is-mobile-device:not(.wcl-no-song) #capoSelect.capoCompactSelect {
    display: inline-flex !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    padding-left: 4px !important;
    padding-right: 16px !important;
    font-size: 10px !important;
  }
  body.is-mobile-device:not(.wcl-no-song) .mobileAutoTop {
    width: 94px !important;
    min-width: 94px !important;
    height: 34px !important;
  }
}
body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .contentArea, body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .chart, body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) #welcomeScreen, body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .welcomeScreen, body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .welcomeScreen.welcomeLaunchpad {
  background: #fffdf9 !important;
  background-image: none !important;
}
body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .contentArea {
  background-color: #fffdf9 !important;
}
body.wcl-no-song:not(.performance):not(.confidence):not(.chart-focus) .chart {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.wcl-no-song .welcomeScreen.welcomeLaunchpad {
  min-height: 100% !important;
}
.welcomeUpdateCard {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 22px !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(217,171,99,.38) !important;
  border-radius: 22px !important;
  background: radial-gradient(circle at 100% 0%,rgba(246,199,104,.18),transparent 34%),
    linear-gradient(145deg,#fffaf0,#fff7e8) !important;
  color: #172033 !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.09) !important;
  overflow: hidden !important;
}
.welcomeUpdateHead {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}
.welcomeUpdateBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,#f6c768,#d9ab63) !important;
  color: #111827 !important;
  border: 1px solid rgba(146,91,18,.12) !important;
  box-shadow: 0 5px 14px rgba(217,171,99,.20) !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.welcomeUpdateHead h3 {
  margin: 0 0 3px !important;
  color: #172033 !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
.welcomeUpdateHead small {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.welcomeUpdateGrid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
}
.welcomeUpdateGrid > div {
  position: relative !important;
  min-width: 0 !important;
  padding: 11px 12px 11px 20px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
}
.welcomeUpdateGrid > div::before {
  content: "" !important;
  position: absolute !important;
  left: 9px !important;
  top: 16px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #d9ab63 !important;
}
.welcomeUpdateGrid strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #172033 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}
.welcomeUpdateGrid span {
  display: block !important;
  margin: 0 !important;
  color: #58677b !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}
@media(max-width:700px) {
  .welcomeUpdateCard {
    margin-bottom: 18px !important;
    padding: 17px !important;
    border-radius: 18px !important;
  }
  .welcomeUpdateHead {
    align-items: flex-start !important;
    gap: 9px !important;
    margin-bottom: 13px !important;
  }
  .welcomeUpdateBadge {
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
  }
  .welcomeUpdateHead h3 {
    font-size: 17px !important;
  }
  .welcomeUpdateGrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}
body.confidence .lyricRow, body.confidence .chartLine:not(.chordRow), body.confidence .sectionContent {
  color: var(--wcl-chart-text-colour,var(--wcl-sheet-ink,#f8fafc)) !important;
}
body.confidence .chordRow, body.confidence .chord {
  color: var(--chord,#16a34a) !important;
}
@media(min-width:901px) {
  body.is-desktop-device .sidebar {
    background: linear-gradient(180deg,#0f1722,#0b121c) !important;
    border-right-color: rgba(148,163,184,.10) !important;
  }
  body.is-desktop-device .flowPanel {
    background: #09111b !important;
    border-left-color: rgba(148,163,184,.10) !important;
  }
  body.is-desktop-device .panelCard {
    background: #101a28 !important;
    border-color: rgba(148,163,184,.14) !important;
    box-shadow: none !important;
  }
  body.is-desktop-device .sectionContent, body.is-desktop-device .chartOutput, body.is-desktop-device pre {
    font-size: 18px !important;
  }
  body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.twoColumns {
    column-gap: 64px !important;
    column-rule-color: rgba(100,116,139,.11) !important;
  }
  .sectionBlock {
    margin-bottom: 20px !important;
  }
  .sectionBlock .sectionLabel, .sectionLabel {
    margin-bottom: 9px !important;
  }
  .sectionBlock .sectionLabel::after {
    background: linear-gradient(90deg,rgba(100,116,139,.22),rgba(100,116,139,.035)) !important;
  }
  .sectionName {
    min-height: 22px !important;
    padding: 3px 8px !important;
    font-size: 10px !important;
  }
  .sectionBlock.is-active-section::before {
    width: 4px !important;
    left: -21px !important;
  }
  body.is-desktop-device .sectionTabs {
    gap: 6px !important;
    padding: 9px 16px !important;
    background: #0b121c !important;
  }
  body.is-desktop-device .sectionTabs button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    background: transparent !important;
    color: #9aa8ba !important;
    border: 1px solid rgba(148,163,184,.12) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }
  body.is-desktop-device .sectionTabs button:hover {
    color: #e5e7eb !important;
    background: rgba(148,163,184,.06) !important;
    border-color: rgba(148,163,184,.22) !important;
  }
  body.is-desktop-device .sectionTabs button.activeSectionTab {
    background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    color: #fff !important;
    border-color: rgba(196,181,253,.32) !important;
    box-shadow: 0 5px 14px rgba(124,58,237,.18) !important;
  }
  body.is-desktop-device #songList {
    padding: 5px 7px 8px !important;
  }
  body.is-desktop-device .song {
    padding: 8px !important;
    margin-bottom: 5px !important;
    border-radius: 11px !important;
  }
  body.is-desktop-device .songRow {
    gap: 9px !important;
    align-items: center !important;
  }
  body.is-desktop-device .songCover {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 9px !important;
  }
  body.is-desktop-device .songTitle {
    font-size: 14px !important;
    line-height: 1.13 !important;
    margin-bottom: 2px !important;
  }
  body.is-desktop-device .songArtist {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  body.is-desktop-device .songActions {
    margin-top: 3px !important;
    gap: 5px !important;
  }
  body.is-desktop-device .badge, body.is-desktop-device .addSet {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
  .songSortControls button:not(.active) .songSortArrow {
    visibility: hidden !important;
  }
  .desktopQuickTools {
    gap: 6px !important;
  }
  .desktopQuickTools button {
    min-height: 31px !important;
    height: 31px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }
  body:not(.wcl-no-song) .topbar .controls {
    gap: 6px !important;
  }
  body:not(.wcl-no-song) .topbar .controls > #keySelect, body:not(.wcl-no-song) .topbar .controls > #capoSelect, body:not(.wcl-no-song) .topbar .controls > #columnsBtn, body:not(.wcl-no-song) .topbar .controls > #confidenceBtn {
    margin-left: 7px !important;
    position: relative;
  }
  body:not(.wcl-no-song) .topbar .controls > #keySelect {
    box-shadow: -8px 0 0 -7px rgba(148,163,184,.25),0 4px 14px rgba(2,6,23,.14) !important;
  }
  body:not(.wcl-no-song) .topbar .controls > #capoSelect, body:not(.wcl-no-song) .topbar .controls > #columnsBtn, body:not(.wcl-no-song) .topbar .controls > #confidenceBtn {
    box-shadow: -8px 0 0 -7px rgba(148,163,184,.20) !important;
  }
  .contentArea {
    position: relative !important;
    transition: grid-template-columns .22s ease !important;
  }
  .wclRightPanelHeader {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    justify-content: flex-start;
    margin: -3px 0 8px;
    padding: 0 1px 3px;
    background: linear-gradient(180deg,#09111b 74%,rgba(9,17,27,0));
  }
  .wclRightPanelToggle {
    width: auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    background: rgba(15,23,42,.72) !important;
    color: #aeb9c8 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
  }
  .wclRightPanelToggle:hover {
    color: #fff !important;
    background: #162235 !important;
  }
  .wclRightPanelRestore {
    display: none;
    position: absolute;
    z-index: 30;
    top: 14px;
    right: 0;
    width: 26px !important;
    min-width: 26px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 12px 0 0 12px !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    border-right: 0 !important;
    background: #111c2b !important;
    color: #cbd5e1 !important;
    font-size: 20px !important;
    box-shadow: 0 8px 24px rgba(2,6,23,.24) !important;
  }
  body.wcl-right-panel-collapsed .flowPanel {
    display: none !important;
  }
  body.wcl-right-panel-collapsed .wclRightPanelRestore {
    display: inline-flex !important;
  }
  body.wcl-right-panel-collapsed:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.twoColumns {
    width: min(1280px,calc(100% - 8px)) !important;
    max-width: 1280px !important;
  }
  #confidenceBtn[data-view-mode="focus"] {
    background: linear-gradient(135deg,#1d4ed8,#4f46e5) !important;
    color: #fff !important;
  }
  #confidenceBtn[data-view-mode="confidence"] {
    background: linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    color: #fff !important;
  }
}
@media(max-width:900px) {
  .wclRightPanelHeader, .wclRightPanelRestore {
    display: none !important;
  }
}
@media(min-width:901px) {
  body.wcl-right-panel-collapsed .contentArea {
    grid-template-columns: minmax(0,1fr) !important;
    background: var(--paper,#fffdf7) !important;
  }
  body.wcl-right-panel-collapsed .chart {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--paper,#fffdf7) !important;
  }
  body.wcl-right-panel-collapsed:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput, body.wcl-right-panel-collapsed:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput.oneColumn, body.wcl-right-panel-collapsed:not(.performance):not(.confidence):not(.chart-focus):not(.wcl-no-song) .chartOutput.twoColumns {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
@media(min-width:901px) {
  #chartOutput.twoColumns .sectionBlock.is-active-section::before {
    display: block !important;
    opacity: 1 !important;
  }
}
#chartOutput, .chartOutput, .sectionContent, .chartOutput pre {
  font-size: var(--wcl-chart-font-size,12px) !important;
  line-height: 1.45 !important;
}
.chartOutput .chord, .chartOutput .numberChord, .chord, .numberChord {
  font-size: 1em !important;
  line-height: inherit !important;
}
.sectionBlock {
  margin-bottom: var(--wcl-section-margin,12px) !important;
}
.sectionLabel {
  font-size: var(--wcl-section-font-size,12px) !important;
  line-height: 1.15 !important;
  padding: var(--wcl-section-pad-y,3px) var(--wcl-section-pad-x,8px) !important;
  margin: 0 0 max(1px, calc(var(--wcl-section-margin,12px) * .42)) 0 !important;
  gap: var(--wcl-section-label-gap,12px) !important;
}
.sectionToggleIcon {
  font-size: var(--wcl-section-font-size,12px) !important;
  width: var(--wcl-section-icon-size,16px) !important;
  min-width: var(--wcl-section-icon-size,16px) !important;
}
.sectionName, .inlineLoop {
  font-size: inherit !important;
  line-height: inherit !important;
}
#chartOutput, .chartOutput {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
@media(max-width:900px) {
  .chart {
    touch-action: pan-y !important;
  }
}
.wclPadDownload {
  display: grid !important;
  grid-template-rows: auto 4px !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 18px !important;
  margin: -1px 0 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .14s ease !important;
}
.wclPadDownload.isVisible {
  opacity: 1 !important;
  visibility: visible !important;
}
.wclPadDownloadMeta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #5cff9d !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 9px rgba(92,255,157,.28) !important;
}
.wclPadDownloadMeta b {
  color: #82ffb1 !important;
  font: inherit !important;
  letter-spacing: .03em !important;
}
.wclPadDownloadTrack {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(92,255,157,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(92,255,157,.10) !important;
}
.wclPadDownloadTrack i {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  width: var(--wcl-pad-download,0%) !important;
  border-radius: inherit !important;
  background: #55ff96 !important;
  box-shadow: 0 0 7px rgba(85,255,150,.85),0 0 14px rgba(85,255,150,.38) !important;
  transition: width .08s linear !important;
}
.wclPadDownload.isIndeterminate .wclPadDownloadTrack i {
  width: 34% !important;
  animation: wclPadDownloadSweep .9s ease-in-out infinite alternate !important;
}
@keyframes wclPadDownloadSweep {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(210%);
  }
}
.wclPadStatusText.isDownloading, .wclPadRebuild [data-pad-transition-status].isDownloading {
  color: #82ffb1 !important;
  text-shadow: 0 0 12px rgba(85,255,150,.20) !important;
}
.wclPadRebuildStatus:has(.wclPadStatusText.isDownloading) .wclPadStatusHeader i {
  background: #55ff96 !important;
  box-shadow: 0 0 10px rgba(85,255,150,.78) !important;
}
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadDownload {
    align-self: start !important;
    width: min(210px,72%) !important;
    min-height: 0 !important;
    margin: -2px 0 1px !important;
    grid-template-rows: auto 3px !important;
    gap: 3px !important;
  }
  #mobilePadScreen .wclMobilePadDownload:not(.isVisible) {
    display: none !important;
  }
  #mobilePadScreen .wclMobilePadDownload.isVisible {
    display: grid !important;
  }
  #mobilePadScreen .wclMobilePadDownload .wclPadDownloadMeta {
    font-size: 6.5px !important;
    letter-spacing: .07em !important;
  }
  #mobilePadScreen .wclMobilePadDownload .wclPadDownloadTrack {
    height: 3px !important;
  }
  #mobilePadScreen .wclMobilePadStatus:has(.wclMobilePadDownload.isVisible) .wclMobilePadStatusHead i {
    background: #55ff96 !important;
    box-shadow: 0 0 9px rgba(85,255,150,.72) !important;
  }
}
html body #chartOutput, html body #chartOutput .sectionContent, html body #chartOutput .wclChordLyricPair, html body #chartOutput .wclPairVisualLine, html body #chartOutput .chartLine, html body #chartOutput .lyricRow {
  font-size: var(--wcl-chart-font-size,12px) !important;
}
html body #chartOutput .chordRow {
  font-size: calc(var(--wcl-chart-font-size,12px) * .96) !important;
}
html body #chartOutput .chord, html body #chartOutput .numberChord, html body #chartOutput .chordRow .chord, html body #chartOutput .chordRow .numberChord {
  font-size: 1em !important;
  line-height: inherit !important;
}

/* =========================================================
   WCL CHART SECTION SCALE SYNC v2
   Keep Verse / Chorus / Bridge / etc. proportional to chart zoom.
   Uses em sizing so the pill, icon, spacing and rule shrink/grow together.
   ========================================================= */
html body #chartOutput .sectionBlock .sectionLabel {
  font-size: var(--wcl-section-font-size,8.5px) !important;
  line-height: 1.15 !important;
  min-height: 2.35em !important;
  gap: .7em !important;
  margin: 0 0 .75em !important;
  padding: 0 !important;
}

html body #chartOutput .sectionBlock .sectionLabel .sectionToggleIcon,
html body #chartOutput .sectionBlock .sectionLabel span:first-child {
  font-size: 1em !important;
  width: 1.35em !important;
  min-width: 1.35em !important;
  height: auto !important;
  line-height: 1 !important;
}

html body #chartOutput .sectionBlock .sectionLabel .sectionName {
  font-size: 1em !important;
  line-height: 1 !important;
  min-height: 2em !important;
  padding: .33em .75em !important;
  gap: .5em !important;
}

html body #chartOutput .sectionBlock .sectionLabel .inlineLoop {
  font-size: .88em !important;
  padding: .18em .42em !important;
}

html body #chartOutput .sectionBlock .sectionLabel::after {
  min-width: 2em !important;
}

html body #chartOutput .sectionBlock {
  margin-bottom: var(--wcl-section-margin,.85em) !important;
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v8 — SQUARE PADS + SETTINGS DRAWER
   ========================================================= */
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadV8 {
    gap: 8px !important;
  }

  #mobilePadScreen .wclMobilePadHeaderActions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #mobilePadScreen .wclMobilePadSettingsToggle,
  #mobilePadScreen .wclMobilePadSettingsClose {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #304057 !important;
    background: #0c1520 !important;
    color: #a9b8ca !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
    cursor: pointer !important;
  }

  #mobilePadScreen .wclMobilePadSettingsToggle {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 11px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsToggle svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  #mobilePadScreen .wclMobilePadSettingsToggle.active {
    border-color: #7568d6 !important;
    background: #27233d !important;
    color: #d9d3ff !important;
  }

  #mobilePadScreen .wclMobilePadSettings[hidden] {
    display: none !important;
  }

  #mobilePadScreen .wclMobilePadSettings.isOpen:not([hidden]) {
    display: grid !important;
  }

  #mobilePadScreen .wclMobilePadSettings {
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border: 1px solid #2b3b51 !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg,#101a27,#0c141f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.16) !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 32px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHead > div,
  #mobilePadScreen .wclMobilePadSettingsLabel {
    min-width: 0 !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHead strong,
  #mobilePadScreen .wclMobilePadSettingsLabel strong {
    display: block !important;
    color: #dbe5f1 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHead span,
  #mobilePadScreen .wclMobilePadSettingsLabel span {
    display: block !important;
    margin-top: 4px !important;
    color: #74849a !important;
    font-size: 8px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
  }

  #mobilePadScreen .wclMobilePadSettingsClose {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 9px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  #mobilePadScreen .wclMobilePadSettingsGroup {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid #223044 !important;
    border-radius: 11px !important;
    background: #0b141f !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHarmony {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 148px !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsMixer {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsMixer .wclMobilePadChannel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #mobilePadScreen .wclMobilePadSettings .wclMobilePadModuleHead {
    margin-bottom: 4px !important;
  }

  #mobilePadScreen .wclMobilePadWavesHead {
    margin-bottom: 7px !important;
  }

  #mobilePadScreen .wclMobilePadWaveStatus {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: #c5d2e2 !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 10px !important;
    font-weight: 850 !important;
  }

  /* Twelve notes, six across: two rows of true square pad buttons. */
  #mobilePadScreen .wclMobilePadGrid {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
  }

  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 11px !important;
    font-size: clamp(13px,3.8vw,17px) !important;
  }

  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn span {
    font-size: inherit !important;
  }

  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn::before {
    top: 6px !important;
    right: 6px !important;
    width: 4px !important;
    height: 4px !important;
  }

  #mobilePadScreen .wclMobilePadGrid .droneKeyBtn::after {
    left: 6px !important;
    bottom: 5px !important;
    font-size: 5px !important;
  }

  /* Smaller, quieter live meter: no faux reflections or neon glow. */
  #mobilePadScreen .wclMobilePadStatus {
    gap: 4px !important;
    min-height: 78px !important;
    padding: 8px 10px !important;
  }

  #mobilePadScreen .wclMobilePadStatusText,
  #mobilePadScreen .wclMobilePadV8 [data-pad-transition-status] {
    min-height: 18px !important;
    font-size: 9.5px !important;
  }

  #mobilePadScreen .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadMeter.worshipPadSwellMeter {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 8px !important;
    background: #09121b !important;
  }

  #mobilePadScreen .wclMobilePadMeter .wclEqGrid,
  #mobilePadScreen .wclMobilePadMeter .wclEqReflectionBar {
    display: none !important;
  }

  #mobilePadScreen .wclMobilePadMeter .wclEqBar {
    stroke: #6b839f !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 0 !important;
    opacity: .22 !important;
    filter: none !important;
  }

  #mobilePadScreen .wclMobilePadMeter.isActive .wclEqBar,
  #mobilePadScreen .worshipPadSwellMeter.isActive .wclEqBar {
    opacity: .58 !important;
    filter: none !important;
    animation-duration: 1.65s !important;
  }

  #mobilePadScreen .wclMobilePadMeter .wclEq-cyan,
  #mobilePadScreen .wclMobilePadMeter .wclEq-blue,
  #mobilePadScreen .wclMobilePadMeter .wclEq-violet {
    stroke: #6b839f !important;
  }
}

@media(max-width:390px) {
  #mobilePadScreen .wclMobilePadV8 {
    padding: 10px !important;
  }

  #mobilePadScreen .wclMobilePadHeader {
    gap: 8px !important;
  }

  #mobilePadScreen .wclMobilePadTitle {
    font-size: 17px !important;
  }

  #mobilePadScreen .wclMobilePadHeaderActions {
    gap: 4px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsToggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  #mobilePadScreen .wclMobilePadPower {
    width: 112px !important;
    min-width: 112px !important;
    grid-template-columns: 51px 51px !important;
  }

  #mobilePadScreen .wclMobilePadStop,
  #mobilePadScreen .wclMobilePadState {
    width: 51px !important;
    min-width: 51px !important;
    max-width: 51px !important;
  }

  #mobilePadScreen .wclMobilePadSettingsHarmony {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v9 — TABLET-SIZE PADS + QUICK MIXER
   Keeps the mobile pad close to the desktop 4 x 3 key layout,
   with large touch targets and Master/Transition always visible.
   ========================================================= */
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadV9 {
    gap: 10px !important;
  }

  /* Desktop-style 4-column pad bank: 12 keys = 3 rows. */
  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid .droneKeyBtn {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: clamp(62px,10vw,82px) !important;
    min-height: 62px !important;
    max-height: 82px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: clamp(17px,3vw,21px) !important;
    touch-action: manipulation !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid .droneKeyBtn::before {
    top: 8px !important;
    right: 8px !important;
    width: 5px !important;
    height: 5px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid .droneKeyBtn::after {
    left: 8px !important;
    bottom: 7px !important;
    font-size: 6px !important;
  }

  /* Master + Transition now live directly above Deck Mode. */
  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 14px !important;
    background: var(--mp-panel) !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadChannel {
    min-width: 0 !important;
    padding: 9px !important;
    border: 1px solid #223044 !important;
    border-radius: 11px !important;
    background: #0b141f !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadModuleHead {
    margin-bottom: 5px !important;
  }

  /* Slightly larger slider hit area for tablets/touch screens. */
  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange {
    height: 34px !important;
    min-height: 34px !important;
    background-size: 100% 6px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange::-webkit-slider-runnable-track {
    height: 6px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-top: -7px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange::-moz-range-track,
  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange::-moz-range-progress {
    height: 6px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer .wclMobilePadRange::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
  }
}

@media(max-width:430px) {
  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid {
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadGrid .droneKeyBtn {
    height: 62px !important;
    min-height: 62px !important;
    font-size: 17px !important;
  }

  #mobilePadScreen .wclMobilePadV9 .wclMobilePadQuickMixer {
    gap: 7px !important;
    padding: 8px !important;
  }
}


/* =========================================================
   WCL WORSHIP PAD REAL AUDIO SPECTRUM v10
   Canvas spectrum driven by Web Audio AnalyserNode.
   ========================================================= */
.wclPadSpectrum,
.wclPadRebuild .wclPadSpectrum,
#mobilePadScreen .wclPadSpectrum {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg,rgba(10,22,34,.94),rgba(5,12,20,.98)) !important;
}

.wclPadSpectrumCanvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}

.wclPadRebuildEqualizer,
.wclPadRebuild .worshipPadSwellMeter {
  height: 54px !important;
  min-height: 54px !important;
  background:
    radial-gradient(circle at 50% 110%,rgba(46,242,230,.055),transparent 58%),
    #071019 !important;
}

.wclPadRebuild .wclVectorEqualizer {
  height: 54px !important;
  min-height: 54px !important;
}

.worshipPadSwellMeter .wclEqBar,
.worshipPadSwellMeter .wclEqReflectionBar,
.worshipPadSwellMeter .wclEqGrid {
  animation: none !important;
}

@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadStatus {
    min-height: 98px !important;
    gap: 5px !important;
  }

  #mobilePadScreen .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadMeter.worshipPadSwellMeter {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 9px !important;
    background:
      radial-gradient(circle at 50% 115%,rgba(45,140,255,.075),transparent 62%),
      #07111b !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      inset 0 -10px 20px rgba(0,0,0,.22) !important;
  }

  #mobilePadScreen .wclMobilePadMeter .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadMeter .wclPadSpectrumCanvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
}

@media(min-width:601px) and (max-width:1180px) {
  #mobilePadScreen .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadMeter.worshipPadSwellMeter {
    height: 62px !important;
    min-height: 62px !important;
  }

  #mobilePadScreen .wclMobilePadStatus {
    min-height: 110px !important;
  }
}

@media(max-width:390px) {
  #mobilePadScreen .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadMeter.worshipPadSwellMeter {
    height: 46px !important;
    min-height: 46px !important;
  }

  #mobilePadScreen .wclMobilePadStatus {
    min-height: 90px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v11 — POLISHED CONSOLE LAYOUT
   Cleaner hierarchy, full-width live spectrum and tablet-first touch sizing.
   ========================================================= */
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadV11 {
    --mp-bg: #08111b;
    --mp-panel: #0d1825;
    --mp-panel-2: #09131e;
    --mp-border: rgba(92,127,166,.42);
    --mp-border-soft: rgba(92,127,166,.24);
    --mp-text: #f6f8fc;
    --mp-muted: #8291a7;
    --mp-purple: #7d6df0;
    --mp-purple-soft: #2c2848;
    --mp-green: #25bb80;
    --mp-red: #682c36;
    --mp-track: #3a4960;
    width: min(100%, 860px) !important;
    margin: 0 auto !important;
    padding: 14px !important;
    gap: 11px !important;
    border: 1px solid rgba(82,117,158,.48) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 12% -15%,rgba(74,117,255,.09),transparent 34%),
      linear-gradient(180deg,#0a131e 0%,#081019 100%) !important;
    box-shadow:
      0 18px 44px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadHeader {
    min-height: 40px !important;
    padding: 0 1px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadTitle {
    font-size: clamp(20px,3.4vw,25px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadHeaderActions {
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadSettingsToggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid rgba(92,127,166,.52) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,#122132,#0c1723) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadPower {
    width: 118px !important;
    min-width: 118px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px !important;
    border-color: rgba(92,127,166,.52) !important;
    background: #0a1521 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStop,
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadState {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 10px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStop {
    background: linear-gradient(180deg,#73343f,#57252f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadState.on {
    background: linear-gradient(135deg,#1fb779,#31c28e) !important;
    box-shadow: 0 0 15px rgba(37,187,128,.22) !important;
  }

  /* Full-width hero meter. The spectrum owns the whole first row, so it no
     longer gets squeezed by the LIVE STATUS label on wider phones/tablets. */
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStatus {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "meter meter"
      "status live"
      "download download" !important;
    align-items: center !important;
    gap: 7px 10px !important;
    min-height: 0 !important;
    padding: 10px !important;
    border: 1px solid rgba(83,126,176,.48) !important;
    border-radius: 17px !important;
    background:
      radial-gradient(circle at 50% -15%,rgba(44,141,255,.08),transparent 42%),
      linear-gradient(180deg,#0e1a29,#0b1724) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 10px 24px rgba(0,0,0,.12) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter.worshipPadSwellMeter {
    grid-area: meter !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(72px,12vw,92px) !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(52,86,121,.46) !important;
    border-radius: 12px !important;
    background:
      radial-gradient(circle at 50% 115%,rgba(46,242,223,.065),transparent 60%),
      linear-gradient(180deg,#07131f,#050e17) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      inset 0 -16px 30px rgba(0,0,0,.22) !important;
    overflow: hidden !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter .wclPadSpectrumCanvas {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStatusText,
  #mobilePadScreen .wclMobilePadV11 [data-pad-transition-status] {
    grid-area: status !important;
    min-width: 0 !important;
    min-height: 20px !important;
    margin: 0 !important;
    color: #dbe6f4 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStatusHead {
    grid-area: live !important;
    justify-self: end !important;
    align-self: center !important;
    gap: 6px !important;
    color: #71829a !important;
    font-size: 7px !important;
    letter-spacing: .16em !important;
    white-space: nowrap !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStatusHead i {
    width: 6px !important;
    height: 6px !important;
    background: #465970 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclPadDownload {
    grid-area: download !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Pad bank: large tap surfaces, slightly more depth and stronger active cue. */
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn {
    height: clamp(60px,9.2vw,76px) !important;
    min-height: 60px !important;
    max-height: 76px !important;
    border: 1px solid rgba(77,113,153,.52) !important;
    border-radius: 13px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
      #101c2a !important;
    color: #edf3fb !important;
    font-size: clamp(17px,3vw,21px) !important;
    font-weight: 900 !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 4px 10px rgba(0,0,0,.08) !important;
    transition: transform .08s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn:active {
    transform: scale(.985) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn.activeDroneKey,
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn.activePadKey {
    border-color: #b56cff !important;
    background:
      radial-gradient(circle at 50% 120%,rgba(126,91,240,.34),transparent 72%),
      linear-gradient(180deg,#30234a,#241d3a) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 0 0 1px rgba(181,108,255,.32),
      0 0 17px rgba(126,91,240,.18) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn::before {
    top: 9px !important;
    right: 9px !important;
    width: 5px !important;
    height: 5px !important;
    background: #536983 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn::after {
    left: 9px !important;
    bottom: 8px !important;
    color: #60728a !important;
    font-size: 6px !important;
    letter-spacing: .08em !important;
  }

  /* Mixer becomes one clean surface rather than a card containing two cards. */
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg,#0d1824,#0a141f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadChannel {
    min-width: 0 !important;
    padding: 12px 13px 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadChannel + .wclMobilePadChannel {
    border-left: 1px solid var(--mp-border-soft) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadModuleHead {
    margin-bottom: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadModuleHead strong {
    color: #aebbd0 !important;
    font-size: 9px !important;
    letter-spacing: .105em !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadModuleHead span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    min-height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: rgba(241,200,75,.08) !important;
    color: #f1cf58 !important;
    font-size: 8px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadRange {
    height: 36px !important;
    min-height: 36px !important;
    background-size: 100% 6px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadRange::-webkit-slider-runnable-track {
    height: 6px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadRange::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-top: -7px !important;
    border-color: #08111b !important;
    box-shadow: 0 0 0 2px rgba(125,109,240,.15),0 2px 8px rgba(0,0,0,.34) !important;
  }

  /* Deck mode reads like a proper console selector. */
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadDeckMode {
    padding: 10px 11px 11px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg,#0d1824,#0a141f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadDeckMode .wclMobilePadSegment {
    gap: 4px !important;
    padding: 3px !important;
    border: 1px solid rgba(74,106,143,.44) !important;
    border-radius: 11px !important;
    background: #07111a !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadDeckMode .wclMobilePadSegment button {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    color: #8290a6 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadDeckMode .wclMobilePadSegment button.activePadLayerMode {
    background: linear-gradient(180deg,#475b7a,#394b67) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
}

@media(max-width:430px) {
  #mobilePadScreen .wclMobilePadV11 {
    padding: 11px !important;
    gap: 9px !important;
    border-radius: 18px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadStatus {
    padding: 8px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV11 .wclMobilePadMeter.worshipPadSwellMeter {
    height: 66px !important;
    min-height: 66px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid {
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadGrid .droneKeyBtn {
    height: 60px !important;
    min-height: 60px !important;
    font-size: 17px !important;
  }

  #mobilePadScreen .wclMobilePadV11 .wclMobilePadQuickMixer .wclMobilePadChannel {
    padding: 10px !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v12 — STATUS / SPECTRUM LAYOUT FIX
   Overrides legacy mobile .worshipPadNow grid rules with equal-or-higher
   specificity. The spectrum always spans the full card width; status text
   sits below it on the left and LIVE STATUS stays on the right.
   ========================================================= */
@media(max-width:900px) {
  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12.wclMobilePadStatus.worshipPadNow,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12.wclMobilePadStatus.worshipPadNow,
  #mobilePadScreen .wclMobilePadV12.wclMobilePadStatus.worshipPadNow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "meter meter"
      "status live"
      "download download" !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter,
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter {
    grid-area: meter !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(72px, 12vw, 92px) !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrum,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrum,
  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrumCanvas,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrumCanvas,
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter .wclPadSpectrumCanvas {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
  }

  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusText[data-pad-transition-status],
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusText[data-pad-transition-status],
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusText[data-pad-transition-status] {
    grid-area: status !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 18px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusHead,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusHead,
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadStatusHead {
    grid-area: live !important;
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclPadDownload,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclPadDownload,
  #mobilePadScreen .wclMobilePadV12 .wclPadDownload {
    grid-area: download !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media(max-width:430px) {
  body.is-mobile-device.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter,
  body.mobile-view-pad #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter,
  #mobilePadScreen .wclMobilePadV12 .wclMobilePadMeter.worshipPadSwellMeter {
    height: 66px !important;
    min-height: 66px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v13 — STUDIO PAD REDESIGN
   Rebuilds the mobile/tablet surface around a cleaner music-pad
   aesthetic: full-bleed live spectrum, colour-coded pad rails,
   large touch targets and quieter mixer/deck controls.
   ========================================================= */
@media(max-width:900px) {
  #mobilePadScreen .wclMobilePadV13 {
    --mp13-bg: #07101a;
    --mp13-surface: #0c1724;
    --mp13-surface-2: #101d2c;
    --mp13-surface-3: #132235;
    --mp13-border: rgba(111,146,187,.28);
    --mp13-border-soft: rgba(111,146,187,.16);
    --mp13-text: #f7fbff;
    --mp13-muted: #8294ab;
    --mp13-dim: #52657d;
    --mp13-violet: #8574ff;
    --mp13-cyan: #31e7dc;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(61,98,151,.14), transparent 30%),
      radial-gradient(circle at 100% 10%, rgba(116,78,187,.08), transparent 28%),
      linear-gradient(180deg,#09131f 0%,#07101a 100%) !important;
    box-shadow: none !important;
    color: var(--mp13-text) !important;
    overflow: visible !important;
  }

  /* Header */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 1px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadTitle {
    margin: 0 !important;
    color: #f8fbff !important;
    font-size: clamp(21px,4vw,27px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    line-height: 1 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadHeaderActions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadSettingsToggle {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--mp13-border) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg,#122033,#0d1826) !important;
    color: #a8b8cb !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 5px 16px rgba(0,0,0,.12) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadSettingsToggle svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadPower {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-height: 42px !important;
    padding: 3px !important;
    border: 1px solid var(--mp13-border) !important;
    border-radius: 14px !important;
    background: #08121d !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStop,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadState {
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStop {
    min-width: 67px !important;
    padding: 0 12px !important;
    background: linear-gradient(180deg,#653642,#4d2731) !important;
    color: #ffdbe2 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStopIcon {
    width: 5px !important;
    height: 5px !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    background: #ff8797 !important;
    box-shadow: 0 0 9px rgba(255,104,126,.5) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadState {
    min-width: 55px !important;
    padding: 0 12px !important;
    background: #111d2a !important;
    color: #687b92 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadState.on {
    background: linear-gradient(180deg,#27bd88,#179b70) !important;
    color: #f1fff8 !important;
    box-shadow: 0 0 18px rgba(39,189,136,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  /* Live display. Text occupies its own row; the spectrum is full-bleed. */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatus.worshipPadNow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(90,125,165,.38) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg,#0d1928,#09131f) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 28px rgba(0,0,0,.13) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadNowRow {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    min-width: 0 !important;
    padding: 13px 14px 11px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadNowCopy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadEyebrow {
    display: block !important;
    margin-bottom: 4px !important;
    color: #71849b !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .15em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusText[data-pad-transition-status] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #f4f8fd !important;
    font-size: clamp(13px,2.6vw,16px) !important;
    font-weight: 850 !important;
    letter-spacing: -.012em !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusText.isTransitioning {
    color: #79e9ff !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusHead {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid rgba(65,225,197,.14) !important;
    border-radius: 999px !important;
    background: rgba(21,124,105,.12) !important;
    color: #7be7d2 !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusHead i {
    width: 6px !important;
    min-width: 6px !important;
    height: 6px !important;
    min-height: 6px !important;
    border-radius: 50% !important;
    background: #35d9a3 !important;
    box-shadow: 0 0 10px rgba(53,217,163,.65) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclPadDownload {
    order: 2 !important;
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    margin: 0 14px 10px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter.worshipPadSwellMeter {
    order: 3 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: clamp(94px,16vw,126px) !important;
    min-height: 94px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgba(89,123,163,.19) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg,rgba(11,24,37,.2),rgba(4,13,22,.72)),
      radial-gradient(ellipse at 50% 105%,rgba(53,142,185,.11),transparent 62%),
      #06101a !important;
    box-shadow: inset 0 16px 30px rgba(0,0,0,.08) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter .wclPadSpectrumCanvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  /* Pad bank heading */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadBankHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 1px 2px -3px !important;
    color: #71849b !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadBankHint {
    color: #4f6278 !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
    text-transform: none !important;
  }

  /* Large colour-coded pads */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn {
    --pad-accent: #6b7f98;
    --pad-glow: rgba(107,127,152,.22);
    --pad-tint: rgba(107,127,152,.10);
    position: relative !important;
    isolation: isolate !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: clamp(66px,10vw,82px) !important;
    min-height: 66px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 11px 10px 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(92,125,163,.36) !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 38%),
      linear-gradient(180deg,#111f2f,#0c1825) !important;
    color: #f2f7fc !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 5px 14px rgba(0,0,0,.10) !important;
    transform: none !important;
    transition: transform .08s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn span {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    color: inherit !important;
    font-family: Inter,Segoe UI,Arial,sans-serif !important;
    font-size: clamp(18px,3.25vw,23px) !important;
    font-weight: 900 !important;
    letter-spacing: -.025em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.30) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn::before {
    content: "PAD" !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 9px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #52657a !important;
    box-shadow: none !important;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
    font-size: 6px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important;
    line-height: 1 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 9px !important;
    right: 9px !important;
    bottom: 0 !important;
    width: auto !important;
    height: 4px !important;
    border: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    background: var(--pad-accent) !important;
    color: transparent !important;
    opacity: .92 !important;
    box-shadow: 0 -4px 14px var(--pad-glow) !important;
    transition: left .14s ease,right .14s ease,height .14s ease,opacity .14s ease,box-shadow .14s ease !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn:active {
    transform: translateY(1px) scale(.992) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activeDroneKey,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activePadKey,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey {
    border-color: var(--pad-accent) !important;
    background:
      radial-gradient(circle at 50% 112%,var(--pad-tint),transparent 58%),
      linear-gradient(180deg,#18283a,#101b29) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      0 0 0 1px var(--pad-glow),
      0 8px 22px rgba(0,0,0,.16),
      0 0 24px var(--pad-glow) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activePadKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::after {
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    opacity: 1 !important;
    box-shadow: 0 -6px 22px var(--pad-glow),0 0 18px var(--pad-glow) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.queuedPadKey {
    border-color: rgba(138,151,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(138,151,255,.14) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.fadingOutPadKey {
    opacity: .62 !important;
    filter: saturate(.72) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="A"]  { --pad-accent:#ff9667; --pad-glow:rgba(255,150,103,.28); --pad-tint:rgba(255,150,103,.19); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="A#"] { --pad-accent:#ff718f; --pad-glow:rgba(255,113,143,.28); --pad-tint:rgba(255,113,143,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="B"]  { --pad-accent:#ef66c9; --pad-glow:rgba(239,102,201,.28); --pad-tint:rgba(239,102,201,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="C"]  { --pad-accent:#b66fff; --pad-glow:rgba(182,111,255,.28); --pad-tint:rgba(182,111,255,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="C#"] { --pad-accent:#8179ff; --pad-glow:rgba(129,121,255,.28); --pad-tint:rgba(129,121,255,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="D"]  { --pad-accent:#5e91ff; --pad-glow:rgba(94,145,255,.28); --pad-tint:rgba(94,145,255,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="D#"] { --pad-accent:#43b4ff; --pad-glow:rgba(67,180,255,.28); --pad-tint:rgba(67,180,255,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="E"]  { --pad-accent:#37d7df; --pad-glow:rgba(55,215,223,.28); --pad-tint:rgba(55,215,223,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="F"]  { --pad-accent:#42d69c; --pad-glow:rgba(66,214,156,.28); --pad-tint:rgba(66,214,156,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="F#"] { --pad-accent:#75d766; --pad-glow:rgba(117,215,102,.28); --pad-tint:rgba(117,215,102,.18); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="G"]  { --pad-accent:#bed35c; --pad-glow:rgba(190,211,92,.27); --pad-tint:rgba(190,211,92,.17); }
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid [data-pad-key="G#"] { --pad-accent:#f0c85b; --pad-glow:rgba(240,200,91,.28); --pad-tint:rgba(240,200,91,.18); }

  /* Mixer */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadQuickMixer {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadQuickMixer .wclMobilePadChannel {
    min-width: 0 !important;
    padding: 12px 13px 10px !important;
    border: 1px solid var(--mp13-border-soft) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,#0e1926,#0a1520) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadQuickMixer .wclMobilePadChannel + .wclMobilePadChannel {
    border-left: 1px solid var(--mp13-border-soft) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadModuleHead {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 20px !important;
    margin: 0 0 8px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadModuleHead strong {
    color: #9aacbf !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadModuleHead span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: rgba(240,200,91,.08) !important;
    color: #f0ca61 !important;
    font-size: 8px !important;
    font-weight: 900 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange {
    --wcl-range-fill: 50%;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    touch-action: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange::-webkit-slider-runnable-track {
    height: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#8174ff 0 var(--wcl-range-fill),#34475f var(--wcl-range-fill) 100%) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadChannel:nth-child(2) .wclMobilePadRange::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,#37d7df 0 var(--wcl-range-fill),#34475f var(--wcl-range-fill) 100%) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-top: -7px !important;
    border: 2px solid #07111c !important;
    border-radius: 50% !important;
    background: #8b7cff !important;
    box-shadow: 0 0 0 2px rgba(139,124,255,.20),0 2px 9px rgba(0,0,0,.35) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadChannel:nth-child(2) .wclMobilePadRange::-webkit-slider-thumb {
    background: #3edbe1 !important;
    box-shadow: 0 0 0 2px rgba(62,219,225,.17),0 2px 9px rgba(0,0,0,.35) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange::-moz-range-track {
    height: 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #34475f !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange::-moz-range-progress {
    height: 6px !important;
    border-radius: 999px !important;
    background: #8174ff !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadChannel:nth-child(2) .wclMobilePadRange::-moz-range-progress {
    background: #37d7df !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadRange::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #07111c !important;
    border-radius: 50% !important;
    background: #8b7cff !important;
    box-shadow: 0 0 0 2px rgba(139,124,255,.20),0 2px 9px rgba(0,0,0,.35) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadChannel:nth-child(2) .wclMobilePadRange::-moz-range-thumb {
    background: #3edbe1 !important;
  }

  /* Deck mode: compact footer rather than another large box. */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode {
    display: grid !important;
    grid-template-columns: minmax(80px,.34fr) minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border: 1px solid var(--mp13-border-soft) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,#0d1824,#09131e) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.024) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadModuleHead {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadModuleHead strong {
    display: block !important;
    margin: 0 0 4px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadModuleHead span {
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6e8198 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadSegment {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding: 3px !important;
    border: 1px solid rgba(87,119,157,.36) !important;
    border-radius: 11px !important;
    background: #07111a !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadSegment button {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #71839a !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode .wclMobilePadSegment button.activePadLayerMode {
    background: linear-gradient(180deg,#3c4f6b,#30415a) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 3px 9px rgba(0,0,0,.13) !important;
  }

  /* Settings sheet follows the new surface language. */
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadSettings {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--mp13-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg,#101d2b,#0a1520) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadSettings[hidden] {
    display: none !important;
  }
}

@media(max-width:520px) {
  #mobilePadScreen .wclMobilePadV13 {
    gap: 10px !important;
    padding: 11px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadTitle {
    font-size: 21px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter.worshipPadSwellMeter {
    height: 88px !important;
    min-height: 88px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid {
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 13px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn span {
    font-size: 17px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadQuickMixer {
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadQuickMixer .wclMobilePadChannel {
    padding: 10px 11px 8px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadDeckMode {
    grid-template-columns: 82px minmax(0,1fr) !important;
    gap: 8px !important;
  }
}

@media(max-width:370px) {
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadPower {
    gap: 3px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStop {
    min-width: 58px !important;
    padding: 0 9px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadState {
    min-width: 46px !important;
    padding: 0 9px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadBankHint {
    display: none !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v14 — PAD RAIL STABILITY
   Keep the coloured hardware-style rail fixed to the bottom
   in every key state. Active keys intensify colour/glow only;
   they never move or become thicker.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activePadKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.queuedPadKey::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 9px 0 9px !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: 3px !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 3px 3px 0 0 !important;
    background: var(--pad-accent) !important;
    color: transparent !important;
    opacity: .92 !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: 0 -3px 11px var(--pad-glow) !important;
    transition: opacity .14s ease,box-shadow .14s ease,filter .14s ease !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.activePadKey::after,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::after {
    opacity: 1 !important;
    filter: brightness(1.12) saturate(1.08) !important;
    box-shadow: 0 -4px 15px var(--pad-glow),0 0 10px var(--pad-glow) !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v16 — EQ CARD + STATUS BELOW
   Keep the analyser as its own full-width surface. The
   now-playing / transition copy lives outside the EQ card,
   directly beneath it, so it can never overlap the spectrum.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatus.worshipPadNow {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter.worshipPadSwellMeter {
    order: 1 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: clamp(96px,16vw,126px) !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(90,125,165,.38) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg,rgba(11,24,37,.20),rgba(4,13,22,.72)),
      radial-gradient(ellipse at 50% 105%,rgba(53,142,185,.11),transparent 62%),
      #06101a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.12) !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter .wclPadSpectrumCanvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadNowRow {
    order: 2 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 3px 3px 1px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadNowCopy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadEyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    color: #71849b !important;
    font-size: 6.5px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusText[data-pad-transition-status] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #f4f8fd !important;
    font-size: clamp(12px,2.45vw,15px) !important;
    font-weight: 850 !important;
    letter-spacing: -.012em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusText.isTransitioning {
    color: #79e9ff !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusHead {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid rgba(65,225,197,.14) !important;
    border-radius: 999px !important;
    background: rgba(21,124,105,.12) !important;
    color: #7be7d2 !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclPadDownload {
    order: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 520px) {
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV13 .wclMobilePadMeter.worshipPadSwellMeter {
    height: 92px !important;
    min-height: 92px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadNowRow {
    min-height: 38px !important;
    padding: 2px 2px 0 !important;
    gap: 9px !important;
  }

  #mobilePadScreen .wclMobilePadV13 .wclMobilePadStatusHead {
    height: 24px !important;
    padding: 0 8px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v17 — HARD DOM SEPARATION
   The equalizer and status text are now separate sibling
   sections in the HTML. This is intentionally structural,
   not just a visual CSS move, so transition/deck messages
   cannot render inside the analyser card on mobile.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(96px, 16vw, 126px) !important;
    min-height: 96px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(90,125,165,.38) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg,rgba(11,24,37,.20),rgba(4,13,22,.72)),
      radial-gradient(ellipse at 50% 105%,rgba(53,142,185,.11),transparent 62%),
      #06101a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 8px 22px rgba(0,0,0,.12) !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell .wclMobilePadMeter,
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell .worshipPadSwellMeter,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell .wclMobilePadMeter,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell .worshipPadSwellMeter {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell .wclPadSpectrum,
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell .wclPadSpectrumCanvas,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell .wclPadSpectrum,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell .wclPadSpectrumCanvas {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
  }

  /* Status is a completely separate strip below the EQ. */
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadStatus.worshipPadNow,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadStatus.worshipPadNow {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: -2px 0 0 !important;
    padding: 0 3px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Defensive: never allow the audio engine to place a meter in the text strip. */
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadStatus.worshipPadNow > .worshipPadSwellMeter,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadStatus.worshipPadNow > .worshipPadSwellMeter {
    display: none !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadNowRow,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadNowRow {
    display: flex !important;
    position: relative !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadNowCopy,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadNowCopy {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: calc(100% - 62px) !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEyebrow,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEyebrow {
    display: block !important;
    margin: 0 0 4px !important;
    color: #71849b !important;
    font-size: 6.5px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadStatusText[data-pad-transition-status],
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadStatusText[data-pad-transition-status] {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: #f4f8fd !important;
    font-size: clamp(12px,2.45vw,15px) !important;
    font-weight: 850 !important;
    letter-spacing: -.012em !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    inset: auto !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadStatusText.isTransitioning,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadStatusText.isTransitioning {
    color: #79e9ff !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadStatusHead,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadStatusHead {
    position: static !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid rgba(65,225,197,.14) !important;
    border-radius: 999px !important;
    background: rgba(21,124,105,.12) !important;
    color: #7be7d2 !important;
    transform: none !important;
    inset: auto !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadDownload,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadDownload {
    width: 100% !important;
    min-width: 0 !important;
    margin: 6px 0 0 !important;
  }
}

@media (max-width: 520px) {
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadEqShell,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadEqShell {
    height: 92px !important;
    min-height: 92px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v18 — HEADER FIT + QUIETER STATUS
   - Gives Stop/OFF a proper framed inset so neither pill clips.
   - Reduces Ready / transition copy for a cleaner status strip.
   - LIVE is neutral grey when idle and green only with audio.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadHeader,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadHeader {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 2px !important;
    overflow: visible !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadTitle,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadTitle {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadHeaderActions,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadHeaderActions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadPower,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadPower {
    box-sizing: border-box !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 5px !important;
    overflow: hidden !important;
    border: 1px solid rgba(92,126,164,.46) !important;
    border-radius: 14px !important;
    background: #08121d !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStop,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStop,
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadState,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadState {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStop,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStop {
    min-width: 60px !important;
    padding: 0 10px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadState,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadState {
    min-width: 49px !important;
    padding: 0 10px !important;
  }

  /* Smaller status copy: still readable, but no longer competes with the pads. */
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStatusText[data-pad-transition-status],
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStatusText[data-pad-transition-status] {
    font-size: clamp(10.5px, 2vw, 12.5px) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -.006em !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadEyebrow,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadEyebrow {
    margin-bottom: 3px !important;
    font-size: 6px !important;
  }

  /* LIVE pill: grey when idle. */
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStatusHead,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStatusHead {
    border-color: rgba(127,145,166,.18) !important;
    background: rgba(93,111,132,.10) !important;
    color: #7b8da3 !important;
    box-shadow: none !important;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStatusHead i,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStatusHead i {
    background: #66778b !important;
    box-shadow: none !important;
    transition: background .18s ease, box-shadow .18s ease !important;
  }

  /* Actual audio playing: green LIVE state. */
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStatusHead.isLive,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStatusHead.isLive {
    border-color: rgba(65,225,197,.22) !important;
    background: rgba(21,124,105,.14) !important;
    color: #7be7d2 !important;
    box-shadow: inset 0 0 0 1px rgba(53,217,163,.015) !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStatusHead.isLive i,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStatusHead.isLive i {
    background: #35d9a3 !important;
    box-shadow: 0 0 9px rgba(53,217,163,.58) !important;
  }
}

@media (max-width: 390px) {
  #mobilePadScreen .wclMobilePadV18 .wclMobilePadTitle,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadTitle {
    font-size: 19px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadSettingsToggle,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadSettingsToggle {
    width: 39px !important;
    min-width: 39px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadHeaderActions,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadHeaderActions {
    gap: 5px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadPower,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadPower {
    gap: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadStop,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadStop {
    min-width: 55px !important;
    padding: 0 8px !important;
  }

  #mobilePadScreen .wclMobilePadV18 .wclMobilePadState,
  #mobileWidgetMount .wclMobilePadV18 .wclMobilePadState {
    min-width: 44px !important;
    padding: 0 8px !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v19 — COMPACT POWER CONTROL
   Stop/OFF are deliberately smaller than the containing shell,
   leaving visible padding on every side instead of touching the border.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV19 .wclMobilePadPower,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadPower {
    box-sizing: border-box !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 4px 5px !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 13px !important;
  }

  #mobilePadScreen .wclMobilePadV19 .wclMobilePadStop,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadStop {
    box-sizing: border-box !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #mobilePadScreen .wclMobilePadV19 .wclMobilePadState,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadState {
    box-sizing: border-box !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  #mobilePadScreen .wclMobilePadV19 .wclMobilePadStopIcon,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadStopIcon {
    width: 4px !important;
    min-width: 4px !important;
    height: 4px !important;
    margin-right: 4px !important;
  }
}

@media (max-width: 390px) {
  #mobilePadScreen .wclMobilePadV19 .wclMobilePadPower,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadPower {
    width: 98px !important;
    min-width: 98px !important;
    max-width: 98px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 3px !important;
  }

  #mobilePadScreen .wclMobilePadV19 .wclMobilePadStop,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadStop {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #mobilePadScreen .wclMobilePadV19 .wclMobilePadState,
  #mobileWidgetMount .wclMobilePadV19 .wclMobilePadState {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v20 — CLEAN PAD MARKERS + 4 × 3 GRID
   - Removes the tiny "PAD" word from every touch pad.
   - Replaces it with a compact 12 × 12 hardware-style status square.
   - Locks the mobile bank to 4 columns × 3 rows.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, auto)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hardware-style square where the old PAD label used to be. */
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn::before {
    content: "" !important;
    position: absolute !important;
    z-index: 4 !important;
    top: 9px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--pad-accent) 58%, #5c7088 42%) !important;
    border-radius: 3px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
      color-mix(in srgb, var(--pad-accent) 22%, #0a1623 78%) !important;
    color: transparent !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 0 0 1px rgba(0,0,0,.20) !important;
    opacity: .68 !important;
    pointer-events: none !important;
    transition: opacity .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease !important;
  }

  /* Bring the square to life for the selected / active pad. */
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::before,
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.activePadKey::before,
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.activePadKey::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::before {
    border-color: var(--pad-accent) !important;
    background: var(--pad-accent) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      0 0 10px var(--pad-glow) !important;
    opacity: 1 !important;
  }

  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.queuedPadKey::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn.queuedPadKey::before {
    border-color: var(--pad-accent) !important;
    background: color-mix(in srgb, var(--pad-accent) 55%, #0a1623 45%) !important;
    box-shadow: 0 0 8px var(--pad-glow) !important;
    opacity: .92 !important;
  }
}

/* Keep the 4 × 3 bank on narrow phones as well — no wrapping to 2 columns. */
@media (max-width: 390px) {
  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, auto)) !important;
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn::before,
  #mobileWidgetMount .wclMobilePadV20 .wclMobilePadGrid .droneKeyBtn::before {
    top: 8px !important;
    left: 8px !important;
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
  }
}

/* =========================================================
   WCL MOBILE WORSHIP PAD v21 — SQUARE HARDWARE PADS
   - Pad buttons themselves are square, like a hardware pad bank.
   - Keeps the 4-column × 3-row layout.
   - Removes the small coloured square marker completely.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-flow: row !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  /* The touch target is the square — no PAD label or indicator square. */
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn {
    width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn::before,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn::before,
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::before,
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.activePadKey::before,
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::before,
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.queuedPadKey::before,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.activeDroneKey::before,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.activePadKey::before,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.lastSelectedPadKey::before,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn.queuedPadKey::before {
    content: none !important;
    display: none !important;
  }

  /* Keep the note visually centred in the larger hardware-style square. */
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn span,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn span {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    font-size: clamp(20px, 4vw, 28px) !important;
    line-height: 1 !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    gap: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn {
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    padding: 7px !important;
  }

  #mobilePadScreen .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn span,
  #mobileWidgetMount .wclMobilePadV21 .wclMobilePadGrid .droneKeyBtn span {
    font-size: clamp(18px, 5vw, 23px) !important;
  }
}


/* =========================================================
   WCL MOBILE WORSHIP PAD v22 — ACTIVATE TRUE SQUARE PAD BANK
   v21 square-pad rules were present but the rendered mobile pad
   did not carry the wclMobilePadV21 class. v22 activates them.
   ========================================================= */


/* =========================================================
   WCL MOBILE WORSHIP PAD v23 — CLEAN HARDWARE PAD REBUILD
   The mobile key bank no longer inherits the legacy .droneKeyBtn
   geometry. Each key is a genuine 1:1 hardware-style square.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV23,
  #mobileWidgetMount .wclMobilePadV23 {
    --wcl-pad-gap: clamp(8px, 1.8vw, 12px);
  }

  #mobilePadScreen .wclMobilePadV23 .wclMobilePadGrid.wclHardwarePadGrid,
  #mobileWidgetMount .wclMobilePadV23 .wclMobilePadGrid.wclHardwarePadGrid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: var(--wcl-pad-gap) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: visible !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #29435c !important;
    border-radius: clamp(12px, 2.2vw, 18px) !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background:
      radial-gradient(circle at 50% 112%, var(--pad-glow, rgba(96,165,250,.16)), transparent 47%),
      linear-gradient(180deg, #142438 0%, #0b1827 100%) !important;
    color: #f8fbff !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -10px 22px rgba(0,0,0,.20),
      0 5px 12px rgba(0,0,0,.18) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .10s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease !important;
  }

  /* No PAD text, no marker square. */
  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad::before,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad::before {
    content: none !important;
    display: none !important;
  }

  /* Thin colour rail across the bottom of each physical pad. */
  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad::after,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    left: 10% !important;
    right: 10% !important;
    bottom: 7px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: var(--pad-accent, #5da9ff) !important;
    box-shadow: 0 0 8px var(--pad-glow, rgba(96,165,250,.22)) !important;
    opacity: .95 !important;
    pointer-events: none !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad > span,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad > span {
    position: relative !important;
    z-index: 2 !important;
    inset: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(22px, 4.5vw, 34px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    color: #f8fbff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
    pointer-events: none !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad:active,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad:active {
    transform: scale(.965) !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.activeDroneKey,
  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.lastSelectedPadKey,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.activeDroneKey,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.lastSelectedPadKey {
    border-color: var(--pad-accent, #5da9ff) !important;
    background:
      radial-gradient(circle at 50% 100%, var(--pad-tint, rgba(96,165,250,.20)), transparent 60%),
      linear-gradient(180deg, #17283c 0%, #0d1b2a 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -10px 28px var(--pad-tint, rgba(96,165,250,.12)),
      0 0 0 1px color-mix(in srgb, var(--pad-accent, #5da9ff) 40%, transparent),
      0 0 18px var(--pad-glow, rgba(96,165,250,.24)) !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.activeDroneKey::after,
  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.lastSelectedPadKey::after,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.activeDroneKey::after,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.lastSelectedPadKey::after {
    height: 3px !important;
    left: 7% !important;
    right: 7% !important;
    box-shadow: 0 0 13px var(--pad-accent, #5da9ff) !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.queuedPadKey,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.queuedPadKey {
    border-color: color-mix(in srgb, var(--pad-accent, #5da9ff) 72%, #ffffff 28%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 15px var(--pad-glow, rgba(96,165,250,.24)) !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad.fadingOutPadKey,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad.fadingOutPadKey {
    opacity: .58 !important;
  }

  /* Per-pad hardware accent colours. */
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="A"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="A"]  { --pad-accent:#ff9667; --pad-glow:rgba(255,150,103,.30); --pad-tint:rgba(255,150,103,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="A#"], #mobileWidgetMount .wclMobilePadV23 [data-pad-key="A#"] { --pad-accent:#ff718f; --pad-glow:rgba(255,113,143,.30); --pad-tint:rgba(255,113,143,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="B"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="B"]  { --pad-accent:#ef66c9; --pad-glow:rgba(239,102,201,.30); --pad-tint:rgba(239,102,201,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="C"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="C"]  { --pad-accent:#b66fff; --pad-glow:rgba(182,111,255,.30); --pad-tint:rgba(182,111,255,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="C#"], #mobileWidgetMount .wclMobilePadV23 [data-pad-key="C#"] { --pad-accent:#8179ff; --pad-glow:rgba(129,121,255,.30); --pad-tint:rgba(129,121,255,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="D"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="D"]  { --pad-accent:#5e91ff; --pad-glow:rgba(94,145,255,.30); --pad-tint:rgba(94,145,255,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="D#"], #mobileWidgetMount .wclMobilePadV23 [data-pad-key="D#"] { --pad-accent:#43b4ff; --pad-glow:rgba(67,180,255,.30); --pad-tint:rgba(67,180,255,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="E"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="E"]  { --pad-accent:#37d7df; --pad-glow:rgba(55,215,223,.30); --pad-tint:rgba(55,215,223,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="F"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="F"]  { --pad-accent:#42d69c; --pad-glow:rgba(66,214,156,.30); --pad-tint:rgba(66,214,156,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="F#"], #mobileWidgetMount .wclMobilePadV23 [data-pad-key="F#"] { --pad-accent:#75d766; --pad-glow:rgba(117,215,102,.30); --pad-tint:rgba(117,215,102,.20); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="G"],  #mobileWidgetMount .wclMobilePadV23 [data-pad-key="G"]  { --pad-accent:#bed35c; --pad-glow:rgba(190,211,92,.29); --pad-tint:rgba(190,211,92,.19); }
  #mobilePadScreen .wclMobilePadV23 [data-pad-key="G#"], #mobileWidgetMount .wclMobilePadV23 [data-pad-key="G#"] { --pad-accent:#f0c85b; --pad-glow:rgba(240,200,91,.30); --pad-tint:rgba(240,200,91,.20); }
}

/* On very narrow phones the 4 × 3 geometry is still preserved. */
@media (max-width: 390px) {
  #mobilePadScreen .wclMobilePadV23,
  #mobileWidgetMount .wclMobilePadV23 {
    --wcl-pad-gap: 7px;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad {
    border-radius: 11px !important;
  }

  #mobilePadScreen .wclMobilePadV23 .wclHardwarePad > span,
  #mobileWidgetMount .wclMobilePadV23 .wclHardwarePad > span {
    font-size: clamp(18px, 5vw, 25px) !important;
  }
}


/* =========================================================
   WCL Worship Pad playback countdown + seamless-loop status v25
   ========================================================= */
.wclPadPlaybackTimer {
  display: block;
  width: 100%;
  min-width: 0;
  margin: -3px 0 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b9d9f5;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow-wrap: anywhere;
}
.wclPadStatusText + .wclPadPlaybackTimer,
.wclPadRebuild [data-pad-transition-status] + .wclPadPlaybackTimer {
  margin-top: -4px;
}
html[data-theme="light"] body:not(.performance) .wclPadPlaybackTimer {
  background: transparent;
  border-color: transparent;
  color: #4b6884;
}
@media (max-width: 900px) {
  #mobileWidgetMount .wclPadPlaybackTimer,
  #mobilePadScreen .wclPadPlaybackTimer,
  .mobilePadScreen .wclPadPlaybackTimer {
    width: 100%;
    margin-top: -3px;
    padding: 0;
    font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size: 11px;
    line-height: 1.35;
  }
}


/* =========================================================
   WCL Worship Pad mobile playback timer v27
   Keep the timer directly under "Playing: …" in the standalone
   mobile pad and match the now-playing typography.
   ========================================================= */
@media (max-width: 900px) {
  #mobilePadScreen .wclMobilePadV17 .wclMobilePadNowCopy,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadNowCopy {
    justify-content: center !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadPlaybackTimer,
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadPlaybackTimer {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #9eb3ca !important;
    font-family: inherit !important;
    font-size: clamp(10px, 1.9vw, 12px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.006em !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mobilePadScreen .wclMobilePadV17 .wclMobilePadPlaybackTimer[data-pad-loop="0"],
  #mobileWidgetMount .wclMobilePadV17 .wclMobilePadPlaybackTimer[data-pad-loop="0"] {
    visibility: hidden !important;
  }

  html[data-theme="light"] body:not(.performance) #mobilePadScreen .wclMobilePadV17 .wclMobilePadPlaybackTimer,
  html[data-theme="light"] body:not(.performance) #mobileWidgetMount .wclMobilePadV17 .wclMobilePadPlaybackTimer {
    color: #58708a !important;
  }
}


/* =========================================================
   WCL PROPORTIONAL CHART ZOOM FIX v1
   Keep the sheet geometry in step with chart text zoom.
   ========================================================= */
html body #chartOutput {
  padding-left: var(--wcl-chart-sheet-pad-x, 12px) !important;
  padding-right: var(--wcl-chart-sheet-pad-x, 12px) !important;
}

body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.twoColumns {
  column-gap: var(--wcl-chart-column-gap, 54px) !important;
}

html body #chartOutput .wclChordLyricPair {
  margin-top: var(--wcl-chart-pair-gap, 2px) !important;
}

html body #chartOutput .wclChordLyricPair .wclPairVisualLine + .wclPairVisualLine {
  margin-top: var(--wcl-chart-pair-gap, 2px) !important;
}

/* =========================================================
   WCL MOBILE COMPACT UI + ONS0NG-STYLE SECTION LABELS v29
   ========================================================= */

/* Section headings should read like chart annotations, not coloured cards. */
body:not(.performance):not(.confidence) #chartOutput .sectionBlock .sectionLabel {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  margin: 1.05em 0 .28em !important;
  padding: .12em 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wcl-sheet-muted,#64748b) !important;
  font-family: var(--wcl-chart-font,Consolas,"Courier New",monospace) !important;
  font-size: .72em !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  letter-spacing: .035em !important;
  text-transform: none !important;
  opacity: .82;
}
body:not(.performance):not(.confidence) #chartOutput .sectionBlock:first-child .sectionLabel {
  margin-top: 0 !important;
}
body:not(.performance):not(.confidence) #chartOutput .sectionLabel .sectionToggleIcon {
  width: .75em !important;
  min-width: .75em !important;
  margin: 0 !important;
  font-size: .78em !important;
  opacity: .28 !important;
}
body:not(.performance):not(.confidence) #chartOutput .sectionLabel .sectionName {
  color: inherit !important;
  font: inherit !important;
}
body:not(.performance):not(.confidence) #chartOutput .sectionLabel:hover,
body:not(.performance):not(.confidence) #chartOutput .sectionLabel:focus-visible {
  color: var(--wcl-sheet-ink,#172033) !important;
  opacity: .96;
  background: transparent !important;
}
body[data-wcl-chart-background="dark"] #chartOutput .sectionLabel,
body[data-wcl-chart-background="black"] #chartOutput .sectionLabel {
  color: var(--wcl-sheet-muted,#aeb8c7) !important;
}

/* Make the selected sheet background fill the actual chord sheet on mobile too. */
body:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput {
  background: var(--wcl-sheet-bg,#fffdf9) !important;
  color: var(--wcl-sheet-ink,#172033) !important;
}

@media(max-width:900px) {
  :root {
    --mobileTop: 43px !important;
    --mobileNav: 58px !important;
    --navH: 56px !important;
  }

  /* Compact top navigation. */
  .desktopAppBar {
    height: var(--mobileTop) !important;
    min-height: var(--mobileTop) !important;
    padding: 0 6px !important;
    gap: 5px !important;
  }
  .desktopLogo {
    width: 20px !important;
    height: 20px !important;
  }
  .desktopBrandText strong {
    font-size: 10.5px !important;
  }
  .desktopMenu > button {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
  }
  .desktopDropdown {
    top: 40px !important;
  }

  /* Tighter song header and horizontal controls. */
  .topbar {
    padding: 7px 10px 6px !important;
  }
  .songTitleLine {
    min-height: 29px !important;
  }
  #songTitle, h1 {
    font-size: 19px !important;
  }
  #songMeta, #flowMeta {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }
  .topbar .controls {
    gap: 5px !important;
    margin-top: 6px !important;
  }
  .topbar .controls > button,
  .topbar .controls > select,
  .topbar .controls > .mobileAutoTop {
    min-width: 36px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
  .topbar .mobileAutoTop {
    width: 116px !important;
    padding: 0 6px !important;
  }
  .topbar .mobileAutoTop button {
    width: 39px !important;
    min-width: 39px !important;
    height: 25px !important;
    min-height: 25px !important;
    font-size: 9.5px !important;
  }
  .topbar .mobileAutoTop input {
    width: 52px !important;
  }

  /* Smaller floating bottom navigation while keeping usable touch areas. */
  .mobileBottomNav {
    bottom: max(5px,env(safe-area-inset-bottom)) !important;
    width: min(420px,calc(100vw - 18px)) !important;
    max-width: 420px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 4px 5px !important;
    gap: 0 !important;
    border-radius: 22px !important;
  }
  .mobileBottomNav > button[data-mobile-view],
  .mobileBottomNav .wclNavButton,
  .mobileBottomNav .wclNavUtility[data-mobile-view] {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 18px !important;
    font-size: 18px !important;
  }
  .mobileBottomNav .wclNavIcon,
  .mobileBottomNav .wclUtilityNavIcon {
    width: 19px !important;
    height: 19px !important;
    font-size: 18px !important;
  }
  .mobileBottomNav .wclNavIcon svg {
    width: 19px !important;
    height: 19px !important;
  }
  .mobileBottomNav > button[data-mobile-view].active::after {
    bottom: 2px !important;
    width: 3px !important;
    height: 3px !important;
  }
  .mobileBottomNav .wclPadNavButton.padAudioActive::after,
  .mobileBottomNav [data-mobile-view="pad"].padAudioActive::after {
    top: 5px !important;
    right: 6px !important;
    width: 5px !important;
    height: 5px !important;
  }

  #chartOutput, .chartOutput {
    padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
  .sidebar {
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }
  #songList {
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  /* Swipe feedback: JS moves the active screen; this keeps it GPU-smooth. */
  body.wclMenuSwipeTracking .main,
  body.wclMenuSwipeTracking .sidebar,
  body.wclMenuSwipeTracking #mobilePadScreen,
  body.wclMenuSwipeTracking #wclGuitarTunerFloat,
  body.wclMenuSwipeTracking #wclYoutubePlayer {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Keep section labels extra quiet on the phone-sized chart. */
  body:not(.performance):not(.confidence) #chartOutput .sectionBlock .sectionLabel {
    margin-top: .92em !important;
    margin-bottom: .2em !important;
    font-size: .68em !important;
    letter-spacing: .025em !important;
  }
}


/* =========================================================
   WCL DISPLAY STATE + THREE COLUMN FIX v30
   Keep Aa display selections authoritative in normal, focus and Stage Dark.
   ========================================================= */

/* Font colour must apply to the rendered lyric rows, not just their parent. */
html body #chartOutput .sectionContent,
html body #chartOutput .chartLine:not(.chordRow),
html body #chartOutput .lyricRow {
  color: var(--wcl-chart-text-colour,var(--wcl-sheet-ink,#172033)) !important;
}
html body #chartOutput .chordRow,
html body #chartOutput .chordRow .chord,
html body #chartOutput .chord,
html body #chartOutput .numberChord {
  color: var(--chord,#0057d9) !important;
}

/* Stage Dark uses the same sheet variables so Aa remains live/editable. */
body.confidence .contentArea,
body.confidence .chart,
body.confidence #chartOutput,
body.confidence .chartOutput {
  background: var(--wcl-sheet-bg,#172033) !important;
  color: var(--wcl-chart-text-colour,var(--wcl-sheet-ink,#f8fafc)) !important;
}
body.confidence #chartOutput .sectionBlock .sectionLabel,
body.confidence #chartOutput .sectionLabel {
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 1.05em 0 .28em !important;
  padding: .12em 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--wcl-sheet-muted,#aeb8c7) !important;
  opacity: .84 !important;
}
body.confidence #chartOutput .sectionLabel .sectionName {
  color: inherit !important;
}
body.confidence #chartOutput .sectionLabel .sectionToggleIcon {
  opacity: .28 !important;
}

/* Focus/up-arrow mode must retain the user's saved chord-sheet background. */
body.chart-focus .contentArea,
body.chart-focus .chart,
body.chart-focus #chartOutput,
body.chart-focus .chartOutput,
body.chart-focus.is-mobile-device .contentArea,
body.chart-focus.is-mobile-device .chart,
body.chart-focus.is-mobile-device #chartOutput,
body.chart-focus.is-mobile-device .chartOutput {
  background: var(--wcl-sheet-bg,#fffdf9) !important;
  color: var(--wcl-chart-text-colour,var(--wcl-sheet-ink,#172033)) !important;
}

/* Three-column chart layout. Auto continues to choose one/two columns. */
@media(min-width:901px) {
  body:not(.performance):not(.confidence):not(.chart-focus) .chartOutput.threeColumns {
    column-count: 3 !important;
    column-gap: max(24px,calc(var(--wcl-chart-column-gap,54px) * .72)) !important;
    column-rule: 1px solid rgba(100,116,139,.14);
  }
}

/* Tuner remains available from Tools; the dock now contains six visible items. */
@media(max-width:900px) {
  .mobileBottomNav {
    grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  }
}


/* =========================================================
   WCL MOBILE NAV + EXPLICIT 3-COLUMN FIX v31
   - Dock fits the buttons that actually exist; no tuner ghost slot.
   - Manual 2/3-column selections override the legacy mobile 1-column rule.
   ========================================================= */

/* Explicit column choices should work in every chart presentation mode. */
html body #chartOutput.chartOutput.threeColumns {
  column-count: 3 !important;
  column-gap: max(18px, calc(var(--wcl-chart-column-gap,54px) * .68)) !important;
  column-rule: 1px solid rgba(100,116,139,.14);
}
html body #chartOutput.chartOutput.twoColumns {
  column-count: 2 !important;
}
html body #chartOutput.chartOutput.oneColumn {
  column-count: 1 !important;
}
html body #chartOutput.chartOutput.threeColumns .sectionBlock,
html body #chartOutput.chartOutput.twoColumns .sectionBlock {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
}

/* Give a three-column sheet more useful width on desktop. */
@media (min-width:901px) {
  body:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput.threeColumns {
    width: min(1480px,calc(100% - 8px)) !important;
    max-width: 1480px !important;
  }
}

/* On phones, honour a manual column choice instead of silently reverting to 1. */
@media (max-width:900px) {
  html body #chartOutput.chartOutput.threeColumns {
    column-count: 3 !important;
    column-gap: 14px !important;
    column-rule: 1px solid rgba(100,116,139,.12);
  }
  html body #chartOutput.chartOutput.twoColumns {
    column-count: 2 !important;
    column-gap: 18px !important;
  }

  /* Fit-content dock: six destinations when YouTube is present, five when it is hidden. */
  body.is-mobile-device .mobileBottomNav,
  body.mobile-view-songs .mobileBottomNav,
  body.mobile-view-set .mobileBottomNav,
  body.mobile-view-tools .mobileBottomNav,
  body.mobile-view-pad .mobileBottomNav,
  body.mobileShowSongs .mobileBottomNav,
  body.mobileShowSet .mobileBottomNav,
  body.mobileShowTools .mobileBottomNav,
  body.mobileShowPads .mobileBottomNav,
  .mobileBottomNav {
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100vw - 22px) !important;
    min-width: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1px !important;
    grid-template-columns: none !important;
  }

  .mobileBottomNav > button[data-mobile-view],
  .mobileBottomNav .wclNavButton,
  .mobileBottomNav .wclNavUtility[data-mobile-view] {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }

  /* Fullscreen remains hidden from the compact mobile dock. */
  .mobileBottomNav .mobileFullscreenNav {
    display: none !important;
  }

  /* If there is no current song, YouTube is hidden and flex closes the space automatically. */
  body.wcl-no-song .mobileBottomNav .mobileYoutubeNav {
    display: none !important;
  }
}

/* =========================================================
   WCL SECTION MODULATION + MOBILE SHEET 2026-10-25
   Each section owns a single native, accessible key picker.
   Deliberately placed after the legacy themes/layout overrides.
   ========================================================= */
#chartOutput .wclSectionHeading {
  display: flex !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 3px;
}
#chartOutput .wclSectionHeading .sectionLabel {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 2px 0 !important;
  min-height: 26px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}
#chartOutput .wclSectionHeading .sectionName {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
#chartOutput .wclSectionKeyControl {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  min-width: 70px;
  max-width: 136px;
  padding: 2px 9px;
  border-radius: 9px;
  border: 1px solid rgba(100,116,139,.25);
  background: rgba(148,163,184,.085);
  color: var(--wcl-sheet-muted,#64748b);
  white-space: nowrap;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
}
#chartOutput .wclSectionKeyControl .wclSectionKeyCaption {
  font-size: 9px !important;
  letter-spacing: .055em;
  opacity: .8;
}
#chartOutput .wclSectionKeyControl .wclSectionKeyValue {
  font-size: 12px !important;
  color: var(--wcl-sheet-ink,#172033);
}
#chartOutput .wclSectionKeyControl .wclSectionKeyChevron {
  font-size: 13px;
  opacity: .6;
  margin-left: 1px;
}
#chartOutput .wclSectionKeyControl select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
  border: 0;
  font-size: 16px; /* Prevents iPhone zoom when opening the picker. */
}
#chartOutput .wclSectionKeyControl:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
#chartOutput .wclSectionKeyControl.is-modulated {
  background: rgba(37,99,235,.11) !important;
  border-color: rgba(37,99,235,.35) !important;
}
#chartOutput .wclSectionKeyControl.is-modulated .wclSectionKeyValue,
#chartOutput .wclSectionKeyControl.is-modulated .wclSectionKeyCaption {
  color: var(--chord,#0057d9) !important;
  opacity: 1;
}
#chartOutput .wclSectionModulated {
  border-inline-start: 2px solid var(--chord,#0057d9);
  padding-inline-start: 7px;
}
.mobileSheetDensityBtn { display: none; }

@media (max-width:900px) {
  /* Keep the iPhone viewport stable when the address bar contracts. */
  html, body { overscroll-behavior-x: none; }
  body.is-mobile-device .app, body.is-mobile-device .main {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
  }
  body.is-mobile-device .chart { scroll-behavior: auto; }

  /* The title and options fit on narrow screens without clipping. */
  body.is-mobile-device .topbar {
    min-width: 0;
    padding: 7px 9px 5px !important;
    gap: 3px !important;
    flex: 0 0 auto;
  }
  body.is-mobile-device .songTitleWrap,
  body.is-mobile-device .songTitleLine {
    min-width: 0;
    width: 100%;
  }
  body.is-mobile-device .songTitleLine { gap: 6px; }
  body.is-mobile-device #songTitle {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: clamp(16px,4.8vw,19px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.is-mobile-device .mobileSheetDensityBtn {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(100,116,139,.28);
    background: rgba(37,99,235,.10);
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
  }
  body.is-mobile-device.wcl-no-song .mobileSheetDensityBtn { display:none !important; }
  body.is-mobile-device #songMeta {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px !important;
  }

  /* One swipeable row of *controls*, independent of the page-swipe gesture. */
  body.is-mobile-device:not(.wcl-no-song) .topbar .controls {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin-top: 4px !important;
    padding: 3px 1px 5px !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x !important;
  }
  body.is-mobile-device .topbar .controls::-webkit-scrollbar { display: none; }
  body.is-mobile-device:not(.wcl-no-song) .topbar .controls > button,
  body.is-mobile-device:not(.wcl-no-song) .topbar .controls > select {
    flex: 0 0 auto !important;
    min-height: 39px !important;
    height: 39px !important;
    border-radius: 10px !important;
  }
  body.is-mobile-device:not(.wcl-no-song) .topbar .controls > .iconBtn,
  body.is-mobile-device:not(.wcl-no-song) .topbar .controls > .iconOnlyBtn {
    min-width: 39px !important;
    width: 39px !important;
  }

  /* Sheet first: less surrounding chrome, crisp chords and shorter line gaps. */
  html body.is-mobile-device #chartOutput.chartOutput,
  html body.is-mobile-device:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 11px calc(79px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionHeading {
    margin: 0 0 5px !important;
    gap: 4px;
  }
  html body.is-mobile-device #chartOutput .wclSectionHeading .sectionLabel {
    min-height: 34px !important;
    font-size: max(11px, var(--wcl-section-font-size,11px)) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    opacity: 1 !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionHeading .sectionName {
    font-size: inherit !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  html body.is-mobile-device #chartOutput .wclSectionKeyControl {
    min-height: 34px;
    min-width: 73px;
    padding: 2px 8px;
    gap: 4px;
    border-radius: 9px;
  }
  html body.is-mobile-device #chartOutput .sectionBlock {
    margin: 0 0 10px !important;
    break-inside: avoid-column;
  }
  html body.is-mobile-device #chartOutput .sectionContent,
  html body.is-mobile-device #chartOutput .chartLine,
  html body.is-mobile-device #chartOutput .wclChordLyricPair {
    line-height: 1.30 !important;
  }
  html body.is-mobile-device #chartOutput .chartSpacer {
    font-size: 0 !important;
    line-height: 0 !important;
    height: 8px !important;
    min-height: 8px !important;
  }
  html body.is-mobile-device #chartOutput .wclChordLyricPair {
    margin-top: 1px !important;
  }
  html body.is-mobile-device #chartOutput .wclPairVisualLine + .wclPairVisualLine {
    margin-top: 2px !important;
  }
  html body.is-mobile-device #chartOutput .chordRow .chord,
  html body.is-mobile-device #chartOutput .chordRow .numberChord {
    font-weight: 800 !important;
  }
  /* Compact is the mobile default; relaxed spacing remains available. */
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .sectionBlock {
    margin-bottom: 6px !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .wclSectionHeading {
    margin-bottom: 1px !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .sectionContent,
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .chartLine,
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .wclChordLyricPair {
    line-height: 1.16 !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .wclChordLyricPair {
    margin-top: 0 !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .wclPairVisualLine + .wclPairVisualLine {
    margin-top: 1px !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .chartSpacer {
    height: 5px !important;
    min-height: 5px !important;
  }
  html body.is-mobile-device.wclMobileSheetCompact #chartOutput .sectionLabel {
    min-height: 30px !important;
  }

  /* Dock stays thumb-friendly on small iPhones (including 320px width). */
  html body.is-mobile-device .mobileBottomNav {
    max-width: calc(100vw - 12px) !important;
    min-height: 55px !important;
    height: 55px !important;
    gap: 1px !important;
    padding: 5px !important;
    bottom: max(6px,env(safe-area-inset-bottom)) !important;
  }
  html body.is-mobile-device .mobileBottomNav > button[data-mobile-view],
  html body.is-mobile-device .mobileBottomNav .wclNavButton,
  html body.is-mobile-device .mobileBottomNav .wclNavUtility[data-mobile-view] {
    flex: 0 0 clamp(44px,13vw,52px) !important;
    min-width: clamp(44px,13vw,52px) !important;
    max-width: clamp(44px,13vw,52px) !important;
    width: clamp(44px,13vw,52px) !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Keep the floating Aa display tool off the first section's key picker. */
@media (max-width:900px) {
  html body.is-mobile-device:not(.wcl-no-song) .chart > .wclChartReadabilityDock,
  html body.is-mobile-device .wclChartReadabilityDock {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 54px !important;
    bottom: calc(140px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    z-index: 3100 !important;
  }
}

/* Keep the Aa button in the left gutter on desktop, not over the first key. */
@media (min-width:901px) {
  html body:not(.wcl-no-song) .chart > .wclChartReadabilityDock {
    margin: 0 0 0 15px !important;
    top: 12px !important;
  }
}
.wclMobileSongStep { display: none !important; }
@media (max-width:480px) {
  html body.is-mobile-device .mobileFlowNav { display:none !important; }
  html body.is-mobile-device:not(.wcl-no-song) .topbar .controls > .wclMobileSongStep {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:65px !important;
    height:39px !important;
    min-height:39px !important;
    padding:0 10px !important;
    border:1px solid rgba(148,163,184,.22);
    border-radius:10px;
    color:#e8eef7;
    background:rgba(148,163,184,.13);
    font-weight:700;
    font-size:11px;
  }
}
/* Align desktop section key controls before the floating Aa display tool. */
@media (min-width:901px) {
  html body:not(.wcl-no-song) .chart > .wclChartReadabilityDock {
    margin: 0 70px 0 auto !important;
    top: 8px !important;
  }
  html body #chartOutput .wclSectionHeading {
    padding-right: 55px;
  }
}
@media (min-width:901px) {
  html body:not(.wcl-no-song) .chart > .wclChartReadabilityDock {
    margin: 0 40px 0 auto !important;
  }
}
@media (max-width:480px) {
  html body.is-mobile-device #mobileFlowNav.mobileFlowNav {
    display: none !important;
  }
}
/* Title line uses the full phone width rather than its older fit-content cap. */
@media (max-width:480px) {
  html body.is-mobile-device .songTitleWrap,
  html body.is-mobile-device .songTitleWrap .songTitleLine {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body.is-mobile-device .songTitleWrap {
    flex-direction: column !important;
  }
  html body.is-mobile-device #songTitle {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
  }
}
@media (max-width:480px) {
  html body.is-mobile-device .topbar .songTitleWrap .songTitleLine {
    min-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}
@media (max-width:480px) {
  html body.is-mobile-device .topbar .songTitleWrap .songTitleLine {
    width: calc(100vw - 18px) !important;
    min-width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

/* ===========================================================
   WCL iPhone chord-chart hotfix v2 — 25 October 2026
   =========================================================== */
#chartOutput .wclSectionKeyControl {
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; isolation:auto;
  max-width: none; border-radius: 6px;
}
#chartOutput .wclSectionKeyButton {
  display: inline-flex; align-items: center; justify-content:center;
  gap: 3px; padding: 3px 6px; min-width: 56px; min-height: 25px;
  font: 700 10px/1 system-ui,-apple-system,sans-serif;
  white-space: nowrap; border: 1px solid rgba(100,116,139,.24);
  background:rgba(148,163,184,.09); border-radius: 6px;
  color:var(--wcl-sheet-ink,#172033); cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:pan-y;
}
#chartOutput .wclSectionKeyButton .wclSectionKeyCaption {font-size:8px !important;letter-spacing:0;color:var(--wcl-sheet-muted,#64748b)}
#chartOutput .wclSectionKeyButton .wclSectionKeyValue {font-size:11px !important}
#chartOutput .wclSectionKeyButton .wclSectionKeyChevron {font-size:10px;margin-left:0}
#chartOutput .is-modulated .wclSectionKeyButton {border-color:#6193f6;background:rgba(37,99,235,.1)}
.wclSectionKeyPalette {
  position:fixed !important;z-index:2147480000;box-sizing:border-box;
  display:block;width:164px;max-height:calc(100dvh - 30px);
  overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  background:#101927;color:#f1f5f9; border:1px solid #64748b;
  border-radius:12px;padding:7px; box-shadow:0 14px 40px #02061773;
  font:600 13px/1.2 system-ui,-apple-system,sans-serif;
}
.wclSectionKeyPalette .wclSectionFollow {
  width:100%;min-height:32px;margin:0 0 6px;
  background:#293747;color:#edf3fe;border:0;border-radius:7px;
  font:inherit;font-size:11px;cursor:pointer;
}
.wclSectionKeyGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.wclSectionKeyGrid button {
  min-width:0;min-height:31px;border-radius:7px;
  border:1px solid #39465a;background:#172334;color:#f7f9fd;
  font:700 13px/1 system-ui,-apple-system,sans-serif;
  text-align:center;cursor:pointer;
}
.wclSectionKeyPalette button.is-selected {background:#2563eb;border-color:#60a5fa;color:white}
.wclSectionKeyPalette button:focus-visible {outline:2px solid #93c5fd;outline-offset:1px}
/* Retain the fixed-width column positions in BOTH rows.  A font-size mismatch
   (the former chord row was 96%) breaks alignment even in a monospace font. */
html body #chartOutput .wclChordLyricPair,
html body #chartOutput .wclPairVisualLine,
html body #chartOutput .wclPairVisualLine .chartLine,
html body #chartOutput .wclPairVisualLine .chord,
html body #chartOutput .wclPairVisualLine .numberChord {
  font-family: "Courier New",Courier,monospace !important;
  font-size:var(--wcl-chart-font-size,12px) !important;
  letter-spacing:0 !important;
  font-kerning:none !important;
  font-variant-ligatures:none !important;
  word-spacing:0 !important;
  font-stretch:normal !important;
  tab-size:4;
}
html body #chartOutput .wclPairVisualLine .chordRow,
html body #chartOutput .wclPairVisualLine .lyricRow {
  white-space:pre !important; overflow:clip !important;
  max-width:100% !important;
  text-overflow:clip !important;
  box-sizing:border-box;
}
@media(max-width:900px){
  html body.is-mobile-device .app,html body.is-mobile-device .main,
  html body.is-mobile-device .contentArea {min-height:0 !important;}
  html body.is-mobile-device .chart,
  html body.mobile-view-home.is-mobile-device .chart,
  html body.wcl-no-song.is-mobile-device .chart {
    display:block !important; flex:1 1 auto !important;
    min-height:0 !important; height:100% !important;
    overflow-y:scroll !important; overflow-x:hidden !important;
    overscroll-behavior-y:contain !important; touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html body.is-mobile-device #chartOutput,
  html body.is-mobile-device #chartOutput .sectionContent,
  html body.is-mobile-device #chartOutput .sectionBlock,
  html body.is-mobile-device #chartOutput .wclChordLyricPair,
  html body.is-mobile-device #chartOutput .wclPairVisualLine {
    touch-action:pan-y !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionKeyControl,
  html body.is-mobile-device #chartOutput .wclSectionKeyButton {
    min-width:0 !important;min-height:0 !important;
    touch-action:pan-y !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionHeading .sectionLabel {min-height:25px !important;}
  html body.is-mobile-device .chart > .wclChartReadabilityDock,
  html body.is-mobile-device:not(.wcl-no-song) .chart > .wclChartReadabilityDock,
  html body.is-mobile-device .wclChartReadabilityDock {
    position:fixed !important;
    top:calc(121px + env(safe-area-inset-top)) !important;
    left:8px !important;right:auto !important;bottom:auto !important;
    margin:0 !important;z-index:3100 !important;
    height:0 !important;width:0 !important;pointer-events:none !important;
  }
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsToggle,
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsPanel {pointer-events:auto !important;}
  html body.is-mobile-device .wclChartReadabilityDock.open .wclChartToolsPanel {
    left:0 !important;right:auto !important;top:40px !important;
    max-height:min(490px,calc(100dvh - 210px)) !important;
    overflow-y:auto !important;
  }
  html body.is-mobile-device #chartOutput.chartOutput {
    padding-top:38px !important;
  }
  html body.is-mobile-device .mobileSheetDensityBtn {display:none !important;}
}
/* The old dock uses flex row-reverse, which pushed Aa off the left of screen
   when positioned in the top-left corner. */
@media(max-width:900px){
  html body.is-mobile-device .wclChartReadabilityDock,
  html body.is-mobile-device .chart > .wclChartReadabilityDock {
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:0 !important;
    transform:none !important;
  }
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsToggle {
    position:relative !important; left:0 !important;right:auto !important;
    margin:0 !important;
  }
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsPanel {
    position:absolute !important;left:0 !important;right:auto !important;
    top:40px !important;
  }
}
#chartOutput .wclSoloChordRow {font-family:"Courier New",Courier,monospace !important; font-size:var(--wcl-chart-font-size,12px) !important; white-space:pre !important; overflow:clip !important;letter-spacing:0 !important;}
#chartOutput .wclSoloChordRow .wclSoloBreak{display:block;height:0;line-height:0;}
/* Critical iOS scrolling fix: overflow-x:hidden made the sheet a nested
   overflow-y:auto scroll container. Its overscroll containment swallowed
   vertical gestures before they reached the real .chart scroller. */
@media(max-width:900px){
  html body.is-mobile-device #chartOutput.chartOutput,
  html body.is-mobile-device:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput {
    overflow:visible !important;
    overscroll-behavior:auto !important;
    touch-action:pan-y !important;
  }
}
/* Closed Aa settings must NEVER cover or intercept the song sheet. */
html body .wclChartReadabilityDock:not(.open) .wclChartToolsPanel,
html body .wclChartReadabilityDock:not(.open) .wclChartToolsPanel * {
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
html body .wclChartReadabilityDock.open .wclChartToolsPanel {
  display:block !important;
  pointer-events:auto !important;
  visibility:visible !important;
}
@media(max-width:900px){
  /* First section begins below the permanently available Aa control. */
  html body.is-mobile-device #chartOutput.chartOutput {padding-top:53px !important;}
}
@media(max-width:900px){
  html body.is-mobile-device:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput,
  html body.is-mobile-device #chartOutput.chartOutput {
    padding-top:48px !important;
  }
}

/* ===============================================================
   WCL MOBILE FINISHING PASS v3 — October 2026
   Tight sheet start, top-right Aa, and micro section-key controls.
   =============================================================== */
@media(max-width:900px){
  html body.is-mobile-device #chartOutput .wclSectionKeyButton {
    min-width:0 !important;
    min-height:24px !important;
    height:24px !important;
    max-height:24px !important;
    padding:3px 4px !important;
    gap:2px !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionKeyButton .wclSectionKeyCaption,
  html body.is-mobile-device #chartOutput .wclSectionKeyButton .wclSectionKeyValue,
  html body.is-mobile-device #chartOutput .wclSectionKeyButton .wclSectionKeyChevron {
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  html body.is-mobile-device #chartOutput .wclSectionKeyButton .wclSectionKeyValue {
    font-weight:700 !important;
  }
}
.wclSectionKeyPalette {
  width:144px !important;
  padding:5px !important;
  border-radius:9px !important;
  font-size:11px !important;
}
.wclSectionKeyPalette .wclSectionFollow {
  min-height:28px !important;
  margin-bottom:4px !important;
  font-size:10px !important;
}
.wclSectionKeyGrid { gap:3px !important; }
.wclSectionKeyGrid button {
  min-height:29px !important;
  font-size:11px !important;
  border-radius:5px !important;
}
@media(max-width:900px){
  /* The dock is inside the actual scrolling chart, not the phone viewport. */
  html body.is-mobile-device:not(.wcl-no-song) .chart > .wclChartReadabilityDock,
  html body.is-mobile-device .chart > .wclChartReadabilityDock,
  html body.is-mobile-device .wclChartReadabilityDock {
    position:sticky !important;
    top:2px !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    margin:0 2px 0 auto !important;
    display:flex !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
    gap:0 !important;
    height:0 !important;
    width:0 !important;
    min-height:0 !important;
    min-width:0 !important;
    transform:translate(5px,-5px) !important;
    z-index:3100 !important;
    pointer-events:none !important;
  }
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsToggle {
    position:relative !important;
    width:29px !important;
    min-width:29px !important;
    height:29px !important;
    min-height:29px !important;
    margin:0 !important;
    left:auto !important;
    right:auto !important;
    pointer-events:auto !important;
  }
  html body.is-mobile-device .wclChartReadabilityDock .wclChartToolsPanel,
  html body.is-mobile-device .wclChartReadabilityDock.open .wclChartToolsPanel {
    position:absolute !important;
    left:auto !important;
    right:0 !important;
    top:33px !important;
    bottom:auto !important;
    max-height:min(480px,calc(100dvh - 160px)) !important;
    overflow-y:auto !important;
  }
  /* Start the sheet immediately below the toolbar. The first KEY button
     shares the Aa row but has a small guard against overlap. */
  html body.is-mobile-device #chartOutput.chartOutput,
  html body.is-mobile-device:not(.performance):not(.confidence):not(.chart-focus) #chartOutput.chartOutput {
    padding-top:5px !important;
  }
  html body.is-mobile-device #chartOutput > .sectionBlock:first-child > .wclSectionHeading {
    padding-right:34px !important;
  }
}

/* ===============================================================
   WCL v4: compact custom toolbar key / capo palettes
   =============================================================== */
body .topbar .controls > select.wclCompactNativeSource,
body.is-mobile-device .topbar .controls > select.wclCompactNativeSource {
  display:none !important;
  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}
body .topbar .controls > button.wclToolbarSelectTrigger {
  appearance:none !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  background:#1b2739 !important;
  color:#f8fafc !important;
  border:1px solid #334155 !important;
  border-radius:9px !important;
  padding:0 5px !important;
  height:36px !important;
  min-height:36px !important;
  min-width:0 !important;
  font:800 11px/1 system-ui,-apple-system,sans-serif !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  cursor:pointer;
  touch-action:pan-x !important;
}
body .topbar .controls > button.wclToolbarSelectTrigger[aria-expanded="true"]{
  border-color:#60a5fa !important;
  box-shadow:0 0 0 1px #60a5fa !important;
}
body .topbar .controls > #wclGlobalKeyTrigger {width:54px !important;max-width:54px !important;}
body .topbar .controls > #wclCapoTrigger {width:66px !important;max-width:66px !important;}
.wclToolbarSelectTrigger .wclToolbarSelectLabel {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wclToolbarSelectTrigger .wclToolbarSelectArrow {color:#9fb0c7;font:700 9px/1 system-ui,-apple-system,sans-serif;}
.wclGlobalKeyPalette {width:144px !important;}
.wclGlobalKeyPalette .wclSectionKeyGrid {grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.wclCapoPalette {
  width:10ch !important;
  min-width:10ch !important;
  max-width:10ch !important;
  padding:4px !important;
  font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace !important;
  overflow-x:hidden !important;
}
.wclCapoPalette .wclCapoOptionList {display:grid;grid-template-columns:minmax(0,1fr);gap:3px;}
.wclCapoPalette .wclCapoOption {
  width:100%;min-width:0;min-height:29px;
  padding:4px 1px;border:1px solid #39465a;border-radius:5px;
  background:#172334;color:#f7f9fd;
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;text-align:center;cursor:pointer;
}
.wclCapoPalette .wclCapoOption.is-selected {background:#2563eb;border-color:#60a5fa;color:#fff;}
.wclCapoPalette .wclCapoOption:focus-visible {outline:2px solid #93c5fd;outline-offset:1px;}
@media(max-width:900px){
  body.is-mobile-device .topbar .controls > button.wclToolbarSelectTrigger {
    height:39px !important;min-height:39px !important;
    font-size:10px !important;
  }
}
/* Specificity safeguard: older responsive rules force #capoSelect inline-flex. */
html body .topbar .controls > select#keySelect.wclCompactNativeSource,
html body .topbar .controls > select#capoSelect.wclCompactNativeSource,
html body.is-mobile-device:not(.wcl-no-song) .topbar .controls > select#keySelect.wclCompactNativeSource,
html body.is-mobile-device:not(.wcl-no-song) .topbar .controls > select#capoSelect.wclCompactNativeSource {
  display:none !important;
  position:absolute !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  pointer-events:none !important;
}

/* WCL v5: minimal key and capo toolbar triggers (no chevrons). */
body .topbar .controls > button.wclToolbarSelectTrigger {
  gap:0 !important;
}
body .topbar .controls > #wclGlobalKeyTrigger {
  width:54px !important;
  max-width:54px !important;
}
body .topbar .controls > #wclCapoTrigger {
  width:66px !important;
  max-width:66px !important;
}
.wclCapoPalette .wclCapoClear {
  font-weight:700 !important;
  color:#cbd5e1 !important;
  background:#233146 !important;
}

/* =========================================================
   WCL v6 - Named chart fonts and independent Bold Chords control
   Aptos Mono is preferred because chords and lyrics use aligned columns.
   System font fallbacks are used when proprietary faces are unavailable.
   ========================================================= */
body.wcl-chart-font-aptos-mono { --wcl-chart-font: "Aptos Mono", "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-aptos { --wcl-chart-font: "Aptos", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-calibri { --wcl-chart-font: Calibri, Carlito, "Segoe UI", Arial, sans-serif; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-arial { --wcl-chart-font: Arial, Helvetica, sans-serif; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-consolas { --wcl-chart-font: Consolas, "Cascadia Mono", "Liberation Mono", monospace; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-menlo { --wcl-chart-font: Menlo, Monaco, Consolas, monospace; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-courier-new { --wcl-chart-font: "Courier New", Courier, monospace; --wcl-chart-letter-spacing: normal; }
body.wcl-chart-font-georgia { --wcl-chart-font: Georgia, "Times New Roman", serif; --wcl-chart-letter-spacing: normal; }
/* All chart lines share the selected typeface, including chord-only rows. */
html body #chartOutput .wclSoloChordRow { font-family:var(--wcl-chart-font) !important; letter-spacing:var(--wcl-chart-letter-spacing) !important; }
/* Normal chords are distinguishable, but independent chord emphasis is opt-in. */
html body:not(.wcl-chart-bold):not(.wcl-chart-chords-bold) #chartOutput .chordRow { font-weight:650 !important; }
html body.wcl-chart-chords-bold #chartOutput .chordRow,
html body.wcl-chart-chords-bold #chartOutput .chordRow .chord,
html body.wcl-chart-chords-bold #chartOutput .chordRow .numberChord { font-weight:900 !important; }
/* Let the actual font-name selector fit without clipping long names. */
#wclChartToolsPanel #chartPanelFontSelect { flex:0 0 145px !important; width:145px !important; max-width:100% !important; }

/* Precise chord placement for proportional named fonts (Calibri, Aptos, etc.). */
html body #chartOutput .wclAbsoluteChords { position:relative !important; white-space:nowrap !important; overflow:visible !important; }
html body #chartOutput .wclAbsoluteChords .chord,
html body #chartOutput .wclAbsoluteChords .numberChord { display:inline-block !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; }