:root {
  --jtab-bg: #05080a;
  --jtab-panel: #11171c;
  --jtab-panel-2: #151d22;
  --jtab-line: #2c373e;
  --jtab-line-soft: rgba(155, 173, 184, .17);
  --jtab-text: #f5f2e8;
  --jtab-muted: #c1c9cd;
  --jtab-muted-2: #929fa7;
  --jtab-lime: #c8ff25;
  --jtab-violet: #9b4dff;
  --jtab-score: #0a0f12;
  --jtab-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --jtab-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jtab-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html,
body.tabpage {
  background: var(--jtab-bg);
}

/* Legacy color tokens stay paper-dark for the score renderer. Reassert the
   accessible dark-shell palette for regular interface text and controls. */
.tabpage button { color: var(--jtab-muted); }
.tabpage button:disabled { color: var(--jtab-muted-2); }
.tabpage .dim { color: var(--jtab-muted); }
.tabpage .faint { color: var(--jtab-muted-2); }
.tabpage .overlay,
.tabpage .overlay h2 { color: var(--jtab-text); }
.tabpage .overlay li { color: var(--jtab-muted); }
.tabpage .overlay li::before { color: var(--jtab-muted-2); }
.tabpage .overlay button { color: var(--jtab-text); }
.tabpage .asktitle,
.tabpage .panel-title { color: var(--jtab-text); text-shadow: none; }
.tabpage .askdetail,
.tabpage .asklabel,
.tabpage .askhelp,
.tabpage .panel-section,
.tabpage .panel-link,
.tabpage .songmeta,
.tabpage .ascii,
.tabpage .chordcustom-help,
.tabpage .chordcustom-saved-title { color: var(--jtab-muted); }
.tabpage .askchoice-detail,
.tabpage .panel-note,
.tabpage .panel-key,
.tabpage .songtools,
.tabpage .rating-summary,
.tabpage .rating-flat { color: var(--jtab-muted-2); }
.tabpage .songtitle,
.tabpage .panel-section strong,
.tabpage .panel-section b { color: var(--jtab-text); }
.tabpage .askbox textarea,
.tabpage .askbox input,
.tabpage .askbox select,
.tabpage .panel textarea,
.tabpage .panel input,
.tabpage .panel select {
  color: var(--jtab-text);
  border-color: #46545d;
  background: var(--jtab-panel);
  caret-color: var(--jtab-lime);
}
.tabpage .askbox textarea::placeholder,
.tabpage .askbox input::placeholder,
.tabpage .panel textarea::placeholder,
.tabpage .panel input::placeholder {
  color: var(--jtab-muted-2);
  opacity: 1;
}
.tabpage .askrow { border-color: #46545d; }
.tabpage ::selection {
  color: #071004;
  background: var(--jtab-lime);
}
.tabpage .askchoice.current,
.tabpage .askchoice.selected,
.tabpage .askchoice[aria-selected="true"] {
  color: #071004;
  border-color: var(--jtab-lime);
  background: var(--jtab-lime);
  text-shadow: none;
}
.tabpage .askchoice.current .askchoice-detail,
.tabpage .askchoice.selected .askchoice-detail,
.tabpage .askchoice[aria-selected="true"] .askchoice-detail {
  color: #25330d;
}
.tabpage .askchoice.current:hover,
.tabpage .askchoice.current:focus-visible,
.tabpage .askchoice.selected:hover,
.tabpage .askchoice.selected:focus-visible,
.tabpage .askchoice[aria-selected="true"]:hover,
.tabpage .askchoice[aria-selected="true"]:focus-visible {
  color: #071004;
  background: var(--jtab-lime);
}
.tabpage .chordcell canvas { opacity: .92; }
.tabpage .chordcell .chordname { color: var(--jtab-text); }
.tabpage .chordpicker button.chordcell:hover,
.tabpage .chordpicker button.chordcell:focus-visible,
.tabpage .chordcell.selected {
  color: #071004;
  border-color: var(--jtab-lime);
  background: var(--jtab-lime);
  box-shadow: none;
}
.tabpage .chordpicker button.chordcell:hover canvas,
.tabpage .chordpicker button.chordcell:focus-visible canvas,
.tabpage .chordcell.selected canvas {
  opacity: 1;
  filter: brightness(0);
}
.tabpage .chordpicker button.chordcell:hover .chordname,
.tabpage .chordpicker button.chordcell:focus-visible .chordname,
.tabpage .chordcell.selected .chordname { color: #071004; }
.tabpage .chordpicker .askinput,
.tabpage .chordpicker input,
.tabpage .chordpicker textarea,
.tabpage .chordpicker select {
  color: var(--jtab-text);
  border-color: #46545d;
  background: var(--jtab-panel);
  caret-color: var(--jtab-lime);
  text-shadow: none;
}
.tabpage .chordpicker .askinput::placeholder,
.tabpage .chordpicker input::placeholder,
.tabpage .chordpicker textarea::placeholder {
  color: var(--jtab-muted-2);
  opacity: 1;
}

@media print {
  .tabpage .chordcell,
  .tabpage .chordcell.selected {
    color: #000;
    border-color: #777;
    background: transparent;
  }
  .tabpage .chordcell canvas,
  .tabpage .chordcell.selected canvas {
    opacity: 1;
    filter: none;
  }
  .tabpage .chordcell .chordname,
  .tabpage .chordcell.selected .chordname { color: #000; }
}

body.tabpage {
  /* Match the read-only riff player. The renderer uses --bg to erase the
     string beneath a fret number, so its canvas and ink must share this exact
     palette or the numbers acquire visible boxes. */
  --bg: var(--jtab-score);
  --bg-rgb: 10, 15, 18;
  --amber: var(--jtab-lime);
  --amber-dim: #a9cf37;
  --amber-faint: #52652a;
  --glow: rgba(200, 255, 37, .13);
  min-height: 100svh;
  padding: 0;
  color: var(--jtab-text);
  font-family: var(--jtab-body);
  font-size: 13px;
  background:
    radial-gradient(circle at 12% -8%, rgba(155, 77, 255, .11), transparent 31rem),
    radial-gradient(circle at 92% 10%, rgba(200, 255, 37, .055), transparent 28rem),
    var(--jtab-bg);
}

body.tabpage::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .015) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
}

.tabpage #bgLayer,
.tabpage .crt {
  display: none !important;
}

.tabpage .wrap {
  position: relative;
  z-index: 1;
  width: min(1540px, calc(100% - 24px));
  max-width: none;
  min-height: calc(100svh - 24px);
  margin: 12px auto;
  padding: 0 28px 18px;
  border: 1px solid rgba(167, 184, 194, .22);
  background: rgba(6, 10, 13, .72);
  box-shadow: 0 22px 90px rgba(0, 0, 0, .42);
}

.tabpage header {
  min-height: 70px;
  margin: 0 -28px 20px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--jtab-line);
  background: rgba(6, 10, 13, .94);
  text-shadow: none;
}

.tabpage .jtab-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 28px;
}

