@import url("./styles/tokens.css");
@import url("./styles/components/language-picker.css");
@import url("./styles/components/status.css");

:root{
  --bg: #f6f7fb;
  --paper: #ffffff;
  --text: #1c2330;
  --muted: #667085;
  --line: rgba(18, 31, 59, 0.10);

  --brand: #3b82f6;     /* blå */
  --brand2:#22c55e;     /* grön accent (sparsam) */
  --danger:#ef4444;

  --shadow: 0 18px 50px rgba(16,24,40,0.12);
  --radius: 16px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Backwards-compatible aliases while components move to semantic tokens. */
  --bg:var(--color-bg);
  --paper:var(--color-surface);
  --text:var(--color-text);
  --muted:var(--color-muted);
  --line:var(--color-line);
  --brand:var(--color-brand);
  --brand2:var(--color-success);
  --danger:var(--color-danger);
  --shadow:var(--shadow-surface);
  --radius:var(--radius-md);
}

/* Song view settings live together inside Song controls. */
.songAppearanceGroup{grid-column:1/-1;display:block!important;padding:16px 18px}.songAppearanceIntro{margin-bottom:10px}.songAppearanceGroup .songDisplayChooser{width:100%;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.songAppearanceGroup .songDisplayBtn{min-height:42px;white-space:normal}.songDiagramOptions{display:flex;align-items:center;gap:clamp(24px,4vw,56px);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.songDiagramOptionBlock{display:flex;align-items:center;justify-content:flex-start;gap:14px;min-width:0}.songDiagramOptionBlock:first-child{flex:0 0 auto}.songOptionLabel{flex:0 0 auto;color:var(--ink);font-size:12px;font-weight:900}.songInstrumentChooser{display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.songInstrumentBtn{min-height:34px;padding:7px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.songInstrumentBtn.isActive{background:#e7f1ff;color:#145fc3}.songAppearanceGroup .diagramSizeControl{flex:1;font-size:11px}.diagramSizeSlider{display:flex;align-items:center;gap:7px;min-width:0;max-width:620px;flex:1;color:var(--muted);font-weight:800}.diagramSizeSlider input{min-width:160px;width:auto;flex:1;accent-color:#1672e8}.diagramSizeSlider output{min-width:44px;color:var(--ink);text-align:right}.songDiagramOptions.isHidden{display:none!important}
@media(max-width:760px){.songAppearanceGroup{padding:14px}.songAppearanceGroup .songDisplayChooser{grid-template-columns:1fr}.songDiagramOptions{display:grid;grid-template-columns:1fr}.songDiagramOptionBlock{align-items:flex-start;flex-direction:column}.songInstrumentChooser{width:100%}.songInstrumentBtn{flex:1}.diagramSizeSlider{width:100%;max-width:none}.diagramSizeSlider input{flex:1;width:auto}}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
 background:
  radial-gradient(1200px 520px at 80% 0%, rgba(99,179,237,0.18), transparent 55%),
  #fff;
}

/* Public site header */
.siteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:132px;
  padding:20px 28px;
  background:
    linear-gradient(90deg, rgba(3,12,28,.55), rgba(7,20,38,.12) 52%, rgba(3,12,28,.42)),
    url("images/header-v2.webp") center/cover no-repeat;
  border-bottom:1px solid rgba(34,211,238,.42);
  box-shadow:0 12px 34px rgba(7,20,38,.18);
}
.siteBrand{
  display:flex;
  align-items:center;
  gap:12px;
}
.siteLogo{
  width:min(330px, 36vw);
  height:82px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 8px 18px rgba(3,12,28,.34));
}
.siteBrandText{ display:none; }
.siteBrandName{
  font-weight: 900;
  font-size: 18px;
}
.siteBrandTag{
  color: var(--muted);
  font-size: 12px;
}
.siteNav{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
}
.siteMenuBtn{
  display:none;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(16,24,40,0.12);
}
.siteMenuBtn span{
  display:block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 4px 0;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}
.siteNavInner{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
}
.siteNav a{
  text-decoration:none;
  color:#f8fafc;
  font-weight: 700;
  padding:9px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(3,12,28,.42);
  backdrop-filter:blur(10px);
}
.siteNav a:hover{
  border-color:rgba(103,232,249,.54);
  background:rgba(3,12,28,.64);
}
.contentMenuButton{
  display:none;
  width:46px;
  height:46px;
  padding:10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:14px;
  background:rgba(3,12,28,.58);
  box-shadow:0 10px 28px rgba(3,12,28,.22);
  cursor:pointer;
}
.contentMenuButton span{
  display:block;
  width:22px;
  height:2px;
  margin:4px auto;
  border-radius:2px;
  background:#fff;
  transition:transform 160ms ease, opacity 160ms ease;
}
.contentMenuButton[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.contentMenuButton[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.contentMenuButton[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
body.isAuthed .siteHeader{ display:none; }

/* Multilingual feature guide */
.featuresPage{
  min-height:100%;
  background:
    radial-gradient(900px 480px at 12% 4%, rgba(34,211,238,0.14), transparent 62%),
    radial-gradient(900px 520px at 92% 18%, rgba(59,130,246,0.15), transparent 64%),
    #f8fafc;
}
.featuresPage .siteHeader{ position:relative; z-index:20; }
.featureBrand{
  color:var(--text);
  text-decoration:none;
}
.featureLogo{
  width:min(330px, 36vw);
  object-fit:contain;
}
.featureNav{
  align-items:center;
}
.featureNav a[aria-current="page"]{
  color:#fff;
  background:rgba(37,99,235,.72);
  border-color:rgba(165,243,252,.55);
}
.featureLanguage{
  display:flex;
  align-items:center;
  gap:8px;
  color:#e2e8f0;
  font-size:12px;
  font-weight:800;
}
.featureLanguage select{
  min-height:38px;
  padding:0 34px 0 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--text);
  background:#fff;
  font:inherit;
}
.featureMain{
  width:min(1180px, calc(100% - 40px));
  margin:0 auto;
  padding:72px 0 24px;
}
.featureIntroSection,
.featureHowSection{
  max-width:900px;
  margin:0 auto 56px;
  padding:34px;
  border:1px solid rgba(59,130,246,.12);
  border-radius:24px;
  background:rgba(255,255,255,.78);
}
.featureIntroSection h2,
.featureHowSection h2{ margin:16px 0 10px; font-size:clamp(28px,4vw,42px); letter-spacing:-.03em; }
.featureIntroSection p{ color:var(--muted); font-size:18px; line-height:1.65; }
.featureHowSection{ margin-top:60px; }
.featureSteps{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0; list-style:none; counter-reset:steps; }
.featureSteps li{ counter-increment:steps; padding:18px; border-radius:16px; background:#f1f5f9; line-height:1.5; }
.featureSteps li::before{ content:counter(steps); display:grid; width:28px; height:28px; margin-bottom:10px; place-items:center; border-radius:50%; color:#fff; background:#2563eb; font-weight:900; }
.featureHero{
  max-width:860px;
  margin:0 auto 56px;
  text-align:center;
}
.featureEyebrow{
  display:inline-flex;
  padding:7px 12px;
  border:1px solid rgba(59,130,246,0.18);
  border-radius:999px;
  color:#2563eb;
  background:rgba(255,255,255,0.72);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.featureHero h1{
  max-width:820px;
  margin:18px auto 16px;
  font-size:clamp(38px, 6vw, 68px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.featureHero > p{
  max-width:720px;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(17px, 2vw, 21px);
  line-height:1.6;
}
.featureHeroActions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.featureHeroActions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  text-decoration:none;
}
.featureShowcase{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.featureCard{
  min-height:240px;
  padding:28px;
  border:1px solid rgba(30,64,175,0.10);
  border-radius:24px;
  background:rgba(255,255,255,0.88);
  box-shadow:0 20px 55px rgba(15,23,42,0.08);
}
.featureCardWide{
  grid-column:span 2;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:24px;
}
.featureIcon{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  margin-bottom:40px;
  border-radius:16px;
  color:#1d4ed8;
  background:linear-gradient(145deg, #dbeafe, #cffafe);
  font-size:20px;
  font-weight:900;
  letter-spacing:-.12em;
}
.featureCardWide .featureIcon{
  width:76px;
  height:76px;
  margin:0;
  border-radius:22px;
  font-size:28px;
}
.featureCard h2{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.02em;
}
.featureCard p,
.featurePlanGrid p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}
.featurePlans{
  margin-top:60px;
  padding:42px;
  border:1px solid rgba(34,211,238,0.22);
  border-radius:28px;
  background:linear-gradient(135deg, #07162d, #102d55);
  color:#fff;
  box-shadow:0 26px 70px rgba(7,20,38,0.22);
}
.featurePlans h2{
  max-width:700px;
  margin:14px 0 28px;
  font-size:clamp(28px, 4vw, 44px);
  letter-spacing:-.035em;
}
.featurePlans .featureEyebrow{
  color:#a5f3fc;
  border-color:rgba(165,243,252,0.24);
  background:rgba(255,255,255,0.06);
}
.featurePlanGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.featurePlanGrid article{
  padding:22px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  background:rgba(255,255,255,0.06);
}
.featurePlanGrid article.isFeatured{
  border-color:rgba(34,211,238,0.48);
  background:rgba(34,211,238,0.12);
}
.featurePlanGrid strong{
  display:block;
  margin-bottom:8px;
  font-size:18px;
}
.featurePlanGrid p{
  color:#cbd5e1;
}

@media (max-width:780px){
  .featuresPage .siteHeader{
    position:relative;
    align-items:center;
    flex-direction:row;
  }
  .featureNav{
    width:100%;
    gap:4px;
  }
  .featureLanguage{
    width:100%;
    justify-content:space-between;
    margin-top:6px;
  }
  .featureMain{
    width:min(100% - 28px, 1180px);
    padding-top:46px;
  }
  .featureShowcase{
    grid-template-columns:1fr;
  }
  .featureCard,
  .featureCardWide{
    grid-column:auto;
    min-height:0;
  }
  .featureCardWide{
    grid-template-columns:1fr;
    gap:18px;
  }
  .featureCard .featureIcon,
  .featureCardWide .featureIcon{
    width:52px;
    height:52px;
    margin:0 0 24px;
    border-radius:16px;
    font-size:20px;
  }
  .featurePlans{
    padding:28px 20px;
  }
  .featurePlanGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:720px){
  .siteHeader{
    min-height:104px;
    padding:14px 12px;
    align-items:center;
  }
  .siteLogo,
  .featureLogo{ width:min(220px, 55vw); height:68px; }
  .siteNav{ justify-content:flex-end; }
  .siteNav a{ padding:7px 9px; font-size:12px; }
  .contentHeader{
    position:relative;
    min-height:132px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .contentHeader .siteBrand{ min-width:0; width:100%; }
  .contentHeader .siteLogo,
  .contentHeader .featureLogo{ width:min(245px, 72vw); height:66px; }
  .contentMenuButton{ display:none; }
  .contentHeader .contentNav{
    display:flex;
    width:100%;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:space-between;
    gap:3px;
  }
  .contentHeader .contentNav a{
    width:auto;
    min-width:0;
    padding:7px 6px;
    text-align:center;
    border-radius:9px;
    font-size:11px;
    white-space:nowrap;
  }
  .contentLanguageButton{ width:34px; height:34px; flex:0 0 34px; font-size:17px; }
}

.contentLanguageButton{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  font-size:20px;
  cursor:pointer;
}
@media (max-width:720px){
  .contentHeader .contentLanguageButton{ width:34px; height:34px; flex-basis:34px; font-size:17px; }
}

/* One stable product header for every public content page. Kept at the end of
   the component block so older generic site-header breakpoints cannot win. */
.siteHeader.contentHeader,
.featuresPage .siteHeader.contentHeader{
  display:grid;
  grid-template-columns:minmax(0, 1120px);
  justify-content:center;
  align-content:center;
  gap:12px;
  min-height:178px;
  padding:20px clamp(14px, 4vw, 40px);
}
.contentHeader .siteBrand{
  display:flex;
  width:100%;
  min-width:0;
  justify-content:center;
}
.contentHeader .siteLogo,
.contentHeader .featureLogo{
  width:min(340px, 78vw);
  height:80px;
  object-position:center;
}
.contentHeader .contentNav,
.featuresPage .contentHeader .contentNav{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:4px;
  align-items:center;
  justify-content:center;
  flex-flow:row nowrap;
  gap:2px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  background:rgba(3,12,28,.62);
  box-shadow:0 12px 28px rgba(2,6,23,.2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.contentHeader .contentNav::-webkit-scrollbar{ display:none; }
.contentHeader .contentNav a,
.featuresPage .contentHeader .contentNav a{
  display:flex;
  min-height:36px;
  padding:0 13px;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  color:#e2e8f0;
  background:transparent;
  box-shadow:none;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
.contentHeader .contentNav a:hover{
  color:#fff;
  background:rgba(255,255,255,.10);
}
.contentHeader .contentNav a[aria-current="page"],
.featuresPage .contentHeader .contentNav a[aria-current="page"]{
  color:#fff;
  border:0;
  background:linear-gradient(135deg, rgba(37,99,235,.9), rgba(14,165,233,.72));
  box-shadow:0 5px 14px rgba(37,99,235,.24);
}
.contentHeader .contentLanguageButton{
  width:34px;
  height:34px;
  flex:0 0 34px;
  margin-left:2px;
  border:0;
  border-radius:9px;
  font-size:17px;
  box-shadow:none;
}

@media (max-width:780px){
  .siteHeader.contentHeader,
  .featuresPage .siteHeader.contentHeader{
    grid-template-columns:minmax(0, 1fr);
    min-height:154px;
    padding:14px 12px 16px;
    align-items:center;
  }
  .contentHeader .siteLogo,
  .contentHeader .featureLogo{
    width:min(285px, 76vw);
    height:68px;
  }
  .contentHeader .contentNav,
  .featuresPage .contentHeader .contentNav{
    width:100%;
    justify-content:flex-start;
  }
  .contentHeader .contentNav a,
  .featuresPage .contentHeader .contentNav a{
    min-height:34px;
    padding:0 11px;
    font-size:12px;
  }
}

@media (max-width:390px){
  .siteHeader.contentHeader,
  .featuresPage .siteHeader.contentHeader{ padding-inline:8px; }
  .contentHeader .contentNav a,
  .featuresPage .contentHeader .contentNav a{ padding-inline:9px; font-size:11px; }
}

.topbar{
  position: static;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:22px 22px;
  min-height: 140px;
  background:
    linear-gradient(90deg, rgba(3,12,28,0.34), rgba(7,20,38,0.06) 48%, rgba(3,12,28,0.22)),
    linear-gradient(180deg, rgba(7,20,38,0.04), rgba(7,20,38,0.22)),
    url("images/header-v2.webp") center/cover no-repeat;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(34,211,238,0.42);
  box-shadow: 0 12px 34px rgba(7,20,38,0.20), 0 1px 0 rgba(59,130,246,0.20);
}

/* Ad bar + collapse */
.collapseBtn{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(59,130,246,0.08);
  font-weight: 800;
  color: var(--text);
  cursor:pointer;
}
.collapseIcon{ font-size: 14px; }
.collapseText{ font-size: 12px; }
.collapseBtnSong{
  display:none;
}

.topbar, .brand, .topbar-actions{ overflow: visible; }
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
.brandLogoChip{
  width: min(350px, 38vw);
  height: 88px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  flex: 0 0 auto;
}
.brand-logo{
  height: 100%;
  width:100%;
  object-fit: contain;
  object-position:left center;
  display:block;
  image-rendering: auto;
  filter:drop-shadow(0 8px 18px rgba(3,12,28,0.34));
}
.brandText{ display:none; }
.brand-name{ display:none; }
.brand-tag{ display:none; }

.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width: 46%;
  margin-left:auto;
}

.searchWrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:46px;
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(100,116,139,0.20);
  border-radius: 999px;
  padding:5px 7px 5px 14px;
  box-shadow:0 8px 24px rgba(15,23,42,0.07);
  transition:border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.searchWrap:focus-within{
  background:#fff;
  border-color:rgba(59,130,246,0.54);
  box-shadow:0 0 0 4px rgba(59,130,246,0.10), 0 10px 28px rgba(15,23,42,0.08);
}
.searchIcon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:#64748b;
  stroke-width:1.9;
  stroke-linecap:round;
}
.searchInput{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background: transparent;
  font-size:14px;
  color: var(--text);
}
.searchInput::placeholder{ color:#94a3b8; opacity:1; }
.musicAddBtn{display:inline-flex;min-width:48px;height:48px;align-items:center;justify-content:center;gap:7px;padding:0 16px}.musicAddBtn>span:first-child{font-size:21px;line-height:1}
.appDialog{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:18px;background:rgba(12,25,42,.48);backdrop-filter:blur(5px);animation:fadeIn 160ms ease}.appDialogCard{width:min(440px,100%);padding:25px;border:1px solid rgba(255,255,255,.75);border-radius:22px;background:rgba(255,255,255,.98);box-shadow:0 30px 90px rgba(16,35,60,.28);animation:riseIn 180ms ease}.appDialogIcon{display:grid;width:42px;height:42px;margin-bottom:14px;place-items:center;border-radius:13px;background:#edf5ff;color:#2474ea;font-size:20px;font-weight:900}.appDialogCard.is-success .appDialogIcon{background:#eaf8ef;color:#168347}.appDialogCard h2{margin:0 0 7px;font-size:20px}.appDialogCard>p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.55}.appDialogForm{display:flex;flex-direction:column;gap:12px}.appDialogField{display:flex;flex-direction:column;gap:6px}.appDialogField span{font-size:12px;font-weight:850}.appDialogField input,.appDialogField select{width:100%}.appDialogActions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}@media(max-width:520px){.appDialog{align-items:end;padding:10px}.appDialogCard{border-radius:22px 22px 14px 14px}.appDialogActions>*{flex:1}}
.appDialogCard.is-notice .appDialogIcon{background:linear-gradient(145deg,#eaf3ff,#f3f8ff);color:#1765d1}.appDialogCard.is-notice .appDialogActions .primaryBtn{min-width:104px}
.searchClearBtn{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:#64748b;
  background:rgba(148,163,184,0.12);
  cursor:pointer;
}
.searchClearBtn:hover{ color:#0f172a; background:rgba(148,163,184,0.22); }
.searchInput:placeholder-shown + .searchClearBtn{
  visibility:hidden;
  pointer-events:none;
}

.tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 10px 16px 0 16px;
}
body.isBandView:not(.isSongView) .tabs{position:sticky;top:0;z-index:50;padding-bottom:10px;background:rgba(248,251,255,.92);box-shadow:0 8px 24px rgba(15,23,42,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.bandLiveBar{position:sticky;top:8px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:11px 13px;border:1px solid rgba(20,160,92,.28);border-radius:15px;background:rgba(239,251,244,.96);box-shadow:0 12px 32px rgba(15,80,48,.16);backdrop-filter:blur(14px)}.bandLiveBarMain,.bandLiveBarActions{display:flex;align-items:center;gap:9px}.bandLiveBarMain>div{display:flex;flex-direction:column}.bandLiveBarMain span{color:#527363;font-size:10px}.bandLivePulse{width:10px;height:10px;border-radius:50%;background:#20a35a;box-shadow:0 0 0 5px rgba(32,163,90,.13);animation:band-live-pulse 1.8s ease-out infinite}.bandLiveSongList{position:absolute;top:calc(100% + 8px);right:0;left:0;display:grid;gap:5px;max-height:min(55vh,440px);padding:9px;border:1px solid #dce8e1;border-radius:15px;background:rgba(255,255,255,.98);box-shadow:0 20px 55px rgba(15,23,42,.2);overflow:auto}.bandLiveSong{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer}.bandLiveSong:hover{background:#f1f8f4}.bandLiveSong.isActive{background:#e8f8ef;color:#14733e}.bandLiveSong>span{display:grid;width:25px;height:25px;place-items:center;border-radius:8px;background:#edf2f7;color:#60758a;font-size:11px;font-weight:900}.bandLiveSong>div{display:flex;min-width:0;flex:1;flex-direction:column}.bandLiveSong small{color:var(--muted)}.bandLiveSong i{color:#178047;font-size:10px;font-style:normal;font-weight:900;text-transform:uppercase}.bandLiveSong:disabled{cursor:default;opacity:.85}@keyframes band-live-pulse{0%,70%,100%{box-shadow:0 0 0 3px rgba(32,163,90,.1)}30%{box-shadow:0 0 0 7px rgba(32,163,90,.16)}}@media(max-width:720px){.bandLiveBar{top:6px;align-items:stretch;flex-direction:column}.bandLiveBarActions>*{flex:1}.bandLiveSongList{top:calc(100% + 5px)}}
.mobilePlaylistTab{
  display:none;
}
.tabs .primaryBtn{
  margin-left: 0;
}
.menuSearchActions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex:0 1 460px;
}
.tabs .searchWrap{
  flex:1 1 auto;
  min-width:180px;
  padding-top:7px;
  padding-bottom:7px;
}
.tab{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.65);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  color: var(--muted);
  font-weight:700;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.tab.isActive{
  color: var(--text);
  border-color: rgba(59,130,246,0.28);
  background: rgba(59,130,246,0.10);
}
.tab:hover{ transform: translateY(-1px); }

.shell{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 14px 16px 30px 16px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 140px);
}
.shell.isSingleColumn{
  grid-template-columns: 1fr;
}

.side{
  display:block;
  position: sticky;
  top: 76px;
  height: fit-content;
}
.sideCard{
  background: rgba(255,255,255,0.75);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(16,24,40,0.08);
  padding: 14px;
  margin-bottom: 12px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.sideCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(16,24,40,0.10);
}
.sideCard.subtle{
  background: rgba(255,255,255,0.5);
}
.sideTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-weight:900;
  margin-bottom:10px;
}
.createMenu{position:relative;flex:0 0 auto}
.createMenu summary{list-style:none;user-select:none}
.createMenu summary::-webkit-details-marker{display:none}
.createMenu[open] summary{background:rgba(255,255,255,.95)}
.createMenuPopover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:var(--z-modal);
  width:180px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface, #fff);
  box-shadow:0 16px 40px rgba(16,24,40,.18);
}
.createMenuPopover button{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}
.createMenuPopover button:hover,.createMenuPopover button:focus-visible{background:rgba(59,130,246,.12);outline:none}
.hint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.hint code{
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.18);
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--text);
}
.hintSmall{ margin-top:8px; font-size:12px; opacity:0.9; }

.playlistList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.playlistItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pl-color, #7DB2FF) 18%, #fff 82%), #fff);
  box-shadow: 0 10px 26px rgba(16,24,40,0.06);
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.playlistItem:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}
.playlistItem.isSystem{
  border-color: color-mix(in srgb, var(--pl-color, #7DB2FF) 35%, var(--line));
}
.playlistItem strong{ font-size:14px; }
.playlistItem span{ color:var(--muted); font-size:12px; }
.playlistItem .row{
  display:flex; flex-direction:column;
}
.playlistItem .row2{
  display:flex; gap:8px; align-items:center;
}

.panel{
  background: rgba(255,255,255,0.78);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: box-shadow 200ms ease;
}
.panelHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding: 18px 20px;
  border-bottom:1px solid var(--line);
}
.panelTitle{ font-weight: 900; font-size: 16px; }
.panelMeta{ color: var(--muted); font-size: 12px; }

.songList{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 10px 10px 12px 10px;
}
.songRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.80);
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(16,24,40,0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.songRow:hover{
  background: rgba(59,130,246,0.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(16,24,40,0.10);
}
.songRow .left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.songRow .title{ font-weight: 900; }
.songRow .artist{ color: var(--muted); font-size: 12px; }
.songRow .right{
  display:flex;
  align-items:center;
  gap:10px;
}

.emptyState{
  padding: 26px 16px;
  text-align:center;
}
.emptyTitle{ font-weight: 900; font-size: 18px; }
.emptyText{ color: var(--muted); margin-top: 6px; }

.songView{
  position: relative;
  padding: 16px;
  padding-bottom: 8px;
  background: rgba(255,255,255,0.88);
  border-radius: 22px;
}
.songTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 10px 14px 10px;
  border-bottom:0;
}
body.isSongView .songTop{
  display:none;
}
.songTopRight{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  flex-wrap: wrap;
}
.songTopRight .editWrap,
.songTopRight .exportWrap{
  flex: 0 0 auto;
}
.mobileMoreWrap{
  position:relative;
  z-index:30;
}
.moreMenuBtn{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0 0 5px;
  border:1px solid rgba(18,31,59,0.10);
  border-radius:14px;
  background:rgba(255,255,255,0.94);
  color:var(--text);
  font-size:18px;
  font-weight:1000;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(16,24,40,0.08);
}
.moreMenuBtn:hover,
.moreMenuBtn[aria-expanded="true"]{
  border-color:rgba(59,130,246,0.34);
  background:#f8fbff;
}
.mobileMoreMenu{
  display:none;
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(290px, calc(100vw - 24px));
  padding:10px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 22px 55px rgba(16,24,40,0.18);
  backdrop-filter:blur(18px);
}
.mobileMoreMenu::before{
  content:"";
  position:absolute;
  top:-7px;
  right:14px;
  width:13px;
  height:13px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  background:inherit;
  transform:rotate(45deg);
}
.mobileMoreMenu.isOpen{
  display:grid;
}
.menuActionBtn{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:30px 1fr;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:45px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font:800 14px/1.2 var(--font);
  text-align:left;
  cursor:pointer;
}
.menuActionBtn:hover,
.menuActionBtn:focus-visible{
  outline:0;
  background:rgba(59,130,246,0.08);
}
.menuActionBtn > span:first-child{
  color:#1e3a5f;
  font-size:20px;
  text-align:center;
}
.menuActionBtn.isDanger,
.menuActionBtn.isDanger > span:first-child{
  color:#ef4444;
}
.menuDivider{
  height:1px;
  margin:6px 4px;
  background:var(--line);
}
.mobileKeyActions{
  display:none;
}
.songTopRight .ghostBtn,
.songTopRight .dangerBtn,
.songTopRight .iconBtn,
.songTopRight .collapseBtnSong{
  white-space: nowrap;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  border-color: rgba(18,31,59,0.12);
  box-shadow: 0 9px 22px rgba(16,24,40,0.06);
}
.songBackBtn{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font:inherit;font-weight:850;cursor:pointer}.songBackBtn:hover{border-color:#8bb8f4;background:#eef6ff}.songBackBtn>span:first-child{color:#1765d1;font-size:20px}
#prevSongBtn,
#nextSongBtn{
  min-height:58px;
  border-color:rgba(59,130,246,0.35);
  background:linear-gradient(180deg, #fff, #eff6ff);
  color:#1d4ed8;
  font-size:14px;
  box-shadow:0 12px 26px rgba(37,99,235,0.14);
}
#prevSongBtn .actionIcon,
#nextSongBtn .actionIcon{
  color:#2563eb;
  font-size:23px;
}
.actionBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 900;
}
.actionIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 20px;
  min-width: 20px;
  font-size: 19px;
  line-height: 1;
  color: var(--text);
}
.playBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #2563eb;
  border-radius: 14px;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  font-size:15px;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 13px 28px rgba(37,99,235,0.30);
  transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease;
}
.playBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(37,99,235,0.36);
}
.playIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  box-shadow:none;
}
.songTopMid{ text-align:center; flex:1; }
.songTitle{ font-weight: 1000; font-size: 18px; }
.songArtist{ color: var(--muted); font-size: 12px; margin-top:2px; }

.controls{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 10px 0 14px 0;
  padding: 0;
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.90);
  box-shadow: 0 18px 44px rgba(16,24,40,0.07);
  overflow:hidden;
}
.ctrlGroup{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width: 0;
  padding: 18px 18px;
  border-right: 1px solid var(--line);
}
.ctrlGroup:nth-child(4){
  border-right: 0;
}
.ctrlLabel{
  display:flex;
  align-items:center;
  gap:7px;
  color:#1d4ed8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ctrlLabel > span{
  font-size:15px;
  text-transform:none;
}
.ctrlHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.keyHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.stageModeBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(18,31,59,0.14);
  border-radius:12px;
  background:rgba(255,255,255,0.9);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(16,24,40,0.06);
}
.stageModeBtn:hover{
  border-color:rgba(59,130,246,0.38);
  transform:translateY(-1px);
}
.stageModeBtn:focus-visible{
  outline:3px solid rgba(59,130,246,0.28);
  outline-offset:2px;
}
.stageModeBtn.isActive{
  border-color:rgba(96,165,250,0.5);
  background:#111827;
  color:#fff;
  box-shadow:0 9px 24px rgba(7,10,18,0.28);
}
.stageModeIcon{
  font-size:16px;
  line-height:1;
}
.ctrlValueInputWrap{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,0.88);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 8px 20px rgba(16,24,40,0.05);
}
.draggableNumber{
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
}
.draggableNumber.isDragging{
  border-color:rgba(59,130,246,0.48);
  background:#eff6ff;
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
}
.dragCue{
  color:var(--brand);
  font-size:14px;
  line-height:1;
}
.ctrlValueInput{
  width:3.2em;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:right;
}
.ctrlValueInput:focus-visible{
  box-shadow:0 0 0 3px rgba(59,130,246,0.18);
  border-radius:4px;
}
.ctrlRow{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.ctrlSpacer{ flex:1; }
.ctrlRow .ghostBtn{
  margin-left: 0;
}
.ctrlValue{
  padding: 11px 13px;
  border-radius: 13px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.88);
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(16,24,40,0.05);
}
.range{
  width: 100%;
  min-width: 110px;
  accent-color: var(--brand);
}
.keyGroup .ctrlRow{
  flex-wrap: nowrap;
}
.textSizeGroup .ctrlRow{
  min-height:24px;
}
.controlResetBtn{
  padding:3px 5px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:800 11px/1 var(--font);
  cursor:pointer;
}
.controlResetBtn:hover{ color:#1d4ed8; }
.controlStepper{display:inline-flex;align-items:stretch;min-width:0;height:40px;border:1px solid #d6e1ef;border-radius:12px;background:var(--card);box-shadow:0 5px 14px rgba(16,24,40,.05);overflow:hidden}
.stepperBtn{display:grid;width:38px;min-width:38px;place-items:center;padding:0;border:0;background:transparent;color:#315a86;font:700 19px/1 var(--font);cursor:pointer}
.stepperBtn:hover{background:#eaf3ff;color:#145fc3}.stepperBtn:active{background:#dbeafe}
.stepperValue{display:inline-flex;min-width:76px;align-items:center;justify-content:center;gap:4px;padding:0 8px;border-right:1px solid #e2e8f0;border-left:1px solid #e2e8f0;background:#f8fafc;color:var(--text);font-size:11px;font-weight:900;white-space:nowrap}
.stepperValue .ctrlValueInput{width:3.1em;text-align:right}
.metronomeControls{
  justify-content:flex-start;
}
.roundPlayBtn{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid #3b82f6;
  border-radius:999px;
  background:#fff;
  color:#2563eb;
  cursor:pointer;
}
.roundPlayBtn .playIcon{
  width:auto;
  height:auto;
  background:transparent;
  color:#2563eb;
  font-size:13px;
}
.roundPlayBtn.isOn{
  background:#2563eb;
}
.roundPlayBtn.isOn .playIcon{ color:#fff; }
.visuallyHidden{
  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;
}
.backingTrackGroup{
  grid-column: 1 / -1;
  border-right: 0;
  border-top: 1px solid var(--line);
}
.notesControlGroup{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  border-right:0;
  border-top:1px solid var(--line);
}

.performanceInputGroup{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.performanceInputGroup .ctrlDescription{
  margin-top:4px;
  color:var(--muted, #667085);
  font-size:12px;
  line-height:1.35;
}

#offlineSongBtn[data-offline-saved="true"]{
  color:#087443;
  background:rgba(16, 185, 129, .08);
}

.setlistProActions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.setlistSectionHeader{display:flex;align-items:center;justify-content:space-between;margin:18px 0 6px;padding:11px 14px;border-radius:12px;background:#edf4ff;border-left:5px solid #2474ea}
.setlistSectionHeader>div{display:flex;align-items:center;gap:10px}
.setlistSectionHeader span{font-size:12px;color:var(--muted)}
.setlistSectionHeader.is-break{background:#fff6df;border-left-color:#e6a21a}
.setlistSectionHeader.is-encore{background:#f4edff;border-left-color:#8757d9}
.setlistSongRow{display:grid;grid-template-columns:26px minmax(0,1fr) auto;cursor:pointer}
.setlistDrag{color:#98a2b3;cursor:grab;font-weight:800;letter-spacing:-3px}
.setlistPosition{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:#edf4ff;color:#145ab8;font-weight:800;font-size:12px}
.setlistMoveActions{display:flex;align-items:center;gap:4px}
.setlistMoveBtn{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid #d6e1ef;border-radius:8px;background:#fff;color:#42617f;font-weight:900;cursor:pointer}
.setlistMoveBtn:hover{border-color:#2474ea;color:#145ab8}
.setlistSongMeta{margin-top:4px;color:#3f6f9d;font-size:12px;font-weight:700}
.lockedPerformanceBar{position:sticky;top:8px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding:9px 12px;border-radius:12px;background:#111827;color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2)}
body.isPerformanceLocked #backBtn,body.isPerformanceLocked #mobileMoreBtn,body.isPerformanceLocked #collapseAppBtn{display:none!important}

@media (max-width:720px){
  .panelHeader{align-items:flex-start;gap:10px}
  .setlistProActions{justify-content:flex-start;width:100%}
  .setlistProActions .miniBtn{flex:1}
  .setlistSongRow{grid-template-columns:22px minmax(0,1fr) auto}
}
.ctrlDescription{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.backingTrackGroup .ctrlRow{
  flex-wrap: wrap;
}
.backingTrackGroup audio{
  max-width: min(420px, 100%);
}

.trackTimeline{display:flex;gap:7px;overflow-x:auto;padding:4px 0 2px;scrollbar-width:thin}
.timelineMarker{flex:0 0 auto;border:1px solid #d8e3f1;border-radius:999px;background:#fff;padding:6px 10px;color:#526b85;font-size:12px;font-weight:800;cursor:pointer}
.timelineMarker.isActive{border-color:#2474ea;background:#2474ea;color:#fff;box-shadow:0 5px 14px rgba(36,116,234,.25)}
.timelineMarker.is-chorus{border-style:double}.timelineMarker.is-solo{border-color:#8757d9}.timelineMarker.is-outro{border-color:#e6a21a}
.backingTimelineEditor{padding:14px;border:1px solid #dfe8f3;border-radius:14px;background:#f8fbff}
.backingTimelineEditor .toggleRow{margin:10px 0}
.backingTimelineEditor textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}


.bandPanel{padding:24px;background:linear-gradient(145deg,#fff 0%,#f8fbff 100%)}
.bandEmptySteps i{font-style:normal}
.bandActionStatus:empty{display:none}.bandActionStatus{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#eef6ff;color:#255b92;font-size:12px;font-weight:750}.bandActionStatus[data-tone="error"]{background:#fff0f0;color:#b42318}.bandActionStatus[data-tone="success"]{background:#ecfdf3;color:#167647}
.bandEmptyState{max-width:720px;margin:38px auto 22px;padding:34px;border:1px solid #dfe9f6;border-radius:22px;background:#fff;text-align:center;box-shadow:0 14px 36px rgba(42,72,110,.08)}.bandEmptyIcon{display:grid;width:58px;height:58px;margin:0 auto 15px;place-items:center;border-radius:18px;background:#edf5ff;color:#2474ea;font-size:29px}.bandEmptyState h2{margin:0 0 8px;font-size:22px}.bandEmptyState>p{max-width:570px;margin:0 auto;color:var(--muted);line-height:1.6}.bandEmptySteps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:24px}.bandEmptySteps span{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:#f7faff;color:#526b85;font-size:12px;font-weight:800;text-align:left}.bandEmptySteps b,.bandStepNumber{display:grid;flex:0 0 auto;width:25px;height:25px;place-items:center;border-radius:50%;background:#2474ea;color:#fff;font-size:12px}
.bandWorkspace{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;margin-top:22px}.bandSidebar{padding-right:16px;border-right:1px solid #e3ebf5}.bandSidebarLabel,.bandEyebrow{display:block;margin-bottom:9px;color:#7890aa;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.bandList{display:flex;flex-direction:column;gap:7px}.bandListItem{padding:11px 12px;border:1px solid transparent;border-radius:11px;background:transparent;color:#48627c;text-align:left;font-weight:800;cursor:pointer;transition:.15s}.bandListItem:hover{background:#f1f6fc}.bandListItem.isActive{border-color:#b8d4f7;background:#eaf3ff;color:#145ab8;box-shadow:inset 3px 0 #2474ea}.bandMain{min-width:0}.bandSelectedHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.bandSelectedHead h2{margin:0;font-size:22px}.bandRoleBadge,.bandCount{padding:5px 9px;border-radius:999px;background:#edf5ff;color:#145ab8;font-size:11px;font-weight:900}
.bandSteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.bandStepCard{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:15px;border:1px solid #dfe8f3;border-radius:15px;background:#fff}.bandStepCard>div{display:flex;min-width:0;flex:1;flex-direction:column;align-items:flex-start}.bandStepCard h3{margin:1px 0 5px;font-size:14px}.bandStepCard p{min-height:48px;margin:0 0 11px;color:var(--muted);font-size:11px;line-height:1.45}.bandStepCard select{width:100%;margin:0 0 7px}.bandStepCard button{margin-top:auto}.bandLiveActions{display:flex;gap:6px;flex-wrap:wrap}.bandLiveStatus{margin:12px 0;padding:11px 13px;border:1px solid #dfe8f3;border-radius:12px;background:#f6f9fc;color:#647b93;font-size:12px;font-weight:800}.bandLiveStatus:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#9aabba}.bandLiveStatus.isLive{border-color:#a8d8bd;background:#effbf4;color:#197342}.bandLiveStatus.isLive:before{background:#21a45b;box-shadow:0 0 0 4px rgba(33,164,91,.12)}
.bandCommandBar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px;padding:16px 18px;border:1px solid #dce8f5;border-radius:17px;background:linear-gradient(135deg,#f7fbff,#fff);box-shadow:0 10px 28px rgba(42,72,110,.06)}
.bandRepertoire{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,1fr);align-items:center;gap:7px 12px}.bandCommandLabel{grid-column:1/-1;color:#526b85;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.bandRepertoire small{color:var(--muted);font-size:11px}.bandSetlistChoices{display:flex;flex-wrap:wrap;gap:7px}.bandSetlistChoice{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:7px 11px;border:1px solid #cedbeb;border-radius:11px;background:#fff;color:var(--text);font-size:12px;font-weight:800;cursor:pointer}.bandSetlistChoice:has(input:checked){border-color:#76aafb;background:#eaf3ff;color:#145fc3}.bandSetlistChoice input{margin:0;accent-color:#176fe7}.bandLiveLaunch{display:flex;align-items:flex-end;flex-direction:column;gap:7px}.bandLiveLaunch .bandCommandLabel{align-self:flex-start}.bandLiveLaunchBtn{min-height:44px;padding:0 20px;background:linear-gradient(135deg,#168a52,#20a864);border-color:#168a52;color:#fff;box-shadow:0 9px 22px rgba(23,139,83,.22)}
.bandGrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px}.bandCard{padding:16px;border:1px solid #dfe8f3;border-radius:15px;background:#fff}.bandCardHead,.bandCardHead>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.bandCardHead{margin-bottom:12px}.bandCard h3{margin:0;font-size:14px}.bandCardIcon{color:#2474ea}.bandCardHint{margin:-5px 0 12px;color:var(--muted);font-size:11px}.bandCard input,.bandCard textarea,.bandCard select{width:100%;margin-bottom:8px}.bandMember{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #edf1f6}.bandMember:last-child{border-bottom:0}.bandMemberAvatar{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:#edf5ff;color:#2474ea;font-size:12px;font-weight:900}.bandMemberInfo{display:flex;flex-direction:column}.bandMemberInfo small{color:var(--muted);font-size:10px;text-transform:capitalize}.bandNote{display:block;padding:9px 0;border-bottom:1px solid var(--line)}.bandNote p{margin:4px 0;color:var(--muted);font-size:12px;white-space:pre-wrap}.bandInnerEmpty{padding:18px 5px;color:var(--muted);font-size:12px;text-align:center}
@media(max-width:980px){.bandSteps{grid-template-columns:1fr}.bandStepCard p{min-height:0}.bandGrid{grid-template-columns:1fr}}
@media(max-width:980px){.bandCommandBar{grid-template-columns:1fr}.bandLiveLaunch{align-items:stretch}.bandRepertoire{grid-template-columns:1fr}.bandRepertoire small{grid-row:3}.bandLiveLaunchBtn{width:100%}}
@media(max-width:720px){.bandPanel{padding:16px}.bandHead{align-items:flex-start;flex-direction:column}.bandHeadActions{width:100%}.bandHeadActions>*{flex:1}.bandSubtitle{max-width:260px}.bandWorkspace{grid-template-columns:1fr}.bandSidebar{padding:0 0 12px;border-right:0;border-bottom:1px solid var(--line)}.bandList{flex-direction:row;overflow:auto}.bandListItem{flex:0 0 auto}.bandEmptyState{margin-top:22px;padding:24px 16px}.bandEmptySteps{grid-template-columns:1fr}.bandSelectedHead{margin-top:2px}.bandCommandBar{padding:13px}}

body.isBandLivePerformance .siteHeader,
body.isBandLivePerformance .topbar,
body.isBandLivePerformance .authBar,
body.isBandLivePerformance .tabs,
body.isBandLivePerformance .bandPanel,
body.isBandLivePerformance .libraryPanel,
body.isBandLivePerformance .chordsPanel,
body.isBandLivePerformance .adminPanel,
body.isBandLivePerformance .side,
body.isBandLivePerformance .pageFooter,
body.isBandLivePerformance .songTop,
body.isBandLivePerformance .songBottomNav{display:none!important}
body.isBandLivePerformance .shell{width:100%;max-width:none;padding:8px 12px 90px}
body.isBandLivePerformance .songView{width:100%;max-width:none;padding-top:82px;border:0;background:transparent;box-shadow:none}
body.isBandLivePerformance .songTitleInline{justify-content:center;padding-top:4px;text-align:center}
body.isBandLivePerformance .songTitleText{margin-right:0;text-align:center}
body.isBandLivePerformance .saveSharedSongBtn{display:none!important}
body.isBandLivePerformance #toggleFavBtn,
body.isBandLivePerformance #openAddBtn,
body.isBandLivePerformance #collapseAppBtn{display:none!important}
body.isBandLivePerformance .bandLiveBar{position:fixed;top:10px;right:12px;left:12px;z-index:calc(var(--z-performance) + 1);margin:0}
body.isBandLivePerformance.isBandLiveFollower .performanceActions{display:none!important}
body.isBandLivePerformance.isBandLiveFollower .shell{padding-bottom:24px}
@media(max-width:720px){body.isBandLivePerformance .bandLiveBar{top:7px;align-items:center;flex-direction:row}body.isBandLivePerformance .bandLiveBarActions{margin-left:auto}body.isBandLivePerformance .songView{padding-top:80px}}
.performanceActions{
  display:grid;
  grid-template-columns:minmax(150px, .55fr) minmax(280px, 1.35fr) minmax(150px, .55fr);
  gap:14px;
  margin:0 0 14px;
}
.performanceActions #prevSongBtn{ grid-column:1; grid-row:1; }
.performanceActions .performanceStartBtn{ grid-column:2; grid-row:1; }
.performanceActions #nextSongBtn{ grid-column:3; grid-row:1; }
.performanceActions .performanceModeBtn{
  grid-column:2;
  grid-row:2;
  width:min(280px, 100%);
  justify-self:center;
}
.performanceModeBtn,
.performanceStartBtn{
  width:100%;
  min-height:62px;
  border-radius:16px;
  font-size:16px;
}
.performanceModeBtn{
  background:rgba(255,255,255,0.94);
}
.performanceStartBtn{
  font-size:18px;
}
.songControlsPanel{
  margin:12px 0 16px;
  padding:12px;
  border:1px solid rgba(59,130,246,0.22);
  border-radius:18px;
  background:rgba(239,246,255,0.62);
  box-shadow:0 12px 30px rgba(37,99,235,0.07);
}
.songControlsToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:42px;
  padding:6px 8px;
  border:0;
  background:transparent;
  color:var(--text);
  font:900 14px/1.2 var(--font);
  cursor:pointer;
}
.songControlsToggle > span:first-child{
  display:flex;
  align-items:center;
  gap:9px;
}
.songControlsIcon,
.songControlsChevron{
  color:#2563eb;
  font-size:18px;
}
.songControlsChevron{
  transition:transform 160ms ease;
}
.songControlsPanel.isOpen .songControlsChevron{
  transform:rotate(180deg);
}
.songControlsSummary{
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
  padding:10px 12px;
  border:1px solid rgba(59,130,246,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.78);
  font-size:12px;
}
.songControlsSummary span{
  display:inline-flex;
  gap:6px;
  white-space:nowrap;
}
.songControlsSummary .summaryScrub{
  align-items:center;
  padding:5px 8px;
  border-radius:8px;
  cursor:ns-resize;
  touch-action:none;
  user-select:none;
}
.songControlsSummary .summaryScrub:hover,
.songControlsSummary .summaryScrub:focus-visible,
.songControlsSummary .summaryScrub.isDragging{
  outline:none;
  background:rgba(37,99,235,.10);
  color:#1d4ed8;
}
.songControlsSummary .summaryScrub strong{ min-width:2ch; font-size:13px; }
.songControlsSummary i{
  color:#64748b;
  font-style:normal;
}
.songControlsSummary button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 6px;
  border:0;
  background:transparent;
  color:var(--text);
  font:800 12px/1 var(--font);
  cursor:pointer;
}
.songControlsPanel:not(.isOpen) .controls{
  display:none;
}
.songControlsPanel.isOpen .songControlsSummary{
  display:none;
}
.songControlsPanel.isOpen .controls{
  margin:6px 0 0;
  box-shadow:none;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .controls{
  display:none !important;
}
body.isSongView.appCollapsed .performanceActions{
  grid-template-columns:minmax(240px, 520px);
  justify-content:center;
}
body.isSongView.appCollapsed .performanceModeBtn{
  display:none;
}
body.theme-dark.isSongView.appCollapsed .performanceModeBtn{
  display:none !important;
}

/* Final mobile cascade guard: collapsed mode must keep the primary action in view. */
@media (max-width:720px){
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:52px minmax(132px, 1fr) 52px;
    justify-content:stretch;
  }
  body.isSongView.appCollapsed .performanceActions .performanceModeBtn{
    display:none;
  }
  body.isSongView.appCollapsed .performanceActions #prevSongBtn{
    grid-column:1;
  }
  body.isSongView.appCollapsed .performanceActions .performanceStartBtn{
    grid-column:2;
  }
  body.isSongView.appCollapsed .performanceActions #nextSongBtn{
    grid-column:3;
  }
}

@media (max-width:380px){
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:46px minmax(104px, 1fr) 46px;
  }
}

/* Narrow phones: keep title actions aligned and the overflow menu on-screen. */
@media (max-width:720px){
  body.isSongView .songTitleInline{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:16px 8px 10px;
  }
  body.isSongView .songTitleText{
    order:1;
    flex:1 0 100%;
    width:100%;
    margin:0 0 2px;
  }
  body.isSongView .favoriteTitleBtn{
    order:2;
    margin-left:auto;
  }
  body.isSongView .mobileMoreWrap{
    order:3;
    position:static;
  }
  body.isSongView .notesToggleBtn{
    order:4;
  }
  body.isSongView .mobileMoreMenu{
    position:fixed;
    top:auto;
    right:8px;
    bottom:calc(80px + env(safe-area-inset-bottom));
    left:8px;
    z-index:var(--z-menu);
    width:auto;
    max-height:min(68dvh, 520px);
    padding:10px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:20px;
    box-shadow:0 24px 70px rgba(15,23,42,0.30);
    transform-origin:bottom center;
  }
  body.isSongView .mobileMoreMenu::before{
    display:none;
  }
  body.isSongView .mobileMoreMenu.isOpen{
    animation:mobile-menu-reveal 180ms ease-out both;
  }
}

@keyframes mobile-menu-reveal{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Desktop and tablet: use the same persistent performance bar as mobile. */
@media (min-width:721px){
  body.isSongView .songView{
    padding-bottom:104px;
  }
  body.isSongView .performanceActions,
  body.isSongView.appCollapsed .performanceActions{
    position:fixed;
    right:20px;
    bottom:18px;
    left:20px;
    z-index:var(--z-performance);
    display:grid;
    grid-template-columns:128px 130px minmax(220px, 360px) 130px;
    align-items:stretch;
    justify-content:center;
    gap:9px;
    width:min(810px, calc(100vw - 40px));
    margin:0 auto;
    padding:9px;
    border:1px solid rgba(148,163,184,0.30);
    border-radius:20px;
    background:rgba(255,255,255,0.92);
    box-shadow:0 20px 55px rgba(15,23,42,0.22);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
  }
  body.isSongView .performanceActions .performanceModeBtn{
    display:inline-flex;
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    min-height:58px;
    padding-right:9px;
    padding-left:9px;
    overflow:hidden;
  }
  body.isSongView .performanceModeBtn .stageModeText{
    display:flex;
    min-width:0;
    flex-direction:column;
    align-items:flex-start;
    overflow:visible;
    line-height:1.05;
    text-align:left;
    white-space:normal;
  }
  body.isSongView .performanceActions #prevSongBtn{
    grid-column:2;
    grid-row:1;
  }
  body.isSongView .performanceActions .performanceStartBtn{
    grid-column:3;
    grid-row:1;
    width:100%;
    min-height:58px;
  }
  body.isSongView .performanceActions #nextSongBtn{
    grid-column:4;
    grid-row:1;
  }
  body.isSongView .performanceActions #prevSongBtn,
  body.isSongView .performanceActions #nextSongBtn{
    width:100%;
    min-height:58px;
    box-shadow:none;
  }
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:130px minmax(220px, 360px) 130px;
    width:min(650px, calc(100vw - 40px));
  }
  body.isSongView.appCollapsed .performanceActions .performanceModeBtn{
    display:none;
  }
  body.isSongView.appCollapsed .performanceActions #prevSongBtn{ grid-column:1; }
  body.isSongView.appCollapsed .performanceActions .performanceStartBtn{ grid-column:2; }
  body.isSongView.appCollapsed .performanceActions #nextSongBtn{ grid-column:3; }
}

/* === Performance polish: predictable mobile controls and calm motion === */
.playButtonLabel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  line-height:1.05;
}
.performanceSpeed{
  color:rgba(255,255,255,0.78);
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
}
.performanceStartBtn.isPlaying{
  border-color:#0f766e;
  background:linear-gradient(180deg, #14b8a6, #0f766e);
  box-shadow:0 14px 30px rgba(15,118,110,0.30);
}
.performanceStartBtn.isPlaying .playIcon{
  animation:scroll-running-pulse 1.8s ease-out infinite;
}
.songControlsPanel.isOpen .controls{
  animation:controls-reveal 180ms ease-out both;
  transform-origin:top center;
}
.favoriteTitleBtn,
.notesToggleBtn,
.moreMenuBtn,
.stageModeBtn,
.chipBtn,
.ghostBtn{
  transition:transform 140ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid rgba(37,99,235,0.30);
  outline-offset:2px;
}

@keyframes controls-reveal{
  from{ opacity:0; transform:translateY(-5px) scaleY(.985); }
  to{ opacity:1; transform:translateY(0) scaleY(1); }
}
@keyframes scroll-running-pulse{
  0%, 65%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
  25%{ box-shadow:0 0 0 5px rgba(255,255,255,0.16); }
}

@media (max-width:720px){
  body.isSongView .songView{
    padding-bottom:calc(88px + env(safe-area-inset-bottom));
  }
  body.isSongView .performanceActions,
  body.isSongView.appCollapsed .performanceActions{
    position:fixed;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    left:8px;
    z-index:var(--z-performance);
    display:grid;
    grid-template-columns:52px 52px minmax(132px, 1fr) 52px;
    align-items:stretch;
    gap:7px;
    width:auto;
    margin:0;
    padding:7px;
    border:1px solid rgba(148,163,184,0.30);
    border-radius:18px;
    background:rgba(255,255,255,0.92);
    box-shadow:0 18px 45px rgba(15,23,42,0.22);
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
  }
  body.isSongView .performanceActions .performanceModeBtn{
    display:inline-flex;
    grid-column:1;
    grid-row:1;
    width:52px;
    min-width:0;
    min-height:52px;
    padding:0;
    border-radius:13px;
  }
  body.isSongView .performanceModeBtn .stageModeText{ display:none; }
  body.isSongView .performanceModeBtn .stageModeIcon{ font-size:19px; }
  body.isSongView .performanceActions #prevSongBtn{
    grid-column:2;
    grid-row:1;
  }
  body.isSongView .performanceActions .performanceStartBtn,
  body.isSongView.appCollapsed .performanceActions .performanceStartBtn{
    display:inline-flex;
    grid-column:3;
    grid-row:1;
    width:100%;
    min-width:0;
    min-height:52px;
    margin:0;
    border-radius:13px;
  }
  body.isSongView .performanceActions #nextSongBtn{
    grid-column:4;
    grid-row:1;
  }
  body.isSongView .performanceActions #prevSongBtn,
  body.isSongView .performanceActions #nextSongBtn{
    display:inline-flex;
    width:52px;
    min-width:0;
    min-height:52px;
    padding:0;
    border-radius:13px;
    box-shadow:none;
  }
  body.isSongView .performanceActions #prevSongBtn span:last-child,
  body.isSongView .performanceActions #nextSongBtn span:last-child{
    display:none;
  }
  body.isSongView .performanceActions #prevSongBtn .actionIcon,
  body.isSongView .performanceActions #nextSongBtn .actionIcon{
    margin:0;
    font-size:22px;
  }
  .songControlsPanel{
    margin-right:0;
    margin-left:0;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(37,99,235,0.06);
  }
  .songControlsSummary{
    scroll-snap-type:x proximity;
  }
  .songControlsSummary > *{
    scroll-snap-align:start;
  }
  .songTitleInline{
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
  }
  .songTitleText{
    min-width:0;
  }
  .songTitle{
    font-size:clamp(20px, 6vw, 27px);
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .songArtist{
    margin-top:5px;
    font-size:13px;
  }
  .songContent .line{
    font-size:max(var(--fit-lyrics-size, var(--lyrics-size)), 10px);
  }
}

@media (max-width:380px){
  body.isSongView .performanceActions,
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:46px 46px minmax(104px, 1fr) 46px;
    gap:5px;
    padding:6px;
  }
  body.isSongView .performanceActions .performanceModeBtn,
  body.isSongView .performanceActions #prevSongBtn,
  body.isSongView .performanceActions #nextSongBtn{
    width:46px;
  }
  .performanceStartBtn{
    padding-right:10px;
    padding-left:10px;
  }
}

body.theme-dark.isSongView .performanceActions{
  border-color:rgba(148,163,184,0.24);
  background:rgba(7,10,18,0.90);
  box-shadow:0 18px 45px rgba(0,0,0,0.48);
}
body.theme-dark.isSongView .performanceModeBtn{
  display:inline-flex !important;
}
body.theme-dark .performanceStartBtn.isPlaying{
  border-color:#2dd4bf;
  background:linear-gradient(180deg, #0f766e, #115e59);
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:720px){
  .performanceActions{
    grid-template-columns:minmax(76px, .5fr) minmax(150px, 1.5fr) minmax(76px, .5fr);
    gap:8px;
  }
  .performanceActions #prevSongBtn,
  .performanceActions #nextSongBtn{
    min-height:54px;
    padding:8px;
    font-size:12px;
  }
  .performanceActions .performanceStartBtn{
    min-height:54px;
  }
  .performanceActions .performanceModeBtn{
    grid-column:1 / -1;
    width:min(230px, 72%);
    min-height:46px;
  }
  .songControlsPanel{
    margin:10px 4px 14px;
    padding:10px;
  }
  .songControlsSummary{
    justify-content:flex-start;
    gap:7px;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
  }
  .songControlsSummary::-webkit-scrollbar{ display:none; }
  .songControlsPanel.isOpen .controls{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
    border-radius:14px;
  }
  .songControlsPanel.isOpen .ctrlGroup{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:8px 12px;
    min-height:76px;
    padding:12px 14px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .songControlsPanel.isOpen .ctrlGroup:last-child{
    border-bottom:0;
  }
  .songControlsPanel.isOpen .ctrlHeader{
    display:contents;
  }
  .songControlsPanel.isOpen .ctrlLabel{
    grid-column:1;
    color:var(--text);
    font-size:13px;
  }
  .songControlsPanel.isOpen .ctrlValueInputWrap{
    grid-column:2;
    grid-row:1;
    min-width:82px;
  }
  .songControlsPanel.isOpen .ctrlRow{
    grid-column:2;
    justify-content:flex-end;
  }
  .songControlsPanel.isOpen .keyGroup .ctrlRow{
    grid-row:1;
  }
  .songControlsPanel.isOpen .controlResetBtn,
  .songControlsPanel.isOpen .textSizeGroup .ctrlRow{
    display:inline-flex;
  }
  .songControlsPanel.isOpen .backingTrackGroup{
    grid-template-columns:1fr;
  }
  .songControlsPanel.isOpen .backingTrackGroup .ctrlLabel,
  .songControlsPanel.isOpen .backingTrackGroup .ctrlRow{
    grid-column:1;
  }
}

body.theme-dark.isSongView .topbar,
body.theme-dark.isSongView .authBar,
body.theme-dark.isSongView .tabs,
body.theme-dark.isSongView .songTop,
body.theme-dark.isSongView .songControlsPanel,
body.theme-dark.isSongView .pageFooter,
body.theme-dark.isSongView .favoriteTitleBtn,
body.theme-dark.isSongView .mobileMoreWrap,
body.theme-dark.isSongView .notesToggleBtn{
  display:none !important;
}
body.theme-dark.isSongView .performanceActions{
  margin-top:8px;
}
body.theme-dark .mobileMoreMenu,
body.theme-dark .moreMenuBtn{
  background:rgba(17,24,39,0.98);
}
body.theme-dark .menuActionBtn > span:first-child{
  color:#bfdbfe;
}
body.theme-dark .songControlsPanel{
  background:rgba(15,23,42,0.86);
}
body.theme-dark .songControlsSummary{
  background:rgba(30,41,59,0.72);
}
body.isShared .mobileMoreWrap{
  display:none;
}

.songTitleInline{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  text-align:center;
  padding: 12px 16px 6px 16px;
}
.songTitleText{
  margin-right:auto;
  text-align:left;
}
.favoriteTitleBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid rgba(239,68,68,0.20);
  border-radius:999px;
  background:rgba(255,255,255,0.9);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.notesToggleBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(59,130,246,0.22);
  border-radius:999px;
  background:rgba(255,255,255,0.9);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.notesToggleBtn.isActive{
  border-color:rgba(59,130,246,0.48);
  background:#eff6ff;
  color:#1d4ed8;
}
.songNotesPanel{
  width:min(760px, calc(100% - 32px));
  margin:6px auto 14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,0.94);
  box-shadow:0 16px 40px rgba(16,24,40,0.09);
}
.notesPanelHead,
.notesFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.notesPanelTitle{
  font-size:16px;
  font-weight:1000;
}
.notesPanelHint,
.notesFooter{
  color:var(--muted);
  font-size:12px;
}
.notesTabs{
  display:flex;
  gap:8px;
  margin:14px 0 12px;
}
.notesTab{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}
.notesTab.isActive{
  border-color:rgba(59,130,246,0.40);
  background:#eff6ff;
  color:#1d4ed8;
}
.notesEditorWrap{
  display:grid;
  gap:10px;
}
.notesCategoryLabel{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.notesCategoryLabel select{
  min-height:36px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--text);
  font:inherit;
}
#songNotesInput{
  width:100%;
  min-height:116px;
  resize:vertical;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  color:var(--text);
  font:inherit;
  line-height:1.5;
}
#songNotesInput:focus{
  outline:3px solid rgba(59,130,246,0.16);
  border-color:rgba(59,130,246,0.45);
}
.notesSaveStatus[data-tone="success"]{ color:#15803d; }
.notesSaveStatus[data-tone="error"]{ color:#b91c1c; }
.sharedNoteReadOnly{
  display:grid;
  gap:10px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  line-height:1.5;
}
.noteCategoryBadge{
  width:max-content;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(59,130,246,0.13);
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
}
.notesEmpty{ color:var(--muted); }
.anchoredNotesHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.anchoredNotesHead > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.anchoredNotesHead span{
  color:var(--muted);
  font-size:12px;
}
.inlineNotesToggle{
  flex:0 0 auto;
}
.anchoredNotesList{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.anchoredNoteCard{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  transition:border-color 160ms ease, box-shadow 160ms ease;
}
.anchoredNoteCard.isFocused{
  border-color:rgba(59,130,246,0.65);
  box-shadow:0 0 0 4px rgba(59,130,246,0.14);
}
.anchoredNoteMeta,
.anchoredNoteActions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  color:var(--muted);
  font-size:11px;
}
.anchoredNoteCard blockquote{
  margin:0;
  padding:7px 10px;
  border-left:3px solid rgba(59,130,246,0.35);
  background:rgba(59,130,246,0.06);
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.anchoredNoteText{
  line-height:1.5;
}
.dangerText{ color:#b42318; }
.inlineNoteCallout{
  position:relative;
  display:grid;
  gap:6px;
  width:min(420px, calc(100% - 40px));
  margin:2px 0 10px clamp(24px, 8vw, 92px);
  padding-left:12px;
}
.inlineNoteCallout::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:2px;
  border-radius:2px;
  background:rgba(59,130,246,0.32);
}
.inlineNoteItem{
  display:grid;
  grid-template-columns:24px minmax(0, 1fr);
  align-items:start;
  gap:9px;
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(59,130,246,0.22);
  border-radius:11px;
  background:rgba(239,246,255,0.88);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(37,99,235,0.08);
  transition:transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.inlineNoteItem:hover,
.inlineNoteItem:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,0.48);
  box-shadow:0 8px 20px rgba(37,99,235,0.14);
  outline:none;
}
.inlineNoteBadge{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font:900 11px/1 var(--font);
}
.inlineNoteBody{
  display:grid;
  gap:2px;
  min-width:0;
  font:600 12px/1.4 var(--font);
}
.inlineNoteBody strong{
  color:#1d4ed8;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.inlineNoteBody > span{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  white-space:normal;
}
.inlineNoteItem.isUnresolved{
  border-color:rgba(245,158,11,0.55);
  background:#fef3c7;
  color:#92400e;
}
.anchoredNoteModalCard{
  width:min(620px, 100%);
}
.anchoredNoteQuote{
  max-height:120px;
  overflow:auto;
  padding:10px 12px;
  border-left:3px solid rgba(59,130,246,0.45);
  border-radius:8px;
  background:rgba(59,130,246,0.07);
  white-space:pre-wrap;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.favoriteTitleBtn .actionIcon{ color:#e11d48; }
.favoriteTitleBtn .favoriteText{ display:none; }
.favoriteTitleBtn{
  width:40px;
  height:40px;
  justify-content:center;
  padding:8px;
}
.songPaper{
  padding: 10px 16px 18px 16px;
}
.songBottomNav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding: 10px 16px 18px 16px;
}
.songContent{
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(16,24,40,0.10);
  padding: 18px 16px;

  /* ✅ viktigaste för UG-alignment */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  tab-size: 4;
  overflow-x: visible;
}
.strummingGuide{width:min(100%,720px);margin:0 0 14px;padding:11px 12px;border:1px solid rgba(59,130,246,.22);border-radius:13px;background:rgba(59,130,246,.07);font-family:var(--font)}
.strummingGuideHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.strummingGuideHead strong{font-size:13px}.strummingGuideHead span{color:var(--muted);font-size:10px;font-weight:800}.strummingGuideActions{display:flex;align-items:center;gap:9px}.strummingGuideActions .rhythmListenBtn{padding:6px 9px;font-size:10px}
.strummingPattern{display:flex;align-items:end;gap:4px;overflow-x:auto;padding:2px 0 3px}
.strummingBeat{display:grid;flex:0 0 34px;min-height:49px;place-items:center;padding:4px 2px;border-radius:8px;background:var(--card)}.strummingBeat b{font-size:20px;line-height:1}.strummingBeat small{color:var(--muted);font-size:9px;font-weight:900}.strummingBeat.is-rest b{color:#9aa8b7}.strummingBeat.is-muted b{color:#b45309}.strummingBeat.is-accent{box-shadow:inset 0 -3px #2474ea}.strummingBar{padding:0 2px 11px;color:var(--muted);font-size:24px}
@media(max-width:620px){.strummingGuide{width:100%}.strummingGuideHead{align-items:flex-start}.strummingGuideActions{align-items:flex-end;flex-direction:column;gap:4px}}
.strummingEmpty{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-family:var(--font);text-align:center}
.rhythmEditor{padding:14px;border:1px solid #dce8f5;border-radius:14px;background:#f7fbff}.rhythmEditor input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.rhythmSubdivisionField{max-width:430px}
.rhythmPresetControls{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(240px,1.4fr);gap:10px}.rhythmPresetControls select{width:100%}.rhythmPresetPreview{display:grid;grid-template-columns:minmax(140px,1fr) 2fr auto;align-items:center;gap:12px;margin:10px 0;padding:12px 14px;border:1px solid #cfe0f5;border-radius:12px;background:#fff}.rhythmPresetPreview span{color:#1765d1;font:900 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.rhythmPresetPreview small{color:var(--muted);font-weight:800}.rhythmSectionAssignments{display:grid;gap:7px;margin-top:12px;padding-top:12px;border-top:1px solid #dce8f5}.rhythmSectionRow{display:grid;grid-template-columns:minmax(110px,.6fr) minmax(220px,1.4fr);align-items:center;gap:10px}.rhythmSectionRow>span{font-size:12px;font-weight:900}.rhythmSectionRow select{width:100%}.rhythmCustomDetails{margin-top:13px}.rhythmCustomDetails summary{cursor:pointer;color:#315a86;font-size:12px;font-weight:900}.rhythmCustomDetails[open] summary{margin-bottom:10px}
@media(max-width:620px){.rhythmPresetControls,.rhythmSectionRow,.rhythmPresetPreview{grid-template-columns:1fr}.rhythmPresetPreview{gap:8px}.rhythmPresetPreview span{font-size:19px}}
.rhythmSectionPickerBtn{min-height:42px;padding:9px 12px;border:1px solid #cbdbea;border-radius:11px;background:#fff;color:#315a86;font:800 12px/1.4 var(--font);text-align:left;cursor:pointer}.rhythmSectionPickerBtn:hover{border-color:#76aafb;background:#f1f7ff}
.rhythmPickerDialog{align-items:center}.rhythmPickerCard{display:flex;width:min(900px,100%);max-height:min(88vh,820px);flex-direction:column;padding:20px;border:1px solid rgba(255,255,255,.8);border-radius:22px;background:#f8fbff;box-shadow:0 30px 90px rgba(16,35,60,.3)}.rhythmPickerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.rhythmPickerHead h2{margin:0 0 4px}.rhythmPickerHead p{margin:0;color:var(--muted);font-size:12px}.rhythmPickerFilters{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:15px 0}.rhythmPickerList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;overflow:auto;padding:2px}.rhythmPickerItem{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid #dce6f1;border-radius:14px;background:#fff}.rhythmPickerItem.isSelected{border-color:#69a2ee;box-shadow:inset 3px 0 #2474ea}.rhythmPickerItem>div:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}.rhythmPickerItem small{color:var(--muted);font-size:10px;font-weight:800}.rhythmPickerArrows{overflow:hidden;color:#1765d1;font:900 18px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;text-overflow:ellipsis}.rhythmPickerActions{display:flex;flex-direction:column;gap:6px}.rhythmListenBtn.isPlaying{border-color:#e59b35;background:#fff7e8;color:#9a5700}
@media(max-width:620px){.rhythmPickerDialog{align-items:end;padding:8px}.rhythmPickerCard{max-height:92vh;padding:14px;border-radius:20px 20px 12px 12px}.rhythmPickerFilters,.rhythmPickerList{grid-template-columns:1fr}.rhythmPickerItem{grid-template-columns:1fr}.rhythmPickerActions{flex-direction:row}.rhythmPickerActions>*{flex:1}}

.line{
  font-size: 16px;
  line-height: 1.55;
  padding: 4px 0;
  white-space: pre-wrap;
}
.chordLyricPair{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap: 0;
  white-space: normal;
}
.chordLyricChunk{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  white-space: pre;
  min-width: 0;
}
.chordSlot{
  min-height: 1.35em;
  line-height: 1.2;
}
.lyricSlot{
  line-height: 1.35;
}
.chord{
  display:inline-block;
  font-weight: 900;
  color: var(--brand);
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.18);
  padding: 0px 6px;
  border-radius: 10px;
  transform: translateY(-1px);
  margin-right: 2px;
}
.sectionLabel{
  display:inline-block;
  font-weight: 900;
  color: var(--brand);
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.22);
  padding: 2px 10px;
  border-radius: 12px;
}
.chordTooltip{
  position:absolute;
  z-index:100;
  width: 132px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 50px rgba(16,24,40,0.18);
  text-align:center;
  pointer-events:none;
}
.chordTooltipTitle{
  font-weight: 1000;
  margin-bottom: 4px;
}
.chordTooltipMeta{
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: capitalize;
}
.chordTooltip .chordSvg{
  width: 100px;
}

/* Buttons */
.primaryBtn{
  border: 1px solid rgba(59,130,246,0.30);
  background: rgba(59,130,246,0.14);
  color: var(--text);
  font-weight: 900;
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 140ms ease, background 160ms ease, box-shadow 160ms ease;
}
.primaryBtn:hover{
  background: rgba(59,130,246,0.20);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(59,130,246,0.18);
}
.primaryBtn.small{ padding: 8px 12px; }

.ghostBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.65);
  color: var(--text);
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform 140ms ease, background 160ms ease;
}
.ghostBtn:hover{
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}
.ghostBtn.small{ padding: 8px 12px; }

.dangerBtn{
  border:1px solid rgba(239,68,68,0.30);
  background: rgba(239,68,68,0.10);
  color: var(--danger);
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.dangerBtn:hover{ background: rgba(239,68,68,0.14); }

.iconBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.65);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor:pointer;
  transition: transform 140ms ease, background 160ms ease;
}
.iconBtn.big{
  width: 44px; height: 44px;
  font-size: 18px;
}
.iconBtn:hover{ background: rgba(255,255,255,0.9); }

.miniBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.65);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  transition: transform 140ms ease, background 160ms ease;
}
.miniBtn:hover{
  background: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

.chipBtn{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  transition: transform 140ms ease, background 160ms ease;
}
.chipBtn:hover{
  background: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}
.subtleChip{
  color: var(--muted);
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display:grid;
  place-items:center;
  background: rgba(16,24,40,0.35);
  padding: 18px;
  /* Modals must cover the fixed performance bar (z-index: 80) and menus. */
  z-index:var(--z-modal);
  animation: fadeIn 180ms ease;
}
.modalCard{
  width: min(760px, 100%);
  max-height: calc(100dvh - 36px);
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(16,24,40,0.24);
  overflow:hidden;
  animation: riseIn 200ms ease;
}
#songModal .modalCard{
  display:flex;
  flex-direction:column;
}
.modalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex:0 0 auto;
}
.modalTitle{ font-weight: 1000; }
.modalFoot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex:0 0 auto;
}
.modalFoot.center{
  justify-content:center;
}
#songModal .modalFoot{
  background: rgba(255,255,255,0.96);
  box-shadow: 0 -10px 24px rgba(16,24,40,0.06);
}
.songModalFoot{
  align-items:center;
  padding:14px 16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.saveSongBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:150px;
  color:#fff;
  border-color:#2563eb;
  background:linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow:0 10px 24px rgba(37,99,235,0.24);
}
.saveSongBtn .saveSongBtnText{
  color:#fff;
  font-size:14px;
  font-weight:900;
}
.saveSongBtn:hover{
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow:0 12px 28px rgba(37,99,235,0.32);
}
.saveSongBtn:disabled{
  cursor:wait;
  opacity:.7;
  transform:none;
}
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px 14px 16px;
}
#songModal .formGrid{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > span{ color: var(--muted); font-size: 12px; font-weight: 900; }
.field input, .field textarea{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.85);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
}
.audioActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.audioStatus{
  font-size: 12px;
  color: var(--muted);
}
.toggleRow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
#trackPlayer{
  width: 260px;
  max-width: 100%;
  height: 36px;
}
.noTrackText{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.field textarea{ resize: vertical; min-height: 200px; }
#bodyInput{
  width:100%;
  max-width:100%;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:16px;
  line-height:1.55;
  tab-size:4;
  white-space:pre;
  overflow:auto;
  letter-spacing:0;
}
.formatToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 4px;
}
.formatToolbar .miniBtn{
  border-radius: 10px;
}
.helpTooltip{position:relative}
.helpTooltip::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:calc(var(--z-modal) + 1);
  width:max-content;
  max-width:min(280px, calc(100vw - 32px));
  padding:9px 11px;
  border-radius:9px;
  background:#172033;
  color:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.25);
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  text-align:left;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, 4px);
  transition:opacity 140ms ease, transform 140ms ease;
}
.helpTooltip:hover::after,.helpTooltip:focus-visible::after{opacity:1;transform:translate(-50%, 0)}
.formatToolbar .helpTooltip:first-child::after{
  left:0;
  transform:translate(0, 4px);
}
.formatToolbar .helpTooltip:first-child:hover::after,
.formatToolbar .helpTooltip:first-child:focus-visible::after{transform:translate(0, 0)}
.formatToolbar .helpTooltip:last-child::after{
  right:0;
  left:auto;
  transform:translate(0, 4px);
}
.formatToolbar .helpTooltip:last-child:hover::after,
.formatToolbar .helpTooltip:last-child:focus-visible::after{transform:translate(0, 0)}
@media(max-width:720px){
  .formatToolbar .helpTooltip::after,
  .formatToolbar .helpTooltip:last-child::after{
    right:auto;
    left:0;
    transform:translate(0, 4px);
  }
  .formatToolbar .helpTooltip:hover::after,
  .formatToolbar .helpTooltip:focus-visible::after,
  .formatToolbar .helpTooltip:last-child:hover::after,
  .formatToolbar .helpTooltip:last-child:focus-visible::after{transform:translate(0, 0)}
}
.field input:focus, .field textarea:focus{
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}
.fieldFull{ grid-column: 1 / -1; }
.fieldHint{ color: var(--muted); font-size: 12px; margin-top:6px; }

.pickList{
  padding: 12px 16px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.pickRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.7);
}
.pickRow strong{ font-size:14px; }
.pickRow span{ color: var(--muted); font-size:12px; }

.isHidden{ display:none !important; }


@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes riseIn{
  from{ transform: translateY(8px); opacity: 0.6; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Auth */
.authBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
}
body.isAuthed .authBar{
  display:none;
}
.authStatus{
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
.authActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.authForm{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
}
.authForm input{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  min-width: 160px;
  outline: none;
}
.authForm input:focus{
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

.authGate{
  display:none;
  min-height: calc(100vh - 64px);
  padding: 40px 20px;
  gap:0;
  align-items:center;
  justify-content:center;
  grid-template-columns:minmax(0, 1240px);
  background:
    radial-gradient(900px 460px at 15% 10%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(34,197,94,0.12), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,0.65), rgba(240,248,255,0.9));
}
.authHero{
  width:100%;
  max-width:1240px;
  text-align:left;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(360px, 5fr);
  grid-template-rows:auto 1fr;
  column-gap:20px;
  align-items:start;
  padding-bottom:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.72);
  border-radius:28px;
  background:linear-gradient(145deg, #0d3158 0%, #126a82 54%, #27a99c 100%);
  box-shadow:0 30px 90px rgba(16,55,83,.24);
  color:#fff;
}
.authHero::after{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  border-radius:50%;
  right:-130px;
  top:-170px;
  background:rgba(112,239,215,.18);
  pointer-events:none;
}
.authHeroCopy{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  grid-row:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:auto auto auto auto auto;
  column-gap:42px;
  padding:42px 44px 30px;
}
.authHeroEyebrow{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  display:inline-flex;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.authHero h1{
  grid-column:1;
  grid-row:2;
  max-width:780px;
  margin:18px 0 0;
  font-size:clamp(36px, 4vw, 60px);
  line-height:.98;
  letter-spacing:-.045em;
}
.authHero p{
  grid-column:1;
  grid-row:3;
  max-width:720px;
  color:rgba(255,255,255,.86);
  font-size:clamp(16px, 1.5vw, 20px);
  line-height:1.55;
  margin:18px 0 0;
}
.authHeroBenefits{ grid-column:1; grid-row:5; display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.authHeroBenefits span{
  padding:8px 11px;
  border-radius:10px;
  background:rgba(2,18,38,.25);
  font-size:12px;
  font-weight:800;
}
.authHeroImage{
  position:relative;
  z-index:1;
  grid-column:1;
  grid-row:2;
  width:calc(100% - 28px);
  height:100%;
  min-height:480px;
  object-fit:cover;
  object-position:center top;
  display:block;
  margin:0 0 0 28px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.authGateCard{
  position:relative;
  z-index:2;
  grid-column:2;
  grid-row:2;
  align-self:stretch;
  width:calc(100% - 28px);
  max-width:none;
  margin:0 28px 0 0;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.78);
  border-radius: 22px;
  box-shadow:0 24px 70px rgba(2,18,38,.28);
  padding:26px;
  text-align:left;
  color:#182230;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.authGateTitle{
  font-weight: 900;
  font-size: 22px;
  color:#182230;
}
.authGateText{
  color: var(--muted);
  margin-top: 6px;
  font-size: 13px;
}
.authGateStatus{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.authSocial{
  display:grid;
  gap:10px;
  margin-top:16px;
}
.socialAuthBtn{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:#182230;
  padding:10px 14px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.socialAuthBtn:hover{
  border-color:rgba(59,130,246,.45);
  box-shadow:0 8px 22px rgba(16,24,40,.10);
  transform:translateY(-1px);
}
.socialAuthBtn:focus-visible{
  outline:3px solid rgba(59,130,246,.22);
  outline-offset:2px;
}
.socialAuthBtn:disabled{ opacity:.62; cursor:wait; transform:none; }
.socialAuthBtnFacebook{ background:#1877f2; border-color:#1877f2; color:#fff; }
.socialAuthIcon{ width:21px; height:21px; flex:0 0 21px; }
.authDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:15px 0 0;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.authDivider::before,.authDivider::after{ content:""; height:1px; flex:1; background:var(--line); }
.authFormCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 14px;
  align-items:flex-start;
}
.authField{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.authField span{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}
.authFormCard input{
  border-radius: 14px;
  min-width: 100%;
  padding: 12px 14px;
}
.authFormCard .primaryBtn,
.authFormCard .ghostBtn{
  width: 100%;
}
.authEmailLinkBtn{border:0;background:transparent;color:#145ab8;padding:7px 10px;font:800 12px var(--font);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.authEmailLinkBtn:hover{color:#0d4b9e}.authEmailLinkBtn:disabled{cursor:wait;opacity:.55}
.createAccountCard{
  width:min(520px, 100%);
}
.createAccountStatus{
  min-height:20px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.createAccountStatus[data-tone="error"]{ color:#b42318; }
.createAccountStatus[data-tone="success"]{ color:#15803d; }

body:not(.isAuthed) .tabs,
body:not(.isAuthed) .shell{
  display:none;
}
body:not(.isAuthed) .authGate{
  display:grid;
}
body:not(.isAuthed) .authBar{
  display:none;
}
body:not(.isAuthed) .topbar{
  display:none;
}
body:not(.isAuthed) .brand,
body:not(.isAuthed) .searchWrap,
body:not(.isAuthed) .authMini{
  display:none;
}
body.isAuthed .authBar{
  display:none;
}

body.isShared .authGate,
body.isShared .authBar,
body.isShared .publicContent,
body.isShared .siteHeader,
body.isShared .pageFooter,
body.isShared .tabs,
body.isShared .authMini,
body.isShared .searchWrap,
body.isShared .editWrap,
body.isShared .exportWrap,
body.isShared #toggleFavBtn,
body.isShared #collapseAppBtn,
body.isShared #backBtn,
body.isShared .backingTrackGroup,
body.isShared:not(.hasSharedQueue) #prevSongBtn,
body.isShared:not(.hasSharedQueue) #nextSongBtn,
body.isShared:not(.hasSharedQueue) #prevSongBtnBottom,
body.isShared:not(.hasSharedQueue) #nextSongBtnBottom,
body.isShared #autoplayNextToggle,
body.isShared .toggleRow{
  display:none !important;
}
.saveSharedSongBtn{
  white-space:nowrap;
}
body.isShared.isSongView .saveSharedSongBtn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
@media (max-width:720px){
  body.isShared.isSongView .saveSharedSongBtn{
    order:2;
    width:100%;
    min-height:48px;
  }
}
body.isShared .shell{
  display:grid !important;
}
body.isShared .topbar{
  display:flex !important;
  justify-content:center;
}
body.isShared .brand{
  display:flex !important;
}
body.isShared .shell{
  grid-template-columns: 1fr;
}
body.isShared #playlistSide,
body.isShared #chordsPanel{
  display:none !important;
}
body.isShared .songTop{
  justify-content:center;
}
body.isShared .songTopRight{
  min-height: 0;
}
body.isShared .controls{
  justify-content:center;
}

/* Public content */
.publicContent{
  display:none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 48px 20px;
}
body:not(.isAuthed) .publicContent{
  display:block;
}
.contentPage{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 48px 20px;
}
.contentPage h1{
  font-size: 28px;
  margin: 0 0 10px 0;
}
.contentPage h2{
  margin-top: 22px;
}
.contentPage h3{
  margin-top: 16px;
}
.contentPage p{
  line-height: 1.6;
}
.contentPage .lead{
  color: var(--muted);
  font-size: 15px;
}
.contentHero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items:start;
}
.contentCard{
  background: rgba(255,255,255,0.85);
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(16,24,40,0.08);
}
.contentSection{
  margin-top: 26px;
}
.contentGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 22px;
}
.contentGrid article{
  display:grid;
  grid-template-rows:minmax(2.6em, auto) 1fr;
  align-content:start;
  background: rgba(255,255,255,0.7);
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.contentGrid article h2{
  margin:0 0 18px;
  font-size:clamp(22px, 1.65vw, 30px);
  line-height:1.15;
  letter-spacing:-.025em;
}
.contentGrid article p{
  margin:0;
  font-size:17px;
  line-height:1.5;
}
.contentSteps{
  padding-left: 18px;
  line-height: 1.6;
}
.contentNote{
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

/* Collapsed app (between header and song title) */
body.isSongView.appCollapsed .tabs,
body.isSongView.appCollapsed .authBar,
body.isSongView.appCollapsed #playlistSide,
body.isSongView.appCollapsed #libraryPanel{
  display:none !important;
}
body.isSongView .collapseBtnSong{
  display:inline-flex;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  border-color: rgba(18,31,59,0.12);
  box-shadow: 0 9px 22px rgba(16,24,40,0.06);
  order:100;
  margin-left:auto;
}
body.isSongView.appCollapsed .songTopRight > *{
  display:none;
}
body.isSongView.appCollapsed .songTopRight{
  justify-content:flex-end;
}
body.isSongView.appCollapsed .songTopRight .collapseBtnSong{
  display:inline-flex;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .controls{
  display:block;
  position:absolute;
  top: 22px;
  left: 50%;
  transform:translateX(-50%);
  width:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background: transparent;
  box-shadow:none;
  overflow:visible;
  z-index: 3;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .ctrlGroup{
  display:none;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup{
  display:block;
  padding:0;
  border:0;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlLabel,
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlHeader,
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .range,
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlValue{
  display:none;
}
body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlRow{
  display:block;
}
body.isSongView.appCollapsed #scrollToggleBtn{
  min-width:220px;
  min-height:64px;
  padding:16px 28px;
  font-size:17px;
  box-shadow:0 18px 38px rgba(37,99,235,0.38);
}


/* Chords */
.chordsPanel{
  padding-bottom: 12px;
}
.chordsControls{
  display:flex;
  gap:10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items:center;
}
.chordSearchInput{
  min-width: 220px;
  flex: 1 1 220px;
}
.chordsControls .chipBtn.isActive{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.12);
  color: var(--text);
}
.chordsControls .chipBtn.isActive{
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.30);
}
.chordsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  padding: 14px 16px 18px 16px;
}
.chordCard{
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  text-align:center;
  box-shadow: 0 10px 26px rgba(16,24,40,0.06);
}
.chordCard h4{
  margin: 8px 0 0;
  font-size: 14px;
}
.chordSvg{
  width: 100%;
  height: auto;
}
.pianoChordSvg{
  min-height:92px;
}

/* Secure admin overview */
.adminPanel{
  grid-column:1 / -1;
  padding:20px;
}
.adminHead,
.adminCardHead,
.adminUsersHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.adminHead h2,
.adminCard h3{
  margin:0;
}
.adminHead p{
  max-width:720px;
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.5;
}
.adminEyebrow{
  margin-bottom:4px;
  color:var(--brand);
  font-size:11px;
  font-weight:1000;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.adminPeriod{
  display:flex;
  gap:8px;
  margin:20px 0 12px;
}
.adminStatus{
  min-height:22px;
  color:var(--muted);
  font-size:13px;
}
.adminStatus.isError{ color:#b42318; }
.adminStats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:12px 0;
}
.adminStatCard,
.adminCard{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,0.88);
  box-shadow:0 12px 30px rgba(16,24,40,0.06);
}
.adminStatCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
}
.adminStatCard span,
.adminCardHead span{
  color:var(--muted);
  font-size:12px;
}
.adminStatCard strong{
  font-size:clamp(24px, 3vw, 34px);
}
.adminGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.adminCard{
  margin-top:12px;
  padding:16px;
}
.adminRankList,
.adminAuditList{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}
.adminRankRow,
.adminAuditRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(246,247,251,0.9);
  font-size:13px;
}
.adminRankRow strong{ font-size:15px; }
.adminUsersHead .searchInput{
  width:min(360px, 100%);
}
.adminTableWrap{
  width:100%;
  margin-top:14px;
  overflow-x:auto;
}
.adminTable{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
}
.adminTable th,
.adminTable td{
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:13px;
}
.adminTable th{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.adminMembershipSelect{
  min-width:100px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-weight:800;
}
.adminMembershipSelect:disabled{ opacity:0.6; }
.adminUserIdentity{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.adminUserIdentity small{
  color:var(--muted);
  font-family:ui-monospace, monospace;
}
.adminPresence{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:850;white-space:nowrap}.adminPresence i{width:8px;height:8px;border-radius:50%}.adminPresence.isOnline{background:#eafaf1;color:#147a45}.adminPresence.isOnline i{background:#20a663;box-shadow:0 0 0 3px rgba(32,166,99,.14)}.adminPresence.isOffline{background:#f1f4f8;color:#667085}.adminPresence.isOffline i{background:#98a2b3}
.adminEmpty{
  padding:18px 12px;
  color:var(--muted);
  text-align:center;
}
.adminAuditRow{
  align-items:flex-start;
}
.adminAuditRow time{
  flex:0 0 auto;
  color:var(--muted);
  font-size:12px;
}
body.isAdminView .menuSearchActions{
  visibility:hidden;
}
.membershipBadge{
  padding:5px 9px;
  border:1px solid rgba(59,130,246,0.22);
  border-radius:999px;
  background:rgba(239,246,255,0.92);
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}

/* Export menu */
.exportWrap{ position: relative; }
.exportMenu{
  position: absolute;
  right: 0;
  top: 44px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 8px;
  background: rgba(255,255,255,0.98);
  border:1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16,24,40,0.14);
  z-index: 20;
}
.exportMenu .ghostBtn{ width: 120px; }
.editWrap{ position: relative; }

.shareDialog{
  position: fixed;
  inset: 0;
  z-index: 90;
  display:grid;
  place-items:center;
  padding: 18px;
  background: rgba(16,24,40,0.42);
}
.shareDialogCard{
  width: min(620px, 100%);
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(16,24,40,0.24);
  padding: 16px;
}
.shareDialogHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 14px;
}
.shareDialogTitle{
  font-size: 18px;
  font-weight: 1000;
}
.shareDialogText,
.shareDialogHint{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.shareDialogHint{
  margin-top: 12px;
}
.shareUrlRow{
  display:flex;
  gap:8px;
}
.shareUrlInput{
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.88);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
}
.shareChoices{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 12px;
}
.shareChoices a{
  text-decoration:none;
  color: var(--text);
}
.shareDialog .miniBtn{
  border-radius: 10px;
}

/* Footer */
.pageFooter{
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 40px 16px 60px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.pageFooter::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(246,247,251,1) 0%,
      rgba(246,247,251,1) 28%,
      rgba(246,247,251,0.65) 62%,
      rgba(246,247,251,0) 100%
    ),
    url("images/footer.webp") center/cover no-repeat;
  transform: translateZ(0);
  will-change: transform;
  z-index: 0;
}
.footerInner{
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 16px;
  padding: 22px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  backface-visibility: hidden;
}
.footerLinks{
  display:flex;
  gap:12px;
  align-items:center;
}
.footerLink{
  border:0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor:pointer;
}
.footerLink:hover{
  color: var(--text);
}
.footerContact{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.footerContact a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.footerContact a:hover{
  border-bottom-color: rgba(0,0,0,0.25);
}

.legalBody{
  padding: 12px 16px 4px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* Bottom nav (mobile) */

@media (max-width: 720px){
  .shell{ grid-template-columns: 1fr; padding: 0 12px 80px 12px; }
  .topbar-actions{ min-width: 0; width:100%; }
  .side{ order: 2; }
  .tabs{ display:flex; flex-wrap: wrap; gap: 8px; }
  .menuSearchActions{
    order:2;
    flex:1 1 100%;
    width:100%;
    margin-left:0;
  }
  .tabs .searchWrap{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
  }
  .mobilePlaylistTab{
    display:inline-flex;
  }
  .tabs .tab{ padding: 8px 10px; font-size: 12px; }
  .tabs .primaryBtn{
    margin-left: 0;
  }
  .tabs #openAddBtn{ flex:0 0 auto; }
  .panel{
    border-radius: 14px;
    margin-top: 10px;
  }
  body.isPlaylistsTab #playlistSide{
    display:block;
    order: 0;
  }
  body.isPlaylistsTab #libraryPanel{
    display:none !important;
  }
  body.isPlaylistsTab .sideCard{
    margin-top: 10px;
  }
  .sideCard{
    padding: 12px;
  }
  .playlistItem{
    flex-direction: column;
    align-items:flex-start;
    gap: 10px;
  }
  .playlistItem .row2{
    width: 100%;
    justify-content:flex-start;
    flex-wrap: wrap;
  }
  .songRow{
    padding: 12px;
  }
  .songList{ padding: 0; }
  .panelHeader{ padding: 12px 14px; }
  .adminPanel{ padding:14px; }
  .adminHead,
  .adminUsersHead{
    align-items:stretch;
    flex-direction:column;
  }
  .adminHead .ghostBtn{ width:100%; }
  .adminStats{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .adminGrid{
    grid-template-columns:1fr;
  }
  .adminUsersHead .searchInput{ width:100%; }
  .topbar{
    min-height: 140px;
    padding: 18px 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .brand{ width: 100%; justify-content:flex-start; }
  .brandLogoChip{ width:min(330px, 72vw); height:82px; }
  .topbar-actions{
    width: 100%;
    justify-content:space-between;
  }
  .songRow{
    box-shadow: none;
  }
  .songView{
    border-radius: 18px;
    padding: 16px 14px;
  }
  .songTop{
    position:relative;
    padding: 4px 0 18px 0;
  }
  .songTopRight{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding-bottom: 0;
  }
  .songTopRight .ghostBtn,
  .songTopRight .dangerBtn,
  .songTopRight .iconBtn,
  .songTopRight .collapseBtnSong{
    width: 100%;
    min-height: 48px;
    padding: 5px 6px;
    flex: none;
  }
  .songTopRight .editWrap,
  .songTopRight .exportWrap{
    min-width:0;
  }
  .actionBtn{
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    line-height: 1.1;
  }
  .actionIcon{
    font-size: 17px;
    width: 18px;
    min-width: 18px;
  }
  body.isSongView .collapseBtnSong{
    position:static;
    z-index:12;
    width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    border-radius:999px;
  }
  body.isSongView .collapseBtnSong .collapseText{ display:none; }
  body.isSongView #prevSongBtn{
    grid-column: 1;
    min-height:58px;
    border-color:rgba(59,130,246,0.35);
    background:linear-gradient(180deg, #fff, #eff6ff);
    color:#1d4ed8;
    font-size:14px;
    box-shadow:0 12px 26px rgba(37,99,235,0.14);
  }
  body.isSongView #nextSongBtn{
    grid-column: 2;
    min-height:58px;
    border-color:rgba(59,130,246,0.35);
    background:linear-gradient(180deg, #fff, #eff6ff);
    color:#1d4ed8;
    font-size:14px;
    box-shadow:0 12px 26px rgba(37,99,235,0.14);
  }
  body.isSongView #prevSongBtn .actionIcon,
  body.isSongView #nextSongBtn .actionIcon{
    color:#2563eb;
    font-size:23px;
  }
  body.isSongView #backBtn{ display:inline-flex; }
  .mobileMoreWrap{
    display:block;
    position:relative;
    z-index:13;
  }
  .mobileMoreMenu{
    display:none;
    width:min(290px, calc(100vw - 20px));
  }
  .mobileMoreMenu.isOpen{
    display:grid;
  }
  #songModal{
    place-items:stretch;
    padding:8px;
  }
  #songModal .modalCard{
    width:100%;
    height:calc(100vh - 16px);
    height:calc(100dvh - 16px);
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    margin:auto;
  }
  #songModal .formGrid{
    grid-template-columns:minmax(0, 1fr);
    padding-left:12px;
    padding-right:12px;
  }
  #songModal .fieldFull{
    grid-column:1;
  }
  #songModal .modalFoot{
    position:relative;
    z-index:2;
    flex:none;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  #songModal .saveSongBtn{
    flex:1;
    min-height:48px;
    padding:10px 14px;
  }
  #songModal .songModalFoot .ghostBtn{
    min-height:48px;
  }
  #bodyInput{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    overflow-x:hidden;
  }
  .controls{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-radius: 16px;
    overflow:hidden;
  }
  .ctrlGroup{
    min-height:126px;
    padding:14px 8px 12px;
    border-top:0 !important;
    border-right:1px solid var(--line);
    justify-content:flex-start;
    gap:10px;
  }
  .keyGroup{ order: 1; }
  .textSizeGroup{ order: 2; }
  .scrollGroup{ order: 3; }
  .metronomeGroup{ order: 4; }
  .backingTrackGroup{ order: 5; }
  .metronomeGroup{
    border-right: 0;
  }
  .backingTrackGroup{
    min-height:0;
    border-right:0;
    border-top:1px solid var(--line) !important;
  }
  .ctrlHeader{
    min-height:70px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
  }
  .ctrlLabel{
    gap:4px;
    font-size:clamp(8px, 2.15vw, 11px);
    line-height:1.1;
    white-space:nowrap;
  }
  .ctrlLabel > span{
    font-size:13px;
  }
  .ctrlValueInputWrap{
    align-self:stretch;
    justify-content:center;
    gap:3px;
    min-height:38px;
    padding:6px;
    font-size:11px;
    box-shadow:none;
  }
  .ctrlValueInput{
    width:2.6em;
    text-align:center;
  }
  .keyGroup .ctrlRow{
    justify-content:center;
    gap:5px;
  }
  .keyGroup .chipBtn{
    width:30px;
    min-width:30px;
    min-height:34px;
    padding:4px;
    border-radius:999px;
  }
  .keyGroup .ctrlValue{
    min-width:32px;
    padding:9px 5px;
    border-radius:11px;
    text-align:center;
    box-shadow:none;
  }
  .controlResetBtn,
  .textSizeGroup .ctrlRow{
    display:none;
  }
  .metronomeControls{
    justify-content:center;
    margin-top:-2px;
  }
  .metronomeGroup .roundPlayBtn{
    width:38px;
    height:38px;
  }
  .performanceActions{
    grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr);
    gap:10px;
    margin-top:12px;
  }
  .performanceModeBtn,
  .performanceStartBtn{
    min-height:58px;
  }
  body.isSongView.appCollapsed .collapseBtnSong{
    display:inline-flex;
  }
  body.isSongView.appCollapsed .songTop{
    padding-top:4px;
    padding-bottom:22px;
  }
  body.isSongView.appCollapsed .songTopRight{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 44px;
  }
  body.isSongView.appCollapsed .songTopRight > *{
    display:none;
  }
  body.isSongView.appCollapsed #prevSongBtn,
  body.isSongView.appCollapsed #nextSongBtn{
    display:inline-flex;
    order:1;
    grid-row:1;
  }
  body.isSongView.appCollapsed .collapseBtnSong{
    display:inline-flex;
    position:static;
    order:1;
    grid-column:3;
    grid-row:1;
    justify-self:end;
    margin-top:0;
  }
  body.isSongView.appCollapsed:not(.isBandLivePerformance) .controls{
    display:block;
    position:static;
    transform:none;
    width:100%;
    margin:0 0 22px 0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup{
    display:block;
    padding:16px;
    border:1px solid rgba(37,99,235,0.18);
    border-radius:16px;
    background:rgba(239,246,255,0.72);
  }
  body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlHeader,
  body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .range{
    display:none;
  }
  body.isSongView.appCollapsed:not(.isBandLivePerformance) .scrollGroup .ctrlRow{
    display:block;
  }
  body.isSongView.appCollapsed #scrollToggleBtn{
    display:flex;
    width:min(280px, 100%);
    margin:0 auto;
  }
  .playBtn{
    min-height: 52px;
    padding: 12px 16px;
    border-color:#2563eb;
    border-radius:14px;
    background:linear-gradient(180deg, #3b82f6, #2563eb);
    color:#fff;
    font-size:15px;
    box-shadow:0 13px 28px rgba(37,99,235,0.30);
  }
  .playBtn .playIcon{
    background:rgba(255,255,255,0.20);
    color:#fff;
    box-shadow:none;
  }
  .scrollGroup .ctrlHeader{ gap:4px; }
  .scrollGroup .ctrlValueInputWrap{
    gap:2px;
    padding:6px;
    font-size:11px;
  }
  .scrollGroup .ctrlValueInput{ width:3em; }
  .songTitleInline{
    justify-content:center;
    text-align:left;
    padding-top:18px;
    padding-bottom:12px;
  }
  .favoriteTitleBtn{
    flex:0 0 auto;
    padding:8px;
  }
  .favoriteTitleBtn .favoriteText{ display:none; }
  .songBottomNav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:12px;
    padding:22px 0 18px;
  }
  #prevSongBtnBottom,
  #nextSongBtnBottom{
    min-height:58px;
    padding:10px 12px;
    border-color:rgba(59,130,246,0.35);
    border-radius:12px;
    background:linear-gradient(180deg, #fff, #eff6ff);
    color:#1d4ed8;
    font-size:14px;
    font-weight:900;
    box-shadow:0 12px 26px rgba(37,99,235,0.14);
  }
  #scrollToTopBtn{
    min-height:58px;
    padding:10px 14px;
    border-radius:12px;
    font-weight:900;
  }
  .songPaper{ padding: 0; }
  .songContent{
    max-width: 100%;
    border-radius: 12px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .line{
    padding: 6px 0;
    white-space: pre;
    min-width: max-content;
  }
  .line.chordLyricPair{
    min-width: 0;
    white-space: normal;
  }
  .songContent .line{
    font-size: min(var(--lyrics-size), 14px);
    line-height: 1.45;
  }
  .songContent .chord{
    font-size: 0.95em;
  }
  .footerInner{
    flex-direction:column;
    align-items:flex-start;
  }
  .shareUrlRow{
    flex-direction:column;
  }
  .shareUrlRow .primaryBtn{
    width:100%;
  }
}

@media (max-width: 480px){
  .brandLogoChip{ width:min(255px, 68vw); height:68px; }
}

@media (max-width: 480px) and (orientation: portrait){
  .shell{
    padding-left: 4px;
    padding-right: 4px;
  }
  .panel{
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .songTitleInline{
    padding-left: 8px;
    padding-right: 8px;
  }
  .controls{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 14px;
  }
  .ctrlGroup{
    min-width: 0;
    width: 100%;
    border-top: 0;
    padding: 12px 5px 10px;
  }
  .ctrlRow{
    gap: 4px;
  }
  .backingTrackGroup{
    padding:12px;
  }
  .songContent{
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 4px;
    padding-right: 4px;
    overflow-x: hidden;
  }
  .songContent .line{
    font-size: min(var(--fit-lyrics-size, var(--lyrics-size)), 12px);
    line-height: 1.34;
    padding-top: 4px;
    padding-bottom: 4px;
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .songContent .line.chordLyricPair{
    white-space: normal;
    overflow-wrap: normal;
  }
  .songContent .chordLyricChunk{
    max-width: 100%;
  }
  .songContent .chord{
    font-size: 0.9em;
  }
  body.isSongView .collapseBtnSong{
    width: 38px;
    height: 54px;
    min-height: 54px;
  }
}

@media (max-width: 1100px){
  .shell{
    grid-template-columns: 1fr;
  }
  .side{
    position: static;
    top: auto;
  }
  #playlistSide,
  #libraryPanel{
    width: 100%;
    max-width: 100%;
  }
  .sideCard,
  .panel{
    background: rgba(255,255,255,0.98);
  }
  .authGate{
    grid-template-columns: 1fr;
    padding: 28px 16px;
  }
  .authHero{
    text-align:center;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    column-gap:0;
    padding-bottom:0;
  }
  .authHeroImage{
    grid-column:1;
    grid-row:3;
    margin:0 16px 16px;
    width:calc(100% - 32px);
    max-width: 640px;
  }
  .authHeroCopy{ grid-column:1; grid-row:1; display:block; padding:32px 28px 24px; }
  .authGateCard{
    grid-column:1;
    grid-row:2;
    width:calc(100% - 32px);
    max-width:640px;
    margin:0 auto 18px;
    text-align:left;
    display:block;
  }
  .authHeroImage{ height:auto; min-height:0; object-fit:initial; }
  .contentHero{
    grid-template-columns: 1fr;
  }
  .contentGrid{
    grid-template-columns: 1fr;
  }
  .contentGrid article{grid-template-rows:auto auto;padding:18px}
  .contentGrid article h2{margin-bottom:10px}
  .siteMenuBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .siteNav{
    position: relative;
  }
  .siteNavInner{
    display:none;
    position:absolute;
    right:0;
    top: 44px;
    background: rgba(255,255,255,0.98);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    flex-direction:column;
    gap:8px;
    min-width: 200px;
    box-shadow: 0 14px 34px rgba(16,24,40,0.12);
    z-index: 20;
  }
.siteNav.isOpen .siteNavInner{
    display:flex;
  }
  .siteMenuBtn[aria-expanded="true"] span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  .siteMenuBtn[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
  }
  .siteMenuBtn[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }
  .collapseBtn{
    padding: 6px 10px;
  }
}

/* === Fullbredd-läge när man tittar på en låt === */
body.isSongView .shell{
  grid-template-columns: 1fr;
  max-width: 1540px;
  padding-left: 24px;
  padding-right: 24px;
}

body.isSongView .side{
  display: none !important;
}

body.isSongView .songView{
  grid-column: 1 / -1;
}

body.isSongView .topbar-actions{
  min-width: 0;
}

@media (max-width: 720px){
  body.isSongView .shell{
    padding: 0 12px 80px 12px;
  }
}

@media (max-width: 480px) and (orientation: portrait){
  body.isSongView .shell{
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Chords view cleanup */
body.isChords .shell{
  grid-template-columns: 1fr;
}
body.isChords #libraryPanel,
body.isChords #playlistSide{
  display: none !important;
}

/* === Textstorlek (styr via JS) === */
:root{
  --lyrics-size: 16px;
  --chord-size: 0.95em;
}

.songContent .line{
  font-size: var(--lyrics-size);
}

.songContent .chord{
  font-size: var(--chord-size);
}

@media (min-width: 1200px){
  .songContent{
    max-width: 1100px;
  }
}

/* === Mörkt scenläge === */
body.theme-dark{
  --bg: #070A12;
  --paper: #0b1020;
  --text: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.70);
  --line: rgba(255,255,255,0.12);

  --shadow: 0 18px 55px rgba(0,0,0,0.55);
}

body.theme-dark .topbar{
  background: rgba(7,10,18,0.72);
}

body.theme-dark .tab{
  background: rgba(255,255,255,0.06);
}

body.theme-dark .panel,
body.theme-dark .sideCard{
  background: rgba(11,16,32,0.72);
}

body.theme-dark .controls,
body.theme-dark .songPaper,
body.theme-dark .ctrlValueInputWrap,
body.theme-dark .songNotesPanel{
  background: rgba(11,16,32,0.92);
}

body.theme-dark .searchWrap,
body.theme-dark .ghostBtn,
body.theme-dark .iconBtn,
body.theme-dark .miniBtn,
body.theme-dark .chipBtn,
body.theme-dark .ctrlValue{
  background: rgba(255,255,255,0.06);
}

body.theme-dark .songContent{
  background: rgba(11,16,32,0.92);
}

body.theme-dark .stageModeBtn{
  border-color:rgba(96,165,250,0.48);
  background:rgba(59,130,246,0.20);
  color:#fff;
  box-shadow:0 0 0 1px rgba(59,130,246,0.08), 0 10px 28px rgba(0,0,0,0.28);
}
body.theme-dark .notesToggleBtn,
body.theme-dark .notesTab.isActive{
  background:rgba(59,130,246,0.18);
  color:#bfdbfe;
}
body.theme-dark .inlineNoteItem{
  border-color:rgba(96,165,250,0.28);
  background:rgba(59,130,246,0.13);
}
body.theme-dark .inlineNoteBadge{
  background:rgba(59,130,246,0.30);
  color:#dbeafe;
}
body.theme-dark .inlineNoteBody strong{
  color:#93c5fd;
}

body.theme-dark .chord{
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.25);
}

@media (max-width:720px){
  .songTitleInline{
    flex-wrap:wrap;
  }
  .songNotesPanel{
    width:calc(100% - 16px);
    max-height:46dvh;
    margin:6px 8px 12px;
    padding:14px;
    overflow-y:auto;
  }
  .notesPanelHint{
    max-width:250px;
  }
  #songNotesInput{
    min-height:92px;
  }
  .notesFooter{
    align-items:flex-start;
  }
  .anchoredNotesHead{
    align-items:flex-start;
  }
  .inlineNoteCallout{
    width:calc(100% - 12px);
    margin:2px 0 9px 12px;
    padding-left:9px;
  }
  .inlineNoteItem{
    padding:7px 9px;
  }
  .metronomeRow{
    align-items:center;
  }
  .metronomeLabel{
    flex-basis:100%;
  }
}

body.theme-dark .authBar{
  background: rgba(7,10,18,0.72);
}
body.theme-dark .authForm input,
body.theme-dark .authGateCard{
  background: rgba(11,16,32,0.72);
}
body.theme-dark .socialAuthBtn:not(.socialAuthBtnFacebook){
  background:rgba(255,255,255,.08);
  color:#f8fafc;
}
body.theme-dark .authGateCard{ color:#f8fafc; }
body.theme-dark .authGateTitle{ color:#f8fafc; }

/* App-style navigation */
.appToolbar{position:sticky;top:0;z-index:45;padding:10px 18px;background:rgba(248,251,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.appToolbar .menuSearchActions{width:min(680px,100%);margin:0 auto}.appToolbar .searchWrap{width:100%}
.appBottomNav{position:fixed!important;right:50%;bottom:12px;left:auto;top:auto!important;z-index:120;display:grid!important;grid-template-columns:repeat(4,minmax(78px,120px));gap:4px;width:max-content;padding:7px!important;border:1px solid rgba(130,151,179,.35);border-radius:22px;background:rgba(255,255,255,.94)!important;box-shadow:0 16px 42px rgba(15,32,54,.2)!important;transform:translateX(50%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.appBottomNav .tab{display:flex;min-height:54px;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 12px!important;border:0!important;border-radius:16px!important;background:transparent!important;font-size:11px!important}
.appBottomNav .tab.isActive{background:#e8f1ff!important;color:#1266e3!important}.appNavIcon{font-size:21px;line-height:1}
body.isAuthed{padding-bottom:92px}body.isAuthed .pageFooter{display:none}body.isSongView .appBottomNav,body.isBandLivePerformance .appBottomNav{display:none!important}
body:not(.isAuthed) .appToolbar,body:not(.isAuthed) .appBottomNav,body.isShared .appToolbar,body.isShared .appBottomNav{display:none!important}
.settingsPanel{max-width:900px;margin:0 auto}.settingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settingsCard{padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.settingsCard h3{margin:0 0 12px}.settingsAction{display:flex;align-items:center;gap:12px;width:100%;padding:13px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-weight:750;text-align:left;text-decoration:none;cursor:pointer}.settingsAction:last-child{border-bottom:0}.settingsAction>span:first-child{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:#edf4ff;color:#1266e3}
.helpCenterCard{grid-column:1/-1}.helpCenterHead{display:flex;justify-content:space-between;gap:18px}.helpCenterHead h3{margin-bottom:5px}.helpCenterHead p{margin:0;color:var(--muted);line-height:1.45}.helpIcon{display:grid;flex:0 0 38px;height:38px;place-items:center;border-radius:12px;background:#edf4ff;color:#1266e3;font-size:19px;font-weight:900}.helpSearchWrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:18px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:var(--paper)}.helpSearchWrap:focus-within{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(59,130,246,.12)}.helpSearchWrap input{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.helpClearBtn{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.helpResultCount{margin:14px 0 7px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.helpResults{display:grid;gap:8px}.helpResult{padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--paper)}.helpResult.isBestMatch{border-color:rgba(59,130,246,.35);background:#f7faff}.helpResult h4{margin:0 0 5px;font-size:14px}.helpResult p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.helpNoResults{display:grid;gap:4px;padding:16px;border-radius:13px;background:var(--paper)}.helpNoResults span{color:var(--muted);font-size:13px}.helpContact{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:750}.helpContact a{color:#1266e3}
@media(max-width:540px){.helpCenterCard{padding:16px}}
@media(max-width:720px){.appToolbar{padding:8px 10px}.appBottomNav{right:0;bottom:0;left:0;width:100%;grid-template-columns:repeat(4,1fr);padding:5px 6px max(5px,env(safe-area-inset-bottom))!important;border-width:1px 0 0;border-radius:18px 18px 0 0;transform:none}.appBottomNav .tab{min-height:52px;padding:4px!important}.settingsGrid{grid-template-columns:1fr}}

.songPrimaryBar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px 2px}.songShareBtn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:0;border-radius:13px;background:linear-gradient(135deg,#2474ea,#1266e3);color:#fff;font:inherit;cursor:pointer;box-shadow:0 10px 24px rgba(18,102,227,.25)}.songShareBtn>span:last-child{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.songShareBtn strong{font-size:13px}.songShareBtn small{margin-top:3px;color:rgba(255,255,255,.78);font-size:10px}.songShareBtn:hover{background:linear-gradient(135deg,#1769df,#0758c8);transform:translateY(-1px)}.songShareBtn::after{position:absolute;right:0;top:calc(100% + 9px);z-index:200;width:max-content;max-width:260px;padding:9px 11px;border-radius:10px;background:#172033;color:#fff;content:attr(data-tooltip);font-size:12px;font-weight:700;line-height:1.35;opacity:0;pointer-events:none;transform:translateY(-4px);transition:.15s}.songShareBtn:hover::after,.songShareBtn:focus-visible::after{opacity:1;transform:none}
.songDisplayChooser{display:flex;gap:5px;width:max-content;max-width:100%;margin:10px 0;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.songDisplayBtn{padding:8px 12px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.songDisplayBtn.isActive{background:#e7f1ff;color:#145fc3}.songChordDiagrams{margin:12px 0 16px;padding:14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.songChordDiagramsHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.songChordDiagramsTitle{font-size:15px;font-weight:900}.diagramSizeControl{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:800}.diagramSizeControl input{width:100px}.diagramSizeControl output{min-width:26px}.songChordDiagramGrid{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px}.songChordDiagramCard{display:flex;width:calc(var(--diagram-size,96px) + 24px);flex:0 0 calc(var(--diagram-size,96px) + 24px);min-width:0;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid var(--line);border-radius:13px;background:#f8fbff}.songChordDiagramCard strong{color:#1765d1}.songChordDiagramCard .chordSvg{display:block;width:var(--diagram-size,96px);max-width:100%;height:auto}.songView.isLyricsOnly .chordSlot,.songView.isLyricsOnly .chord{display:none}.songView.isLyricsOnly .line:not(.chordLyricPair):has(.chord){display:none}.songVideoSection{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.songVideoSection iframe,.songVideoSection video{display:block;width:100%;max-width:760px;aspect-ratio:16/9;border:0;border-radius:13px;background:#0f172a}.songVideoLink{display:inline-flex;margin-top:8px;color:#1765d1;font-weight:800}.proBadge{display:inline-flex;margin-left:5px;padding:2px 6px;border-radius:99px;background:#e7f1ff;color:#145fc3;font-size:10px}.songVideoEditor{padding:14px;border:1px solid #d8e4f2;border-radius:14px;background:#f8fbff}
.bandEditCard{max-width:660px}.bandEditBody{display:flex;flex-direction:column;gap:22px;padding:24px 28px}.bandDangerZone{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 28px 26px;padding:18px 20px;border:1px solid #ffc4c4;border-radius:16px;background:#fff7f7}.bandDangerZone>div{display:flex;flex-direction:column;gap:4px}.bandDangerZone span{color:var(--muted);font-size:12px;line-height:1.45}.dangerBtn{padding:10px 14px;border:1px solid #ff9c9c;border-radius:12px;background:#fff;color:#d72c2c;font:inherit;font-weight:850;cursor:pointer}.dangerBtn:hover{background:#ffe9e9}
.bandNameField{gap:8px}.bandNameField input{min-height:48px}.bandEditMembersSection{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#f9fbfe}.bandEditSectionHead{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.bandEditSectionHead strong{font-size:16px}.bandEditSectionHead span{color:var(--muted);font-size:12px;line-height:1.45}.bandEditMember{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}.bandEditMember:last-child{border-bottom:0}.bandEditActions{margin:0;padding:0;border:0}.bandEditActions .primaryBtn{min-width:150px}
.bandSidebarTop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.bandSidebarActions{display:flex;align-items:center;gap:7px}.bandSettingsBtn{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;color:#48627c;font:inherit;font-size:18px;cursor:pointer;transition:.15s}.bandSettingsBtn:hover{border-color:#9fc5f7;background:#edf5ff;color:#145fc3;transform:translateY(-1px)}.bandManagerActions{display:flex;gap:10px}.bandManagerActions>*{flex:1;min-height:44px}.bandEmptyState #createBandEmptyBtn{margin-top:18px}
body.isPlaylistsTab .shell{grid-template-columns:1fr}body.isPlaylistsTab #playlistSide{position:static;width:100%}body.isPlaylistsTab .playlistList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}body.isPlaylistsTab #libraryPanel{display:block}
@media(max-width:720px){body.isPlaylistsTab .playlistList{grid-template-columns:1fr}body.isPlaylistsTab #libraryPanel{display:block!important;order:1}}
@media(max-width:560px){.songPrimaryBar{padding:6px 8px 0}.songShareBtn{padding:9px 12px}.songShareBtn::after{right:0;max-width:220px}.songDisplayChooser{width:100%;overflow-x:auto}.songDisplayBtn{flex:0 0 auto}.songChordDiagrams{padding:12px}.songChordDiagramGrid{display:flex;overflow-x:auto}.songChordDiagramCard{flex:0 0 104px}.bandEditBody{gap:18px;padding:20px 16px}.bandManagerActions{flex-direction:column}.bandDangerZone{align-items:flex-start;flex-direction:column;margin:0 16px 18px}.bandEditMember{align-items:flex-start;flex-direction:column}.bandEditMember .bandMemberActions{width:100%}}
.songVideoEditor.isLocked{position:relative;opacity:.72}.songVideoEditor.isLocked::after{display:block;margin-top:9px;color:#145fc3;content:"Upgrade to Pro to add a video.";font-size:12px;font-weight:850}
.songVideoHeader{max-width:760px;margin:0 0 13px}.songVideoTitle{color:var(--text);font-size:clamp(18px,2.2vw,24px);font-weight:900;line-height:1.2}.songVideoDescription{max-width:68ch;margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55;white-space:pre-wrap}.videoTextFields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;margin-top:12px}.videoTextFields textarea{resize:vertical}@media(max-width:620px){.videoTextFields{grid-template-columns:1fr}.songVideoSection{margin-block:10px;padding:13px}}

/* Inline diagram mode: every diagram stays attached to its chord while lyric
   chunks keep a shared bottom baseline, so the sentence remains one row. */
.songChordDiagrams{padding:10px 14px}.songChordDiagramsHead{margin:0}.songChordDiagramGrid{display:none}.diagramSizeControl input{width:clamp(150px,28vw,280px)}
.inlineChordUnit{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;margin:0 2px;vertical-align:bottom;white-space:nowrap}
.inlineChordDiagram{display:flex;width:var(--diagram-size,80px);flex:0 0 auto;flex-direction:column;align-items:center;gap:3px;padding:5px;border:1px solid rgba(59,130,246,.2);border-radius:9px;background:#f8fbff;box-shadow:0 5px 14px rgba(15,23,42,.1)}
.inlineChordName{max-width:100%;overflow:hidden;color:#1765d1;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(10px,calc(var(--diagram-size,80px)*.16),18px);font-weight:850;line-height:1.05;text-overflow:ellipsis}.inlineChordDiagram .chordSvg{display:block;width:100%;height:auto}.inlineChordDiagram.isPiano,.inlineChordDiagram:has(.pianoChordSvg){width:calc(var(--diagram-size,80px)*1.8)!important;min-width:calc(var(--diagram-size,80px)*1.8);max-width:none;padding:6px 8px}.inlineChordDiagram.isPiano .pianoChordSvg,.inlineChordDiagram:has(.pianoChordSvg) .pianoChordSvg{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:280/104;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.songView:not(.isLyricsOnly) .inlineChordUnit>.chord{display:none}
.chordLyricPair{align-items:flex-end}
body.theme-dark .inlineChordDiagram{border-color:rgba(148,163,184,.35);background:#f8fbff}
@media(max-width:560px){.songChordDiagramsHead{align-items:flex-start;flex-direction:column}.diagramSizeControl{width:100%}.diagramSizeControl input{min-width:0;flex:1}.inlineChordUnit{margin-inline:1px}.inlineChordDiagram{padding:3px}}

/* === Print/PDF (printvänligt) === */
@media print{
  body{
    background: #fff !important;
  }
  .topbar, .tabs, .side, .controls, .performanceActions, .songTopRight, #backBtn, .inlineNoteCallout, .songNotesPanel{
    display: none !important;
  }
  .shell{
    max-width: none !important;
    padding: 0 !important;
  }
  .panel{
    box-shadow: none !important;
    border: none !important;
  }
  .songContent{
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .chord{
    border: 1px solid #ddd !important;
    background: #f3f7ff !important;
    color: #111 !important;
  }
}

/* Ackord som "badge" (för [C]text-läge) */
.chord.chordBadge{
  display:inline-block;
  font-weight: 900;
  color: var(--brand);
  background: rgba(59,130,246,0.10);
  border: 1px solid rgba(59,130,246,0.18);
  padding: 0px 6px;              /* badge-look */
  border-radius: 10px;
  transform: translateY(-1px);
  margin-right: 2px;
}

/* Ackord i UG-linjer: INGEN padding/border (för att inte flytta position) */
.chord.chordPlain{
  font-weight: 900;
  color: var(--brand);
  background: transparent;
  border: 0;
  padding: 0;                    /* ✅ kritiskt */
  margin: 0;                     /* ✅ kritiskt */
  border-radius: 0;
  transform: none;
  text-decoration: underline;    /* tydlig skillnad utan width-ändring */
  text-underline-offset: 2px;
}
.authMini{ position:relative; }
.authMiniStatus{
  max-width:240px;
  overflow:hidden;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.accountMenu{ position:relative; }
.accountMenu summary{ list-style:none; }
.accountMenu summary::-webkit-details-marker{ display:none; }
.accountMenuTrigger{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:6px 10px 6px 7px;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:999px;
  color:#fff;
  background:rgba(3,12,28,0.56);
  box-shadow:0 10px 28px rgba(3,12,28,0.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
}
.accountMenuTrigger:hover{ background:rgba(3,12,28,0.70); }
.accountAvatar{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:50%;
  color:#082f49;
  background:linear-gradient(145deg, #e0f2fe, #67e8f9);
}
.accountAvatar svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.accountSummary{ display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:1px; }
.accountLabel{ color:#f8fafc; font-size:12px; font-weight:850; }
.accountSummary .membershipBadge{
  padding:0;
  border:0;
  color:#bae6fd;
  background:transparent;
  font-size:10px;
}
.accountChevron{ color:#cbd5e1; transition:transform 160ms ease; }
.accountMenu[open] .accountChevron{ transform:rotate(180deg); }
.accountPopover{
  position:absolute;
  z-index:50;
  top:calc(100% + 9px);
  right:0;
  width:260px;
  padding:15px;
  border:1px solid rgba(148,163,184,0.24);
  border-radius:16px;
  color:#0f172a;
  background:rgba(255,255,255,0.97);
  box-shadow:0 22px 55px rgba(2,6,23,0.24);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.accountPopoverLabel{ margin-bottom:3px; color:#64748b; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.accountPopover .syncStatus{ margin-top:9px; }
.accountMenuDivider{ height:1px; margin:13px 0 8px; background:rgba(148,163,184,0.22); }
.accountMenuAction{
  width:100%;
  padding:10px 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#334155;
  font:800 13px/1 var(--font);
  text-align:left;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
.accountMenuAction:hover{ background:#f1f5f9; color:#0f172a; }
.accountMenuLogout{ color:#b42318; }

@media (max-width:720px){
  .topbar{
    min-height:104px;
    padding:14px 12px;
    flex-direction:row;
    align-items:center;
    gap:8px;
  }
  .topbar .brand{
    width:auto;
    flex:0 1 44%;
    min-width:0;
  }
  .topbar .brandLogoChip{
    width:100%;
    max-width:180px;
    height:58px;
    padding:0;
  }
  .topbar .brand-logo{
    max-width:100%;
  }
  .topbar-actions{
    width:auto;
    min-width:0;
    flex:1 1 56%;
    margin-left:auto;
    justify-content:flex-end;
  }
  .authMini{ min-width:0; }
  .accountMenuTrigger{ min-height:44px; padding:5px 8px 5px 5px; }
  .accountAvatar{ width:32px; height:32px; flex-basis:32px; }
  .accountLabel{ display:none; }
  .accountSummary .membershipBadge{ max-width:92px; overflow:hidden; text-overflow:ellipsis; }
  .accountPopover{ position:fixed; top:76px; right:12px; width:min(290px, calc(100vw - 24px)); }
}

@media (max-width:1100px){
  .siteHeader .siteNav{display:none}
  .tabs{ flex-wrap:wrap; }
  .menuSearchActions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) repeat(4, auto);
    flex:1 1 100%;
    width:100%;
    margin-left:0;
  }
}

@media (max-width:720px){
  .menuSearchActions{ grid-template-columns:minmax(0, 1fr); }
  .tabs .searchWrap{ grid-column:1 / -1; min-width:100%; }
}

@media (max-width:420px){
  .topbar .brand{ flex-basis:52%; }
  .topbar-actions{ flex-basis:48%; }
  .accountSummary{ display:none; }
  .accountChevron{ display:none; }
  .accountMenuTrigger{ padding-right:5px; }
  .menuSearchActions{ grid-template-columns:minmax(0, 1fr); }
}

/* Keep the collapsed performance view focused on its single primary action. */
body.isSongView.appCollapsed:not(.isBandLivePerformance) .controls{
  display:none !important;
}
body.isSongView.appCollapsed .performanceModeBtn{
  display:none;
}
@media (min-width:721px){
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:130px minmax(220px, 360px) 130px;
    justify-content:center;
  }
  body.isSongView.appCollapsed .performanceActions #prevSongBtn{ grid-column:1; }
  body.isSongView.appCollapsed .performanceActions .performanceStartBtn{ grid-column:2; }
  body.isSongView.appCollapsed .performanceActions #nextSongBtn{ grid-column:3; }
}
@media (max-width:720px){
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:52px minmax(132px, 1fr) 52px;
    justify-content:stretch;
  }
  body.isSongView.appCollapsed .performanceActions #prevSongBtn{ grid-column:1; }
  body.isSongView.appCollapsed .performanceActions .performanceStartBtn{ grid-column:2; }
  body.isSongView.appCollapsed .performanceActions #nextSongBtn{ grid-column:3; }
}
@media (max-width:380px){
  body.isSongView.appCollapsed .performanceActions{
    grid-template-columns:46px minmax(104px, 1fr) 46px;
  }
}

/* Final stacking and Band Live layout overrides. Keep these after the general
   song/mobile rules so performance mode cannot inherit a left-aligned title. */
.topbar{
  position:relative;
  z-index:70;
}
.accountPopover{
  z-index:80;
}
body.isBandLivePerformance .songTitleInline{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  justify-content:stretch;
  width:100%;
  padding:4px 12px 8px;
  text-align:center;
}
body.isBandLivePerformance .songTitleText{
  width:100%;
  min-width:0;
  margin:0;
  text-align:center;
}
body.isBandLivePerformance .songTitle,
body.isBandLivePerformance .songArtist{
  text-align:center;
}
.floatingAddSongBtn{
  position:fixed;
  right:max(20px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:var(--z-performance);
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:#1266e3;
  color:#fff;
  box-shadow:0 12px 30px rgba(18,102,227,.38);
  font:900 30px/1 var(--font);
  cursor:pointer;
}
.floatingAddSongBtn:hover{background:#0b56c9;transform:translateY(-2px)}
body:not(.isAuthed) .floatingAddSongBtn,
body.isSongView .floatingAddSongBtn,
body.isShared .floatingAddSongBtn{display:none}
.bandSelectedActions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.bandMember{gap:10px}
.bandMemberActions{display:flex;gap:6px;margin-left:auto}
.bandMemberActions button{min-height:34px;padding:6px 10px}
.dangerIconBtn{
  display:inline-grid;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  place-items:center;
  border:1px solid rgba(239,68,68,.35);
  border-radius:50%;
  background:rgba(239,68,68,.07);
  color:#ef4444;
  font-size:24px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}
.dangerIconBtn:hover,.dangerIconBtn:focus-visible{background:rgba(239,68,68,.15);outline:2px solid rgba(239,68,68,.22);outline-offset:2px}
.bandMemberActions .dangerIconBtn{padding:0}

/* Compact public navigation trigger: fixed dimensions prevent generic mobile
   button rules from stretching the hamburger across the header. */
@media (max-width:1100px){
  .siteHeader .siteMenuBtn{
    display:grid;
    width:48px;
    min-width:48px;
    max-width:48px;
    height:48px;
    min-height:48px;
    flex:0 0 48px;
    place-content:center;
    padding:0;
    border-color:rgba(255,255,255,.45);
    border-radius:14px;
    background:rgba(255,255,255,.94);
  }
  .siteHeader .siteMenuBtn span{
    width:22px;
    height:2px;
    margin:3px 0;
    border-radius:999px;
    background:#17324f;
  }
  .siteHeader .siteNavInner{
    top:56px;
    right:0;
    min-width:min(240px, calc(100vw - 24px));
    border-color:rgba(148,163,184,.28);
    border-radius:16px;
    box-shadow:0 22px 50px rgba(2,6,23,.24);
  }
  .siteHeader .siteNavInner a{
    color:#1e293b;
    border-color:transparent;
    border-radius:10px;
    background:transparent;
  }
  .siteHeader .siteNavInner a:hover{background:#eef5ff}
}

@media (max-width:720px){
  .floatingAddSongBtn{right:16px;bottom:max(16px, env(safe-area-inset-bottom));width:54px;height:54px}
  .bandSelectedActions{justify-content:flex-start}
  body.isSongView .favoriteTitleBtn{order:3}
  body.isSongView .mobileMoreWrap{order:4}
  body.isSongView .notesToggleBtn{order:5}
  body.isBandLivePerformance .songTitleInline{
    align-items:center;
    justify-content:stretch;
    padding-inline:8px;
    text-align:center;
  }
  body.isBandLivePerformance .songTitleText{
    flex:auto;
    margin:0;
    text-align:center;
  }
  body.isBandLivePerformance .bandLiveBarMain,
  body.isBandLivePerformance .bandLiveBarMain > div{
    min-width:0;
  }
  body.isBandLivePerformance .bandLiveBarMain strong,
  body.isBandLivePerformance .bandLiveBarMain span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width:520px){
  body.isBandLivePerformance .bandLiveBar{
    align-items:stretch;
    flex-direction:column;
    gap:8px;
  }
  body.isBandLivePerformance .bandLiveBarActions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
    width:100%;
    margin-left:0;
  }
  body.isBandLivePerformance .bandLiveBarActions > button{
    width:100%;
    min-width:0;
    padding-inline:8px;
    white-space:normal;
  }
  body.isBandLivePerformance .songView{
    padding-top:132px;
  }
}

.adminPagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.adminPagination [role="status"]{font-variant-numeric:tabular-nums}

/* Band songs expose their controls directly without library navigation/actions. */
body.isBandLivePerformance .songControlsPanel{display:block}
body.isBandLivePerformance .songPrimaryBar,
body.isBandLivePerformance .mobileMoreWrap{display:none!important}
body.isBandLivePerformance .songTitleInline{grid-template-columns:minmax(0, 1fr)}
body.isBandLivePerformance.isBandLiveFollower .backingTrackGroup{display:none!important}

/* Ordered live controls and an explicit backing-track start workflow. */
.backingTrackHeader{display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(24px,4vw,56px)}
.backingTrackStartOptions{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.backingTrackStartOptions label{display:grid;gap:5px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.backingTrackStartOptions select{min-width:170px;height:38px;padding:0 34px 0 11px;border:1px solid #cedbeb;border-radius:10px;background:var(--card);color:var(--text);font:800 12px var(--font)}
#performanceCountInWrap select{min-width:112px}
body.isBandLivePerformance .songControlsPanel{max-width:1320px;margin:12px auto 18px;padding:10px;background:#f8fbff;box-shadow:0 10px 26px rgba(37,99,235,.06)}
body.isBandLivePerformance .songControlsPanel.isOpen .controls{grid-template-columns:repeat(4,minmax(0,1fr));border-radius:14px}
body.isBandLivePerformance .songAppearanceGroup{padding:12px 14px}
body.isBandLivePerformance .songAppearanceIntro{margin-bottom:8px}
body.isBandLivePerformance .songAppearanceIntro .ctrlDescription{display:none}
body.isBandLivePerformance .songAppearanceGroup .songDisplayBtn{min-height:36px;padding-block:6px}
body.isBandLivePerformance .songDiagramOptions{margin-top:9px;padding-top:9px}
body.isBandLivePerformance .keyGroup,
body.isBandLivePerformance .textSizeGroup,
body.isBandLivePerformance .scrollGroup,
body.isBandLivePerformance .metronomeGroup{min-height:96px;padding:12px 14px;gap:8px}
.performanceUtilityRow{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--line);background:rgba(248,250,252,.72)}
.performanceUtilityBtn{position:relative;display:grid;width:38px;height:38px;place-items:center;padding:0;border:1px solid #d5e0ed;border-radius:11px;background:var(--card);color:#365b82;font:900 17px/1 var(--font);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.performanceUtilityBtn:hover,.performanceUtilityBtn:focus-visible{border-color:#80aef0;background:#eaf3ff;color:#145fc3;transform:translateY(-1px)}
.performanceUtilityBtn.isReady{border-color:#86d3aa;background:#ecf9f2;color:#147a45}
.notesIcon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.songControlsSummary .notesIcon{width:16px;height:16px}
.bandCardIcon .notesIcon{display:block;width:18px;height:18px}
.performanceUtilityBtn::after{position:absolute;bottom:calc(100% + 7px);left:50%;z-index:20;width:max-content;max-width:190px;padding:7px 9px;border-radius:8px;background:#172033;color:#fff;content:attr(title);font:700 11px/1.25 var(--font);opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:.15s}
.performanceUtilityBtn:hover::after,.performanceUtilityBtn:focus-visible::after{opacity:1;transform:translate(-50%,0)}
body.isBandLivePerformance .backingTrackGroup{padding:13px 14px;gap:9px}
@media(max-width:720px){
  .backingTrackHeader{align-items:stretch;flex-direction:column}
  .backingTrackStartOptions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .backingTrackStartOptions select{width:100%;min-width:0}
  body.isBandLivePerformance .songControlsPanel.isOpen .controls{grid-template-columns:1fr}
  .performanceUtilityRow{padding:8px 12px}
  body.isBandLivePerformance .textSizeGroup .ctrlRow,
  body.isBandLivePerformance .scrollGroup .ctrlRow,
  body.isBandLivePerformance .metronomeGroup .ctrlRow{display:flex;justify-content:flex-end}
  body.isBandLivePerformance .textSizeGroup .controlResetBtn,
  body.isBandLivePerformance .scrollGroup .controlResetBtn{display:none}
  body.isBandLivePerformance .controlStepper{height:38px}
  body.isBandLivePerformance .stepperBtn{width:34px;min-width:34px}
  body.isBandLivePerformance .stepperValue{min-width:68px;padding-inline:5px}
}