.tabpage .jtab-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  text-decoration: none;
}

.tabpage .jtab-brand img {
  width: 138px;
  height: auto;
}

.tabpage .jtab-brand span {
  color: var(--jtab-muted);
  font: 800 15px/1 var(--jtab-body);
  letter-spacing: .04em;
}

.tabpage .jtab-document {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding-left: 26px;
  border-left: 1px solid var(--jtab-line);
}

.tabpage .jtab-document small {
  color: var(--jtab-muted-2);
  font: 800 8px/1 var(--jtab-body);
  letter-spacing: .16em;
}

.tabpage .jtab-pro-badge {
  align-self: center;
  padding: 4px 7px;
  border: 1px solid var(--jtab-line);
  border-radius: 4px;
  color: var(--jtab-muted);
  background: rgba(17, 23, 28, .78);
  font: 800 9px/1 var(--jtab-body);
  letter-spacing: .1em;
  text-decoration: none;
}

.tabpage .jtab-pro-badge.is-pro {
  color: #071004;
  border-color: var(--jtab-lime);
  background: var(--jtab-lime);
}

.tabpage .jtab-pro-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: grid;
  gap: 6px;
  width: min(330px, calc(100vw - 36px));
  padding: 14px;
  border: 1px solid var(--jtab-line);
  border-radius: 7px;
  color: var(--jtab-text);
  background: #0c1216;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .58);
  opacity: 0;
  transform: translateY(14px);
  transition: .2s ease;
}

.tabpage .jtab-pro-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.tabpage .jtab-pro-toast strong {
  color: var(--jtab-lime);
  font: 900 12px/1 var(--jtab-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tabpage .jtab-pro-toast span {
  color: var(--jtab-muted);
  line-height: 1.45;
}

.tabpage .jtab-pro-toast a {
  width: max-content;
  color: #071004;
  background: var(--jtab-lime);
  padding: 7px 10px;
  border-radius: 4px;
  font-weight: 800;
  text-decoration: none;
}

.tabpage #docname {
  overflow: hidden;
  color: var(--jtab-text);
  font: 900 20px/.95 var(--jtab-display);
  letter-spacing: .045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabpage .tools {
  gap: 0;
  justify-content: flex-end;
  border: 1px solid var(--jtab-line);
  border-radius: 6px;
  background: rgba(12, 18, 22, .72);
}

.tabpage .tools .menubtn,
.tabpage .tools > .bar-toggle {
  min-height: 38px;
  padding: 0 15px;
  border-right: 1px solid var(--jtab-line);
  color: var(--jtab-text);
  font: 800 10px/1 var(--jtab-body);
  letter-spacing: .09em;
  text-shadow: none;
}

.tabpage .tools .menu:last-of-type .menubtn {
  border-right: 0;
}

.tabpage .tools .menubtn:hover,
.tabpage .tools .menubtn[aria-expanded="true"] {
  color: var(--jtab-lime);
  background: rgba(200, 255, 37, .055);
}

.tabpage .tools > .bar-toggle {
  position: static;
  min-width: 40px;
  border-left: 1px solid var(--jtab-line);
  border-right: 0;
  background: transparent;
}

.tabpage .menupop {
  top: calc(100% + 7px);
  min-width: 170px;
  gap: 2px;
  padding: 7px;
  border: 1px solid #39464e;
  border-radius: 7px;
  background: #0c1216;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .55);
}

.tabpage .menupop > button,
.tabpage .menupop > .menu-link {
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--jtab-muted);
  font: 700 11px/1.2 var(--jtab-body);
  text-decoration: none;
  text-shadow: none;
}

.tabpage .menupop > button:hover,
.tabpage .menupop > .menu-link:hover {
  color: var(--jtab-text);
  background: var(--jtab-panel-2);
}

.tabpage #status {
  min-height: 0;
  padding: 0 0 8px;
  color: var(--jtab-muted);
  font-family: var(--jtab-mono);
}

.tabpage .meta {
  gap: 6px;
  max-height: 62px;
  padding: 0 0 7px;
  color: var(--jtab-muted);
}

.tabpage .metabit {
  min-width: 88px;
  height: 54px;
  min-height: 54px;
  justify-content: center;
  gap: 4px;
  padding: 6px 11px;
  border: 1px solid var(--jtab-line-soft);
  background: rgba(17, 23, 28, .72);
}

.tabpage .metabit b {
  color: var(--jtab-muted-2);
  font: 800 8px/1 var(--jtab-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tabpage .meta-edit {
  min-width: 0;
  min-height: 18px;
  padding: 0;
  color: var(--jtab-lime);
  border: 0;
  font: 700 12px/1.2 var(--jtab-mono);
  text-shadow: none;
}

.tabpage main {
  min-height: 360px;
  border: 1px solid #3b4549;
  border-radius: 7px;
  background: var(--bg);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}

.tabpage #stage {
  background: var(--bg);
}

/* Alternate white score: only the music viewport inherits these tokens. The
   toolbar, transport, pads, dialogs and every button continue to inherit the
   normal dark Studio palette from body.tabpage. */
.tabpage.theme-white main {
  --bg: #f5f1e8;
  --bg-rgb: 245, 241, 232;
  --amber: #211f1b;
  --amber-dim: #6d6860;
  --amber-faint: #a7a096;
  --glow: transparent;
  background: var(--bg);
}

.tabpage.theme-white #stage { background: var(--bg); }

/* The optional full paper theme remains genuinely paper. Its legacy
   tokens come from jtab-site.css; these two surfaces follow them rather than
   retaining the default dark score. */
.tabpage.theme-paper main,
.tabpage.theme-paper #stage { background: var(--bg); }

.tabpage .transport {
  min-height: 46px;
  gap: 6px;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--jtab-line);
  border-radius: 7px;
  background: rgba(12, 18, 22, .9);
}

.tabpage .transport > button,
.tabpage .transport > .menu > .menubtn {
  min-width: 36px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #35424a;
  border-radius: 5px;
  color: var(--jtab-text);
  background: linear-gradient(145deg, #151d22, #0b1013);
  text-shadow: none;
}

.tabpage #btn-play {
  color: #091005;
  border-color: var(--jtab-lime);
  background: var(--jtab-lime);
  box-shadow: 0 0 22px rgba(200, 255, 37, .12);
}

.tabpage #btn-play,
.tabpage #btn-stop,
.tabpage #btn-loop,
.tabpage #btn-tools-collapse,
.tabpage #btn-transport-collapse {
  font-size: 0;
}

.tabpage #btn-play::before { content: "▶"; font-size: 14px; }
.tabpage #btn-stop::before { content: "■"; font-size: 12px; }
.tabpage #btn-loop::before { content: "↻"; font-size: 18px; }
.tabpage #btn-tools-collapse::before,
.tabpage #btn-transport-collapse::before { content: "▲"; font-size: 11px; }

.tabpage #btn-tools-collapse[aria-expanded="false"]::before,
.tabpage #btn-transport-collapse[aria-expanded="false"]::before { content: "▼"; }

.tabpage #btn-loop {
  color: #cdaaff;
  border-color: rgba(155, 77, 255, .65);
}

.tabpage .transport .clock {
  margin-left: 4px;
  color: var(--jtab-muted);
  font: 12px var(--jtab-mono);
}

.tabpage .transport .bar-toggle {
  position: static;
  margin-left: auto;
  border-left: 1px solid #35424a;
  background: #0c1216;
}

.tabpage .pad-host {
  max-height: 240px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--jtab-line);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(17, 23, 28, .96), rgba(9, 14, 17, .96));
}

.tabpage .padtabs {
  gap: 20px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--jtab-line-soft);
}

.tabpage .padtab {
  position: relative;
  min-height: 26px;
  padding: 0 2px;
  color: var(--jtab-muted);
  border: 0;
  font: 800 10px/1 var(--jtab-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tabpage .padtab.on {
  color: var(--jtab-lime);
}

.tabpage .padtab.on::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  background: var(--jtab-lime);
}

.tabpage .padrow {
  gap: 6px;
  padding-top: 9px;
}

/* Edge fades obscured the first and last controls against the dark theme. */
.tabpage .padtabs::before,
.tabpage .padtabs::after,
.tabpage .padrow::before,
.tabpage .padrow::after {
  display: none;
}

.tabpage .pad {
  min-width: 42px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #35424a;
  border-radius: 5px;
  color: var(--jtab-text);
  background: linear-gradient(145deg, #151d22, #0b1013);
  font: 600 13px/1 var(--jtab-mono);
  text-shadow: none;
}

.tabpage .pad:hover:not(:disabled) {
  color: var(--jtab-lime);
  border-color: var(--jtab-lime);
  background: rgba(200, 255, 37, .045);
}

.tabpage .pad.on,
.tabpage .transport button.on {
  color: #091005;
  border-color: var(--jtab-lime);
  background: var(--jtab-lime);
}

.tabpage .panel,
.tabpage .askbox,
.tabpage .chordpicker {
  color: var(--jtab-text);
  border-color: var(--jtab-line);
  background: #0c1216;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.tabpage .askback,
.tabpage .chordback {
  background: rgba(5, 8, 10, .78);
}

.tabpage .panel button,
.tabpage .askbox button,
.tabpage .chordpicker button,
.tabpage .panel input,
.tabpage .panel select,
.tabpage .askbox input,
.tabpage .askbox select {
  color: var(--jtab-text);
  border-color: var(--jtab-line);
  background-color: var(--jtab-panel);
  text-shadow: none;
}

.tabpage .panel button:hover,
.tabpage .askbox button:hover,
.tabpage .chordpicker button:hover {
  color: var(--jtab-lime);
  border-color: var(--jtab-lime);
}

.tabpage .statusbar {
  max-width: none;
  margin-top: 14px;
  padding: 12px 2px 0;
  border-color: var(--jtab-line-soft);
  color: var(--jtab-muted-2);
  font: 9px var(--jtab-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tabpage .statusbar a {
  color: var(--jtab-muted);
}

@media (max-width: 900px) {
  .tabpage .wrap {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0 12px 14px;
    border: 0;
  }

  .tabpage header {
    margin: 0 -12px 14px;
    padding: 10px 12px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tabpage .jtab-heading {
    justify-content: space-between;
  }

  .tabpage .jtab-brand img {
    width: 118px;
  }

  .tabpage .tools {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .tabpage .tools .menubtn {
    padding-inline: 12px;
  }

  .tabpage .meta {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .tabpage .jtab-document small,
  .tabpage .jtab-brand span {
    display: none;
  }

  .tabpage .jtab-document {
    padding-left: 14px;
  }

  .tabpage #docname {
    max-width: 42vw;
    font-size: 17px;
  }

  .tabpage .metabit {
    min-width: 76px;
    height: 48px;
    min-height: 48px;
    padding: 5px 8px;
  }

  .tabpage main {
    min-height: 300px;
  }

  .tabpage .pad-host {
    padding: 8px;
  }

  .tabpage .pad,
  .tabpage .padtab,
  .tabpage .transport > button,
  .tabpage .transport > .menu > .menubtn {
    min-height: 32px;
  }
}

@media print {
  .tabpage .wrap {
    border: 0;
    box-shadow: none;
    background: #fff;
  }
}