:root {
  color-scheme: light;
  --bg: #f7f8f6;
  --ink: #20231f;
  --muted: #697067;
  --line: #d8ddd4;
  --panel: #ffffff;
  --accent: #256b5a;
  --accent-2: #8f3f52;
  --warn: #b55e00;
  --selected: #e6f1ec;
  --shadow: 0 20px 52px rgba(35, 42, 36, 0.13);
  --glass-shadow: 0 28px 68px rgba(35, 42, 36, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(255, 255, 255, 0.26);
  --field: #ffffff;
  --soft: #eef5f1;
  --header: #eef1ed;
  --glass-panel: rgba(255, 255, 255, 0.62);
  --glass-field: rgba(255, 255, 255, 0.50);
  --glass-soft: rgba(238, 245, 241, 0.58);
  --radius-control: 10px;
  --radius-panel: 24px;
  --radius-sheet: 32px;
  --radius-list: 10px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

main,
.view {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

main::-webkit-scrollbar,
.view::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

* {
  min-width: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.playlist-mode-view {
  display: none;
  padding: 24px;
  overflow: auto;
}

.playlist-mode-view.is-active {
  display: block;
}

.playlist-mode-header,
.playlist-mode-grid,
.playlist-inline-form,
.playlist-actions,
.playlist-transport,
.monitor-status-row,
.playlist-integrity-panel {
  display: flex;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.playlist-inline-form,
.playlist-actions,
.playlist-transport {
  gap: 8px;
  margin-top: 10px;
}

.playlist-transport button {
  flex: 1;
}

.playlist-track-list {
  max-height: 280px;
  margin: 18px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.playlist-track-list li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.playlist-track-list li.is-current {
  border-radius: 8px;
  background: var(--selected);
}

.playlist-track-list small {
  color: var(--muted);
}

.integrity-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.integrity-badge.is-ok,
.integrity-badge.is-valid {
  background: #dff3e8;
  color: #17633e;
}

.integrity-badge.is-warning,
.integrity-badge.is-missing {
  background: #fff0ce;
  color: #855400;
}

.integrity-badge.is-invalid {
  background: #fde2e0;
  color: #9f2822;
}

.access-lock-button {
  white-space: nowrap;
  /* Reserve a stable width for the profile button so its label loading in
     (empty -> "Konto" -> the account name) does not reflow the tab row.
     The mobile rule below resets this to an icon-only 36px button. */
  min-width: 176px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.access-dialog {
  width: min(460px, calc(100vw - 28px));
}

:root[data-account-dialog-mode="signed-in"] .access-dialog {
  width: min(720px, calc(100vw - 32px));
}

.access-dialog h2 {
  margin: 0 0 8px;
}

.access-dialog #accessDialogExplanation[hidden] {
  display: none;
}

.access-pin-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.access-pin-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.85rem;
}

.access-pin-form input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-align: center;
}

.access-role-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.account-login-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 8px;
  padding: 14px 16px;
  border: 1px solid rgba(132, 162, 172, 0.26);
  border-radius: 16px;
  background: rgba(11, 31, 43, 0.30);
}

.account-login-panel[hidden] {
  display: none;
}

.account-login-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.account-login-head strong {
  font-size: 0.9rem;
  font-weight: 760;
}

.account-login-head span {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.account-login-head span.is-connected {
  color: rgba(150, 219, 188, 0.86);
}

#accountLogoutBtn {
  justify-self: end;
  min-height: 34px;
  padding: 6px 14px;
  font-size: 0.86rem;
}

.account-login-form {
  display: grid;
  gap: 9px;
}

.account-login-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.account-login-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
}

.account-login-form menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
}

.account-invite-welcome {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
}

.account-invite-welcome h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 760;
}

.account-invite-welcome-copy {
  margin: 0;
  line-height: 1.45;
}

.field-hint,
.invite-post-signup-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.account-email-verified-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0 8px;
  padding: 18px 16px;
  border: 1px solid rgba(139, 224, 188, 0.28);
  border-radius: 16px;
  background: rgba(139, 224, 188, 0.08);
}

.account-email-verified-panel[hidden] {
  display: none;
}

.account-email-verified-panel h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 780;
}

.account-email-verified-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.profile-invite-welcome {
  margin-bottom: 8px;
}

.profile-invite-welcome h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 760;
}

.home-screen-install-dialog {
  width: min(520px, calc(100vw - 28px));
}

.home-screen-install-dialog form,
.app-tour-offer-dialog form {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(111, 196, 168, 0.18), transparent 38%),
    var(--panel);
}

.onboarding-dialog-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid rgba(126, 213, 182, 0.38);
  border-radius: 16px;
  background: rgba(111, 196, 168, 0.14);
  color: #a8e5d0;
  font-size: 25px;
  font-weight: 800;
}

.collection-dialog-quick-actions {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.collection-dialog-quick-label {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.collection-dialog-quick-hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.collection-dialog-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 14px;
}

.home-screen-install-dialog h2 {
  margin: 0 0 8px;
}

.home-screen-install-lead {
  margin: 0 0 14px;
  line-height: 1.45;
}

.home-screen-install-steps {
  display: grid;
  gap: 8px;
}

.home-screen-install-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.home-screen-install-step-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(111, 196, 168, 0.14);
  color: #a8e5d0;
  font-weight: 800;
}

.home-screen-install-step strong,
.home-screen-install-step small {
  display: block;
}

.home-screen-install-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.home-screen-install-note {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.home-screen-install-dialog menu {
  margin-top: 16px;
}

:root[data-account-locked="true"] body > *:not(#accessDialog) {
  visibility: hidden;
  pointer-events: none;
}

:root[data-account-locked="true"] .access-dialog {
  width: min(760px, calc(100vw - 42px));
  max-width: 760px;
  padding: 42px 44px;
  border-color: rgba(111, 151, 157, 0.28);
  border-radius: 32px;
  background:
    radial-gradient(circle at 16% 4%, rgba(82, 132, 124, 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(45, 78, 92, 0.18), transparent 38%),
    linear-gradient(180deg, #0c2530 0%, #09202b 48%, #071923 100%) !important;
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(187, 217, 221, 0.07);
  text-align: left;
}

:root[data-account-locked="true"] .access-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 18%, rgba(48, 103, 96, 0.23), transparent 34%),
    linear-gradient(180deg, #071923 0%, #0b2530 56%, #071720 100%);
  backdrop-filter: blur(0);
}

:root[data-account-locked="true"] .access-dialog .eyebrow {
  color: rgba(174, 196, 197, 0.72);
  margin-bottom: 4px;
  letter-spacing: 0.24em;
}

:root[data-account-locked="true"] .access-dialog h2 {
  max-width: 620px;
  margin: 0;
  color: rgba(221, 229, 228, 0.88);
  font-size: clamp(4.2rem, 8vw, 6.8rem);
  font-weight: 680;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

:root[data-account-locked="true"] .access-dialog #accessDialogExplanation {
  max-width: 560px;
  margin: 18px 0 30px;
  color: rgba(197, 212, 216, 0.74);
  font-size: 1.02rem;
}

:root[data-account-locked="true"] .account-login-panel {
  margin-top: 0;
  padding: 22px;
  border-color: rgba(134, 164, 174, 0.24);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(14, 45, 54, 0.84), rgba(9, 32, 42, 0.76));
}

:root[data-account-locked="true"] .account-login-head strong {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

:root[data-account-locked="true"] .account-login-head span {
  color: rgba(178, 198, 204, 0.66);
  font-size: 0.78rem;
}

:root[data-account-locked="true"] .account-login-form {
  gap: 14px;
}

:root[data-account-locked="true"] .account-login-form input {
  min-height: 48px;
  border-radius: 10px;
  background: rgba(94, 115, 126, 0.32);
  font-size: 1rem;
}

:root[data-account-locked="true"] .account-login-form label {
  gap: 7px;
  color: rgba(197, 212, 216, 0.70);
}

:root[data-account-locked="true"] .account-login-form menu {
  margin-top: 2px;
}

:root[data-account-locked="true"] .access-message {
  margin-top: 22px;
}

.access-role-panel[hidden] {
  display: none;
}

.access-role-panel > button {
  display: grid;
  gap: 4px;
  padding: 14px;
  text-align: left;
}

.access-role-panel > button span {
  color: var(--muted);
  font-size: 0.8rem;
}

.access-role-panel > button.is-selected {
  border-color: var(--accent);
  background: var(--selected);
}

.access-dialog {
  width: min(620px, calc(100vw - 40px));
  padding: 28px 30px 24px;
}

.access-dialog .eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  text-transform: none;
}

.access-dialog h2 {
  margin: 0 0 18px;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}

.account-profile-summary {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 0 12px;
}

.account-profile-role {
  display: grid;
  gap: 4px;
}

.account-profile-role span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-profile-role strong {
  color: var(--muted);
  font-size: 1.55rem;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.account-profile-role small {
  color: var(--muted);
  font-size: 0.82rem;
}

.account-profile-facts {
  display: grid;
  gap: 0;
  margin: -2px 0 0;
  border-top: 0;
}

.account-profile-facts div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 30%, transparent);
}

.account-profile-facts dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.account-profile-facts dd {
  margin: 0;
  color: var(--text);
}

.account-profile-facts dd span {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}

.account-profile-edit {
  justify-self: start;
}

.access-role-panel #accessLockNowBtn {
  display: block;
  margin-top: 8px;
  text-align: center;
}

.access-message {
  min-height: 1.3em;
  margin: 12px 0 0;
  color: var(--accent);
  font-weight: 700;
}

.access-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.access-dialog-footer button {
  min-height: 36px;
  padding: 7px 18px;
}

.access-dialog-footer button[hidden] {
  display: none;
}

.admin-invite-panel {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-invite-panel[hidden] {
  display: none;
}

.admin-invite-panel textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.account-invite-panel {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
}

.account-invite-panel[hidden] {
  display: none;
}

.account-invite-head {
  display: grid;
  gap: 3px;
}

.account-invite-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.account-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, 0.7fr);
  gap: 10px 12px;
  align-items: end;
}

.account-invite-form .account-invite-email {
  grid-column: 1 / -1;
}

.account-invite-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
}

.account-invite-form input,
.account-invite-form select,
.account-invite-panel textarea,
.invite-link-output input {
  width: 100%;
  box-sizing: border-box;
}

.account-invite-form input,
.account-invite-form select {
  min-height: 40px;
}

.account-invite-form button {
  grid-column: 1 / -1;
  justify-self: end;
  min-width: 0;
  min-height: 36px;
  padding: 7px 16px;
}

.account-invite-panel textarea {
  min-height: 64px;
  resize: vertical;
}

.invite-link-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.invite-link-output input {
  min-width: 0;
  min-height: 38px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--input-bg, var(--soft)) 88%, transparent);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
}

.invite-link-output input:focus {
  outline: none;
  box-shadow: none;
}

.invite-copy-button {
  display: grid;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 1.05rem;
}@media (hover: hover) {

.invite-copy-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--selected) 75%, transparent);
  color: var(--text);
}}

.profile-archive-grid {
  display: grid;
  gap: 12px;
}

.profile-archive-card > div {
  display: grid;
  gap: 6px;
}

.profile-archive-card h3,
.profile-archive-card p {
  margin: 0;
}

.venue-setup-dialog {
  width: min(820px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  overflow: auto;
}

.venue-setup-dialog h2 {
  margin: 0 0 8px;
}

.venue-setup-dialog .form-grid {
  margin-top: 18px;
}

.venue-organizer-fields {
  margin: 22px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.venue-organizer-fields legend {
  padding: 0 8px;
  color: var(--accent);
  font-weight: 800;
}

dialog.profile-onboarding-dialog {
  width: min(1040px, calc(100vw - 48px));
  max-height: min(92vh, 960px);
  min-height: 640px;
  box-sizing: border-box;
  padding: 52px 58px;
  overflow: auto;
  border-color: rgba(111, 143, 174, 0.35);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% -20%, rgba(103, 137, 171, 0.13), transparent 48%),
    var(--panel);
}

.profile-onboarding-dialog::backdrop {
  background: rgba(12, 18, 24, 0.68);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

#profileTypeStep {
  display: flex;
  min-height: 530px;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#profileTypeStep[hidden] {
  display: none;
}

.onboarding-welcome-brand p {
  margin: 0 0 2px;
  color: #718da9;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.onboarding-welcome-brand h1 {
  margin: 0;
  color: #7895b2;
  font-size: clamp(3.8rem, 8vw, 6.4rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

#profileTypeStep > h2 {
  margin: 34px 0 8px;
  color: var(--ink);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600;
}

.onboarding-welcome-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.profile-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 18px;
  margin-top: 38px;
}

.profile-type-grid button {
  display: grid;
  min-height: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(112, 145, 177, 0.42);
  border-radius: 22px;
  background: rgba(106, 139, 171, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}@media (hover: hover) {

.profile-type-grid button:hover,
.profile-type-grid button:focus-visible {
  border-color: rgba(126, 163, 198, 0.82);
  background: rgba(106, 139, 171, 0.13);
  transform: translateY(-2px);
}}

.profile-type-grid strong {
  color: #7895b2;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.onboarding-profile-form > h2 {
  margin-top: 14px;
}

.onboarding-profile-form .form-grid {
  margin-top: 18px;
}

.onboarding-profile-form > label {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

dialog.profile-onboarding-dialog.is-form-step {
  width: min(720px, calc(100vw - 32px));
  min-height: 0;
  max-height: calc(100dvh - 40px);
  margin-top: 20px;
  padding: 28px 32px;
  border-radius: 26px;
}

dialog.profile-onboarding-dialog.is-form-step[data-form-type="admin"] {
  width: min(560px, calc(100vw - 32px));
}

.profile-onboarding-dialog.is-form-step .onboarding-profile-form > h2 {
  margin: 8px 0 4px;
  font-size: 1.45rem;
}

.profile-later-hint {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.profile-onboarding-dialog.is-form-step .onboarding-profile-form .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 12px;
}

.profile-onboarding-dialog.is-form-step .onboarding-profile-form label {
  gap: 3px;
  font-size: 0.76rem;
}

.profile-onboarding-dialog.is-form-step .onboarding-profile-form input,
.profile-onboarding-dialog.is-form-step .onboarding-profile-form select,
.profile-onboarding-dialog.is-form-step .onboarding-profile-form textarea {
  min-height: 34px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: rgba(72, 94, 114, 0.16);
  box-shadow: none;
  font-size: 0.88rem;
}

.profile-onboarding-dialog.is-form-step .onboarding-profile-form input:focus,
.profile-onboarding-dialog.is-form-step .onboarding-profile-form select:focus,
.profile-onboarding-dialog.is-form-step .onboarding-profile-form textarea:focus {
  outline: 0;
  background: rgba(82, 111, 138, 0.24);
  box-shadow: inset 0 0 0 1px rgba(120, 149, 178, 0.24);
}

.profile-onboarding-dialog.is-form-step .venue-organizer-fields {
  margin-top: 18px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid rgba(120, 149, 178, 0.28);
  border-radius: 0;
  background: transparent;
}

.profile-form-section-title {
  margin: 14px 0 2px;
  color: #7895b2;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.venue-organizer-fields .profile-form-section-title {
  margin-top: 0;
}

.profile-onboarding-dialog.is-form-step menu {
  margin: 14px 0 0;
}

.profile-onboarding-dialog.is-form-step menu button {
  min-height: 36px;
  padding: 7px 12px;
}

.text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
}

@media (max-width: 700px) {
  dialog.profile-onboarding-dialog {
    width: calc(100vw - 20px);
    min-height: 0;
    padding: 36px 24px;
    border-radius: 28px;
  }

  dialog.profile-onboarding-dialog.is-form-step {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin-top: 8px;
    padding: 22px 18px;
    border-radius: 22px;
  }

  #profileTypeStep {
    min-height: 0;
  }

  .profile-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 28px;
  }

  .profile-type-grid button {
    min-height: 0;
    padding: 8px;
    border-radius: 16px;
  }

  .profile-type-grid strong {
    font-size: clamp(0.82rem, 4vw, 1.25rem);
  }
}

@media (max-width: 520px) {
  dialog.profile-onboarding-dialog.is-form-step .onboarding-profile-form .form-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-access-role="cafe"] .topbar > div:first-child {
  display: none;
}

:root[data-access-role="cafe"] .topbar {
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .access-lock-button {
    width: 100%;
  }
}

.cafe-player-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.cafe-player-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.cafe-player-header h2,
.cafe-now-playing h3,
.cafe-queue-heading h3 {
  margin: 0;
}

.cafe-mode-title {
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.cafe-venue-name {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.cafe-operation-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.cafe-operation-status .audio-dot {
  position: static;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #889089;
}

.cafe-operation-status .audio-dot.is-active {
  background: #3aa864;
  box-shadow: 0 0 0 4px rgba(58, 168, 100, 0.12);
}

.cafe-player-menu {
  position: relative;
}

.cafe-player-menu summary {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
}

.cafe-player-menu summary::-webkit-details-marker {
  display: none;
}

.cafe-player-menu > div {
  position: absolute;
  z-index: 5;
  top: 44px;
  right: 0;
  display: grid;
  width: 210px;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.cafe-player-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(260px, 1.1fr);
  min-height: 540px;
}

.cafe-now-playing {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: linear-gradient(145deg, var(--soft), var(--panel));
}

.cafe-artwork {
  display: grid;
  width: min(240px, 70vw);
  aspect-ratio: 1;
  margin-bottom: 24px;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(145deg, var(--accent), #173c34);
  box-shadow: 0 24px 48px rgba(24, 69, 57, 0.24);
  color: white;
  font-size: 6rem;
}

.cafe-now-playing h3 {
  max-width: 420px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.cafe-now-playing progress {
  width: 100%;
  margin: 28px 0 8px;
  accent-color: var(--accent);
}

.cafe-now-playing time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cafe-now-playing .playlist-transport {
  align-items: center;
  margin-top: 24px;
}

.cafe-now-playing .playlist-transport button {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
}

.cafe-now-playing .playlist-transport .cafe-primary-play {
  width: 62px;
  height: 62px;
  border-color: var(--accent);
  background: var(--accent);
  color: white;
  font-size: 1.45rem;
}

.cafe-player-message {
  min-height: 1.4em;
  margin: 20px 0 0;
}

.cafe-queue-panel {
  padding: 28px;
  border-left: 1px solid var(--line);
}

.cafe-playlist-picker {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.cafe-playlist-picker select {
  width: 100%;
  font-size: 1rem;
  text-transform: none;
}

.cafe-queue-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.cafe-queue-heading span {
  color: var(--muted);
  font-size: 0.76rem;
}

.cafe-queue-panel .playlist-track-list {
  max-height: 390px;
}

.cafe-monitor-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.82rem;
}

.cafe-monitor-banner.is-connected {
  color: #27794c;
}

.cafe-monitor-banner.is-warning {
  background: #fff6df;
  color: #855400;
}

@media (max-width: 800px) {
  .cafe-now-playing {
    padding: 26px 22px;
  }

  .cafe-artwork {
    width: min(200px, 100%);
  }

  .cafe-queue-panel {
    padding: 22px 18px;
  }

  .cafe-player-header {
    grid-template-columns: 1fr auto;
  }

  .cafe-operation-status {
    grid-column: 1;
    grid-row: 2;
  }

  .cafe-player-menu {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 540px) {
  .cafe-player-layout {
    grid-template-columns: 1fr;
  }

  .cafe-queue-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 720px) {

  .playlist-mode-view {
    padding: 14px;
  }
}

/* Live mode follows the light theme instead of retaining the dark stage palette. */
:root[data-theme="light"] .live-panel {
  background: linear-gradient(180deg, #e9ebea, #dde1df);
  border-color: #c8cdca;
  box-shadow: 0 18px 42px rgba(35, 55, 43, 0.12);
}

:root[data-theme="light"] .live-toolbar button {
  border-color: #cbd1cd;
  background: linear-gradient(180deg, #ffffff, #eef1ef);
  box-shadow: 0 5px 14px rgba(38, 62, 47, 0.08);
}@media (hover: hover) {

:root[data-theme="light"] .live-toolbar button:hover,
:root[data-theme="light"] .live-toolbar button:focus-visible {
  border-color: #9eb9ad;
  background: #edf6f1;
}}

:root[data-theme="light"] .live-toolbar button span {
  background: #e3f2eb;
}

:root[data-theme="light"] .live-toolbar {
  border-color: #d7ddd9;
  background: linear-gradient(180deg, rgba(250, 252, 251, 0.92), rgba(235, 240, 237, 0.88));
}

:root[data-theme="light"] #endConcertBtn {
  border-color: #e5b7b4;
  background: #fff5f4;
  color: #a52d27;
}

:root[data-theme="light"] .live-tracker-shell .concert-event-line {
  color: #65736b;
}

:root[data-theme="light"] .live-control-column .concert-event-name {
  color: rgba(42, 54, 50, 0.82);
}

:root[data-theme="light"] .live-control-column .concert-event-details {
  color: rgba(53, 65, 61, 0.68);
}

:root[data-theme="light"] .live-progress-tracker {
  border-color: #9aa9a3;
  background:
    linear-gradient(180deg, #bec9c3 0%, #dfe7e2 48%, #bac6c0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(72, 88, 82, 0.20),
    0 12px 28px rgba(45, 61, 54, 0.11);
}

:root[data-theme="light"] .live-progress-tracker:not(.is-duration-caution):not(.is-over-target-duration):not(.is-playback-mode):not(.is-plain-pause) .live-progress-ring {
  --ring-color: #35e878 !important;
}

:root[data-theme="light"] .live-progress-ring {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 6px 16px rgba(37, 65, 49, 0.14);
}

:root[data-theme="light"] .live-progress-tracker:not(.is-duration-caution):not(.is-over-target-duration):not(.is-playback-mode):not(.is-plain-pause) .live-progress-ring::before {
  filter: blur(8px);
  opacity: 0.86;
}

:root[data-theme="light"] .live-progress-ring::after {
  border-color: #9aa9a3;
  background: #b3c0ba;
}

:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-progress-ring {
  border-color: rgba(91, 109, 116, 0.20);
  background:
    conic-gradient(
      from -90deg,
      rgba(91, 109, 116, 0.18) 1turn,
      rgba(91, 109, 116, 0.18) 0
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 6px 14px rgba(37, 65, 49, 0.10);
}

:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-progress-ring span,
:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-progress-status.is-paused,
:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-progress-status.is-paused strong {
  color: rgba(128, 98, 39, 0.76);
  text-shadow: none;
}

:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-current-set-button,
:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-current-set-button span,
:root[data-theme="light"] .live-progress-tracker.is-plain-pause .live-current-set-button em {
  color: rgba(46, 59, 55, 0.72);
}

:root[data-theme="light"] .live-progress-meta {
  border-left-color: #d7e0da;
}

:root[data-theme="light"] .live-progress-meta .live-played-count,
:root[data-theme="light"] .live-progress-meta .live-played-count i {
  color: #4f8f6f;
}

:root[data-theme="light"] .live-progress-ring span,
:root[data-theme="light"] .live-set-duration > strong {
  color: #f2f6f4;
}

:root[data-theme="light"] .live-concert-duration > strong,
:root[data-theme="light"] .live-progress-meta .live-concert-duration > strong {
  color: rgba(46, 59, 55, 0.72);
}

:root[data-theme="light"] .live-progress-piece > strong {
  color: rgba(31, 43, 39, 0.82);
}

:root[data-theme="light"] .live-progress-ring small,
:root[data-theme="light"] .live-progress-meta small,
:root[data-theme="light"] .live-current-set-button,
:root[data-theme="light"] .live-current-set-button span,
:root[data-theme="light"] .live-current-set-button em {
  color: rgba(46, 59, 55, 0.72);
}

:root[data-theme="light"] .live-progress-tracker.is-duration-caution {
  border-color: #9aa9a3;
  background:
    linear-gradient(180deg, #bec9c3 0%, #dfe7e2 48%, #bac6c0 100%);
}

:root[data-theme="light"] .live-progress-tracker.is-over-target-duration {
  border-color: #9aa9a3;
  background:
    linear-gradient(180deg, #bec9c3 0%, #dfe7e2 48%, #bac6c0 100%);
}

:root[data-theme="light"] .live-progress-tracker.is-over-target-duration .live-progress-ring span {
  color: #fff6df;
}

:root[data-theme="light"] .pause-playback-panel {
  border-color: #dfbd68;
  background:
    radial-gradient(circle at 7% 50%, rgba(222, 170, 42, 0.14), transparent 25%),
    linear-gradient(135deg, #fffaf0, #f4ead1);
  box-shadow: 0 9px 22px rgba(96, 71, 18, 0.12);
}

:root[data-theme="light"] .pause-playback-panel strong {
  color: #493712;
}

:root[data-theme="light"] .pause-player-progress-row time {
  color: #746641;
}

:root[data-theme="light"] .pause-playback-actions button:not(.continue-concert-button) {
  background: #fff8e8;
  color: #76540b;
}

:root[data-theme="light"] .pause-playback-actions .continue-concert-button {
  background: #e7f5df;
  color: #306f27;
}

:root[data-theme="light"] .live-progress-tracker.is-playback-mode {
  border-color: #dfbd68;
  background:
    radial-gradient(circle at 14% 50%, rgba(222, 170, 42, 0.14), transparent 36%),
    linear-gradient(180deg, #fffaf0, #f4ead1);
}

:root[data-theme="light"] .live-tap-confirmation {
  border-color: #4dab45;
  background: rgba(239, 252, 235, 0.98);
  color: #213d1e;
  box-shadow: 0 0 28px rgba(61, 153, 51, 0.24);
}

:root[data-theme="light"] .live-tap-confirmation span {
  color: #3b9d34;
}

:root[data-theme="light"] .live-column {
  border-color: #cbd1cd;
  background: rgba(244, 246, 245, 0.9);
}

:root[data-theme="light"] .live-collections-header {
  border-color: #cbd1cd;
  background: rgba(244, 246, 245, 0.9);
}

:root[data-theme="light"] .live-collapsed-collection-context,
:root[data-theme="light"] .live-collection-list button,
:root[data-theme="light"] .live-work-row > button:first-child,
:root[data-theme="light"] .pdf-icon-button,
:root[data-theme="light"] .live-audio-button, :root[data-theme="light"] .play-along-button {
  border-color: #d9e1dc;
  background: #ffffff;
}@media (hover: hover) {

:root[data-theme="light"] .live-collection-list button:hover,
:root[data-theme="light"] .live-work-row > button:first-child:hover,
:root[data-theme="light"] .live-work-row > button:first-child:focus-visible,
:root[data-theme="light"] .pdf-icon-button:hover,
:root[data-theme="light"] .live-audio-button:hover, :root[data-theme="light"] .play-along-button:hover,
:root[data-theme="light"] .live-audio-button:focus-visible, :root[data-theme="light"] .play-along-button:focus-visible {
  border-color: #9fbdae;
  background: #edf6f1;
}}

:root[data-theme="light"] .live-collection-list button:not(.is-active) {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="light"] .live-collection-list button.is-active {
  border-color: rgba(37, 107, 90, 0.28);
  background: var(--selected);
}

:root[data-theme="light"] .live-work-row.is-current > button:first-child {
  border-color: rgba(79, 143, 111, 0.42);
  background: linear-gradient(90deg, rgba(143, 217, 173, 0.22), rgba(143, 217, 173, 0.08));
}

:root[data-theme="light"] .live-browser.is-pause-playlist .live-work-row > button:first-child {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="light"] .live-browser.is-pause-playlist .live-work-row.is-current > button:first-child {
  border-color: transparent;
  background: rgba(206, 163, 55, 0.14);
}

:root[data-theme="light"] .live-panel.is-pause-player-open .split {
  border-color: #d8b65f;
  background: linear-gradient(180deg, #f4ead1, #ece5d5);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141f2a;
  --ink: #eef2ed;
  --muted: #a8b5c0;
  --line: rgba(126, 157, 181, 0.34);
  --panel: #152330;
  --accent: #7ac7a7;
  --accent-2: #d0a466;
  --warn: #e0a24d;
  --selected: rgba(122, 199, 167, 0.22);
  --shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
  --glass-shadow: 0 28px 68px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --field: #13212d;
  --soft: rgba(122, 199, 167, 0.14);
  --header: rgba(144, 171, 194, 0.15);
  --glass-panel: rgba(20, 31, 42, 0.72);
  --glass-field: rgba(15, 26, 36, 0.66);
  --glass-soft: rgba(42, 66, 84, 0.28);
  --radius-control: 10px;
  --radius-panel: 24px;
  --radius-sheet: 32px;
  --radius-list: 10px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -8%, rgba(122, 199, 167, 0.18), transparent 34%),
    radial-gradient(circle at 86% 4%, rgba(143, 63, 82, 0.10), transparent 28%),
    linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% -12%, rgba(77, 139, 178, 0.20), transparent 34%),
    radial-gradient(circle at 84% 4%, rgba(122, 199, 167, 0.08), transparent 30%),
    radial-gradient(circle at 50% 96%, rgba(27, 80, 93, 0.14), transparent 38%),
    linear-gradient(180deg, #152330, #0f1a24);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.file-button {
  position: relative;
  isolation: isolate;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--glass-field);
  color: var(--ink);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  overflow: hidden;
}

button::before,
.file-button::before {
  display: none;
}@media (hover: hover) {

button:hover,
.file-button:hover {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
  box-shadow: none;
}}

.icon-button {
  width: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

#addCollectionBtn,
#newWorkBtn {
  min-height: 36px;
  border-radius: 10px;
  border-color: var(--line);
  background: var(--glass-field);
  font-weight: 750;
}

#addCollectionBtn {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

#newWorkBtn {
  padding: 0 11px;
}

.file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: rgba(7, 18, 26, 0.46);
  color: var(--ink);
  padding: 9px 10px;
  box-shadow: none;
}

textarea {
  resize: vertical;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 22px;
  margin-bottom: 2px;
}

h2 {
  font-size: 17px;
  margin-bottom: 12px;
}

h3 {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.topbar h1 {
  font-size: 18px;
  line-height: 1;
}

:root[data-theme="dark"] .topbar {
  background: #152330;
}

.topbar p,
.muted {
  color: var(--muted);
  margin-bottom: 0;
}

.topbar p {
  display: none;
}

.app-status-host {
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.app-status-host:empty {
  display: none;
}

.app-status-strip {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  /* Fixed height so the strip can never grow (1 -> 2 lines) and push the view
     down. Content is clipped to this height instead of expanding it. */
  height: 32px;
  box-sizing: border-box;
  overflow: hidden;
}

.app-status-strip p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  /* Reserve two lines so status text changes (1 line <-> 2 lines) never shift
     the library list vertically. */
  min-height: 2.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.app-status-host {
  /* Reserve the status strip's fixed height before it is injected, so the strip
     appearing after boot does not push the view down (the "Zucken"). */
  min-height: 32px;
}

#libraryView.is-active > .app-status-host {
  grid-column: 1 / -1;
  grid-row: 1;
}

#libraryView.is-active > .sidebar {
  grid-column: 1;
  grid-row: 2;
}

#libraryView.is-active > .work-area {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

#concertView.is-active > .app-status-host {
  flex: 0 0 auto;
}

#archiveView.is-active > .app-status-host {
  flex: 0 0 auto;
}

.topbar-brand-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tabs {
  display: flex;
  flex: 1;
  width: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 4px;
  gap: 4px;
  background: var(--panel);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tab {
  position: relative;
  border: 0;
  border-radius: 11px;
  flex: 1 1 0;
  min-width: 96px;
  min-height: 28px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#themeToggleBtn {
  flex: 0 0 auto;
  min-width: 56px;
}

.mobile-view-menu-button {
  display: none;
}

.tab::before {
  display: none;
}

.tab.is-active {
  border-radius: 13px;
  background:
    radial-gradient(120% 180% at 50% 50%, var(--selected) 0%, rgba(122, 199, 167, 0.18) 56%, rgba(122, 199, 167, 0.07) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 0 18px rgba(255, 255, 255, 0.025);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.035) 48%, rgba(255, 255, 255, 0.065) 69%, transparent 100%),
    radial-gradient(ellipse at 62% 18%, rgba(255, 255, 255, 0.08), transparent 42%);
  opacity: 0.36;
}

main {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.view {
  display: none;
  padding: 18px;
}

.view.is-active {
  display: block;
}

#libraryView.is-active {
  display: grid;
  grid-template-columns: clamp(240px, 26vw, 300px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 3px 12px;
  padding: 3px 18px 18px;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

#concertView.is-active {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 18px 18px;
  height: calc(100vh - 54px);
  min-height: 0;
  overflow: hidden;
}

#concertGrid {
  flex: 1;
  min-height: 0;
}

.live-panel {
  height: 100%;
  min-height: 0;
  position: relative;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-panel,
.work-area,
.event-form,
.live-panel,
.gema-layout,
.gema-view .event-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.event-form,
.gema-view .event-form {
  background: rgba(255, 255, 255, 0.055);
}

.sidebar-panel,
.work-area,
.event-form,
.live-panel,
.gema-layout,
.gema-view .event-form {
  padding: 14px;
}

.sidebar-panel {
  min-width: 0;
  overflow: hidden;
}

.live-panel {
  background: linear-gradient(180deg, rgba(16, 31, 43, 0.98), rgba(11, 23, 33, 0.98));
  border-color: rgba(122, 158, 183, 0.28);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
  padding: 8px;
}

.live-panel .panel-header {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 6px;
  padding: 0;
  background: transparent;
}

.live-panel .panel-header h2 {
  display: none;
}

.live-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: stretch;
  align-self: stretch;
  gap: 4px;
  height: 100%;
  padding: 4px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  overflow: visible;
}

.live-toolbar button {
  flex: none;
  min-height: 0;
  padding: 7px 9px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.live-toolbar button span {
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(122, 199, 167, 0.12);
}

#liveSearchToggleBtn span {
  font-size: 21px;
}

.live-overview-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 8px;
  min-height: 154px;
  margin: 3px 0 6px;
}

.live-control-column {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  height: 154px;
}

.live-control-column .concert-event-line {
  position: static;
  width: 100%;
  max-width: none;
  min-height: 18px;
  margin: 0 0 6px;
  padding: 0 3px;
  transform: none;
  text-align: right;
}

.live-control-column .live-toolbar {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.live-tracker-shell {
  position: relative;
  min-width: 0;
  min-height: 154px;
  height: 154px;
}

.live-tracker-shell .concert-event-line {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 10px;
  left: auto;
  max-width: 52%;
  margin: 0;
  transform: none;
  color: rgba(208, 222, 232, 0.68);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-tracker-shell .live-progress-tracker.is-large .live-progress-status {
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
}@media (hover: hover) {

.live-toolbar button:hover,
.live-toolbar button:focus-visible {
  border-color: rgba(122, 158, 183, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055));
  color: var(--ink);
}}

.live-toolbar button.is-active {
  border-color: rgba(122, 199, 167, 0.58);
  background: rgba(122, 199, 167, 0.15);
}

#endConcertBtn {
  border-color: rgba(122, 158, 183, 0.22);
  color: #ff6f6f;
}

#endConcertBtn span {
  color: #ff4c4c;
}@media (hover: hover) {

#endConcertBtn:hover,
#endConcertBtn:focus-visible {
  border-color: rgba(122, 199, 167, 0.40);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055));
  color: #ff8a8a;
}}

#libraryView .work-area {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#libraryView .work-area::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

#libraryView .library-menu-bar,
#libraryView .library-meta-bar,
#libraryView .library-active-title {
  flex: 0 0 auto;
}

.library-menu-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.library-menu-bar-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.library-menu-action {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 8px;
  background: transparent;
  color: rgba(167, 185, 199, 0.74);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: none;
}@media (hover: hover) {

.library-menu-action:hover,
.library-menu-action:focus-visible {
  border-color: rgba(122, 158, 183, 0.28);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(210, 224, 232, 0.88);
}}

.library-search {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 180px;
  max-width: 280px;
  flex: 1 1 220px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
}

.library-search span {
  color: rgba(167, 185, 199, 0.82);
  font-size: 21px;
  line-height: 1;
}

.library-search input[type="search"] {
  min-height: 24px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font-size: 12px;
}

.library-search input[type="search"]:focus {
  outline: none;
  box-shadow: none;
}

.live-active-collection-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 0 2px 8px;
}

.live-active-collection-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(218, 230, 236, 0.9);
  font-size: 13px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.live-active-collection-title small {
  flex: 0 0 auto;
  color: rgba(164, 184, 196, 0.74);
  font-size: 11px;
  font-weight: 650;
}

:root[data-theme="light"] .live-active-collection-title strong {
  color: rgba(34, 47, 52, 0.84);
}

:root[data-theme="light"] .live-active-collection-title small {
  color: rgba(42, 55, 61, 0.58);
}

.live-search-helper-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

.live-inline-search {
  width: 100%;
  max-width: none;
  min-height: 32px;
  margin: 0;
  flex: 0 0 auto;
  padding-inline: 12px;
}

.live-inline-search input[type="search"] {
  font-size: 14px;
}

.live-helper-menu {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.live-helper-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(210, 224, 232, 0.82);
  font-size: 14px;
  box-shadow: none;
}

.live-helper-sort-icon {
  width: 15px;
  height: 15px;
  display: block;
}@media (hover: hover) {

.live-helper-button:hover,
.live-helper-button:focus-visible,
.live-helper-button.is-active {
  border-color: rgba(122, 199, 167, 0.28);
  background: rgba(122, 199, 167, 0.12);
  color: rgba(232, 241, 246, 0.92);
}}

.live-helper-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 3px;
  width: min(280px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 14px;
  background: rgba(12, 28, 39, 0.96);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

.live-helper-popover-title {
  margin: 0 2px 4px;
  padding: 2px 6px 6px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-helper-popover[hidden] { display: none; }

.live-helper-popover button {
  justify-content: flex-start;
  width: 100%;
  min-height: 32px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(210, 224, 232, 0.82);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}@media (hover: hover) {

.live-helper-popover button:hover,
.live-helper-popover button:focus-visible,
.live-helper-popover button.is-active {
  background: rgba(122, 199, 167, 0.12);
  color: rgba(232, 241, 246, 0.94);
}}

.live-helper-popover-divider {
  height: 1px;
  margin: 4px 2px;
  background: rgba(122, 158, 183, 0.16);
}

.live-helper-verlauf-btn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(210, 224, 232, 0.82);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  box-shadow: none;
}

.live-helper-verlauf-btn .setlist-assistant-curve-svg {
  width: 34px;
  height: 22px;
  display: block;
  color: rgba(168, 216, 196, 0.88);
}

.live-helper-verlauf-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.live-helper-verlauf-copy strong {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}@media (hover: hover) {

.live-helper-verlauf-btn:hover,
.live-helper-verlauf-btn:focus-visible,
.live-helper-verlauf-btn.is-active {
  background: rgba(122, 199, 167, 0.12);
  color: rgba(232, 241, 246, 0.94);
}}

.live-helper-verlauf-btn.is-active .setlist-assistant-curve-svg {
  color: var(--accent);
}

.live-suggestion-strip {
  margin: 0 0 8px;
  padding: 0;
  min-width: 0;
}

.live-suggestion-strip[hidden] {
  display: none !important;
}

.live-suggestion-expanded {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, #000 12%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent),
    0 0 22px rgba(122, 199, 167, 0.08);
}

.live-suggestion-layout {
  display: grid;
  grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
}

.live-suggestion-head-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-self: center;
}

.live-suggestion-kicker {
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow:
    0 0 12px rgba(122, 199, 167, 0.28),
    0 0 24px rgba(122, 199, 167, 0.12);
}

.live-suggestion-subtitle {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.live-suggestion-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-suggestion-results {
  flex: 1 1 auto;
  min-width: 0;
}

.live-suggestion-result-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-suggestion-result-line .live-suggestion-work-row {
  flex: 1 1 auto;
  min-width: 0;
}

.live-suggestion-directions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex: 0 0 auto;
}

.live-suggestion-next-item {
  margin-left: 2px;
}

.live-suggestion-next .live-suggestion-direction-icon {
  font-size: 15px;
  font-weight: 700;
  color: rgba(168, 188, 210, 0.92);
}@media (hover: hover) {

.live-suggestion-next:hover .live-suggestion-direction-icon,
.live-suggestion-next:focus-visible .live-suggestion-direction-icon {
  color: var(--ink);
}}

.live-suggestion-direction-item {
  display: grid;
  gap: 4px;
  justify-items: center;
  width: 34px;
}

.live-suggestion-direction {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
}

.live-suggestion-direction-icon {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: rgba(122, 199, 167, 0.88);
}

.live-suggestion-direction-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
}

.live-suggestion-direction-item:has(.live-suggestion-direction.is-active) .live-suggestion-direction-label {
  color: var(--ink);
}@media (hover: hover) {

.live-suggestion-direction:hover,
.live-suggestion-direction:focus-visible {
  border-color: rgba(122, 199, 167, 0.28);
  color: var(--ink);
}}

.live-suggestion-direction.is-active {
  border-color: rgba(122, 199, 167, .38);
  background: rgba(122, 199, 167, .1);
  color: var(--ink);
}

.live-suggestion-direction.is-active .live-suggestion-direction-icon {
  color: var(--ink);
}

.live-suggestion-dismiss {
  flex: 0 0 auto;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}@media (hover: hover) {

.live-suggestion-dismiss:hover,
.live-suggestion-dismiss:focus-visible {
  border-color: rgba(122, 158, 183, .34);
  color: var(--ink);
}}

.live-suggestion-results {
  min-width: 0;
}

.live-suggestion-work-row {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.live-suggestion-empty {
  margin: 0;
  padding: 8px 2px;
  font-size: 12px;
  line-height: 1.35;
}

.live-suggestion-reopen {
  font-size: 14px;
  line-height: 1;
}@media (hover: hover) {

.live-suggestion-reopen:hover,
.live-suggestion-reopen:focus-visible {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--glass-soft) 45%, transparent);
}}

@media (max-width: 720px) {
  .live-suggestion-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title dismiss"
      "main main";
    gap: 8px;
  }

  .live-suggestion-head-copy {
    grid-area: title;
  }

  .live-suggestion-body {
    grid-area: main;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .live-suggestion-dismiss {
    grid-area: dismiss;
    align-self: start;
  }

  .live-suggestion-directions {
    justify-content: flex-start;
  }

  .live-suggestion-result-line {
    flex: 1 1 100%;
  }
}

.live-work-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 10px;
  margin-left: 2px;
}

.live-work-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 7px rgba(57, 255, 20, 0.92), 0 0 16px rgba(57, 255, 20, 0.54);
}

.live-work-played-mark {
  flex: 0 0 auto;
  color: rgba(122, 199, 167, 0.52);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.live-work-status-indicator.is-played {
  gap: 1px;
}

.live-work-row.is-played-in-concert > button:first-child .live-work-played-mark {
  color: rgba(122, 199, 167, 0.58);
}

.live-setlist-panel {
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
}

.live-setlist-panel[hidden] {
  display: none !important;
}

.live-setlist-header h3 {
  margin: 0;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-setlist {
  display: grid;
  gap: 4px;
  max-height: min(34vh, 220px);
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.live-work-rating-prompt {
  display: block;
  margin: 8px 0;
  padding: 5px 10px;
  border: 1px solid rgba(122, 199, 167, 0.28);
  border-radius: 12px;
  background: rgba(122, 199, 167, 0.08);
}

.live-work-rating-prompt[hidden] { display: none; }

.live-rating-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
}

.live-rating-head {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  flex: 1 1 12rem;
  min-width: 0;
}

.live-rating-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.live-rating-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.2;
  min-width: 0;
}

.live-rating-question {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
}

.live-rating-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.live-rating-actions button,
.live-rating-skip-only {
  min-width: 30px;
  min-height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.live-good-version-control {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 4px 6px;
  flex: 0 1 auto;
  max-width: 11rem;
}

.live-good-version-heart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(201, 120, 140, 0.4);
  border-radius: 999px;
  background: transparent;
  color: rgba(196, 84, 110, 0.9);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.live-good-version-heart-btn.is-marked {
  border-color: rgba(196, 84, 110, 0.62);
  background: rgba(196, 84, 110, 0.14);
  color: #f3c4ce;
}@media (hover: hover) {

.live-good-version-heart-btn:hover,
.live-good-version-heart-btn:focus-visible {
  border-color: rgba(196, 84, 110, 0.72);
}}

.live-good-version-hint {
  flex: 1 1 4.5rem;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
}

.successful-versions-overview {
  display: grid;
  gap: 14px;
  align-content: start;
}

.successful-versions-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.successful-versions-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.successful-versions-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.successful-versions-copy strong {
  color: var(--ink);
  font-size: 16px;
}

.successful-versions-copy small {
  color: var(--muted);
  font-size: 13px;
}

.successful-versions-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.successful-versions-actions button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
}

.successful-versions-remove {
  border-color: rgba(196, 84, 110, 0.4);
  color: #f3c4ce;
}

.successful-versions-no-audio {
  color: var(--muted);
  font-size: 13px;
}

.work-classification-workspace {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.work-classification-hero,
.classification-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(15, 31, 41, 0.68);
}

.work-classification-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

.work-classification-hero > div:first-child { display: grid; gap: 4px; }
.work-classification-hero span,
.classification-work-title small { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.work-classification-hero h3 { margin: 0; color: var(--ink); font-size: 25px; }
.work-classification-hero p { margin: 0; color: var(--muted); }
.classification-progress { min-width: 150px; text-align: right; }
.classification-progress strong { display: block; color: var(--ink); font-size: 28px; }
.classification-progress span { color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }

.classification-hero-actions {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.style-collection-entry-btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 12px;
  border-color: rgba(122, 199, 167, 0.42);
  background: rgba(122, 199, 167, 0.12);
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}@media (hover: hover) {

.style-collection-entry-btn:hover,
.style-collection-entry-btn:focus-visible {
  border-color: rgba(122, 199, 167, 0.62);
  background: rgba(122, 199, 167, 0.2);
}}

.style-collection-builder-hero {
  align-items: start;
}

.style-collection-builder-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

.style-collection-builder-actions button {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 12px;
}

.style-collection-empty-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.style-collection-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.style-collection-preview-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.style-collection-preview-index {
  width: 24px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.style-collection-preview-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.style-collection-preview-copy strong {
  color: var(--ink);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-collection-preview-copy span {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-collection-preview-controls {
  display: inline-flex;
  gap: 4px;
}

.style-collection-preview-controls button {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
}

.style-collection-preview-controls button[data-style-collection-remove] {
  color: #9f6b67;
}

.style-collection-name-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.style-collection-name-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.style-collection-name-field input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--glass-field);
  color: var(--ink);
  font: inherit;
}

.style-collection-save-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.classification-work-browser {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(15, 31, 41, .58);
}
.classification-work-browser > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.classification-work-browser > header > div { display: grid; gap: 3px; }
.classification-work-browser > header small { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.classification-work-browser > header strong { color: var(--ink); font-size: 17px; }
.classification-work-browser > header > span { color: var(--muted); font-size: 12px; }
.classification-work-tools { display: grid; gap: 10px; }
.classification-work-tools > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-strong);
  color: var(--muted);
}
.classification-work-tools > label > span,
.review-assistant-search > span {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.classification-work-tools input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.work-suggestion-filter-controls {
  display: grid;
  gap: 10px;
}

.work-suggestion-repertoire-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
}

.work-suggestion-repertoire-prefix {
  color: var(--muted);
}

.work-suggestion-repertoire-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.work-suggestion-repertoire-select {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.3;
  padding: 2px 16px 2px 0;
  cursor: pointer;
}

.work-suggestion-repertoire-select:focus {
  outline: none;
}

.work-suggestion-repertoire-caret {
  position: absolute;
  right: 0;
  color: var(--muted);
  font-size: 11px;
  pointer-events: none;
}

.work-suggestion-play-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-suggestion-play-filters button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 12px;
}

.work-suggestion-play-filters button.is-active {
  border-color: rgba(122, 199, 167, .45);
  background: rgba(122, 199, 167, .12);
  color: var(--accent);
}

.work-suggestion-composer-select {
  display: grid;
  gap: 8px;
  max-width: min(100%, 360px);
}

.work-suggestion-composer-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
}

.work-suggestion-composer-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.work-suggestion-composer-select select {
  min-height: 40px;
  min-width: min(100%, 320px);
  padding: 8px 12px;
  border-radius: 10px;
}
.classification-suggestions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.classification-suggestions button { display: grid; gap: 3px; min-width: 0; min-height: 62px; padding: 10px 12px; border-radius: 12px; text-align: left; }
.classification-suggestions button strong,
.classification-suggestions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classification-suggestions button strong { color: var(--ink); font-size: 13px; }
.classification-suggestions button span { color: var(--muted); font-size: 11px; }
.classification-suggestions button.is-active { border-color: rgba(122, 199, 167, .5); background: rgba(122, 199, 167, .16); }
.classification-suggestions > p { grid-column: 1 / -1; margin: 4px 0; color: var(--muted); font-size: 12px; }

.classification-card { overflow: hidden; }
.classification-card > section,
.classification-work-title,
.classification-card-footer { padding: 20px 24px; }
.classification-card > section {
  display: grid;
  gap: 14px;
}
.classification-card > section + section,
.classification-card > section:first-of-type,
.classification-card-footer { border-top: 1px solid var(--line); }
.classification-work-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.classification-work-title-copy { display: grid; gap: 3px; min-width: 0; }
.classification-work-title strong { color: var(--ink); font-size: 22px; }
.classification-work-title span { color: var(--muted); }
.classification-work-media {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.classification-work-media-btn {
  display: grid;
  place-items: center;
  width: 52px;
  min-width: 52px;
  min-height: 42px;
  padding: 0;
  border-radius: 12px;
}
.classification-work-audio-btn {
  font-size: 16px;
  line-height: 1;
}
.classification-work-media-btn.is-missing-asset {
  opacity: 0.42;
  cursor: not-allowed;
}
.classification-card h4 { margin: 0; color: var(--ink); font-size: 15px; }
.classification-tag-section { display: grid; gap: 10px; }
.classification-tag-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.classification-multi-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}
.classification-single-hint {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}
.classification-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.classification-next-work-btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border-color: rgba(122, 199, 167, .42);
  background: rgba(122, 199, 167, .14);
  color: var(--accent);
  font-weight: 700;
}@media (hover: hover) {
.classification-next-work-btn:hover,
.classification-next-work-btn:focus-visible {
  border-color: rgba(122, 199, 167, .58);
  background: rgba(122, 199, 167, .22);
  color: var(--ink);
}}
.classification-save-state { color: var(--muted); font-size: 12px; }
.classification-import-origin {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.classification-work-title-copy .classification-import-origin {
  margin-top: 2px;
}
.classification-rating-row,
.classification-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.classification-rating-row button,
.classification-chips button {
  min-height: 42px;
  padding: 8px 13px;
  border-radius: 12px;
  color: var(--muted);
}
.classification-card .classification-rating-row,
.work-classification-workspace .classification-rating-row {
  gap: 6px;
}
.classification-card .classification-rating-row button,
.work-classification-workspace .classification-rating-row button {
  min-height: 36px;
  min-width: 36px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 22, 31, .18);
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
}
.classification-card .classification-rating-row button[data-classification-rating="0"],
.work-classification-workspace .classification-rating-row button[data-classification-rating="0"] {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
}
.classification-card .classification-rating-row button.is-active,
.work-classification-workspace .classification-rating-row button.is-active {
  border-color: rgba(122, 199, 167, .5);
  background: rgba(122, 199, 167, .18);
  color: var(--accent);
}
.classification-card .classification-rating-row.is-enjoyment-rating button.is-active,
.work-classification-workspace .classification-rating-row.is-enjoyment-rating button.is-active {
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .16);
  color: #eab308;
}
.classification-card .classification-rating-row.is-playing-quality button.is-active,
.work-classification-workspace .classification-rating-row.is-playing-quality button.is-active {
  border-color: rgba(96, 165, 250, .55);
  background: rgba(96, 165, 250, .16);
  color: #60a5fa;
}
.classification-rating-row button.is-active,
.classification-chips button.is-active {
  border-color: rgba(122, 199, 167, .5);
  background: rgba(122, 199, 167, .18);
  color: var(--accent);
}
.classification-rating-row.is-enjoyment-rating button.is-active {
  border-color: rgba(234, 179, 8, .55);
  background: rgba(234, 179, 8, .16);
  color: #eab308;
}
.classification-rating-row.is-playing-quality button.is-active,
.review-playing-quality.is-playing-quality button.is-active {
  border-color: rgba(96, 165, 250, .55);
  background: rgba(96, 165, 250, .16);
  color: #60a5fa;
}
.playing-quality-stars.is-playing-quality {
  color: #60a5fa;
}
.classification-slider-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.classification-slider-heading strong { color: var(--accent); font-size: 13px; }
.classification-energy { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.classification-energy input { width: 100%; accent-color: var(--accent); }

.classification-spielqualitaet-section {
  display: grid;
  gap: 14px;
  padding-top: 24px;
  border-top: 2px solid rgba(122, 199, 167, .38);
  background: linear-gradient(
    180deg,
    rgba(122, 199, 167, 0.02) 0%,
    rgba(122, 199, 167, 0.07) 42%,
    rgba(122, 199, 167, 0.13) 100%
  );
  scroll-margin-top: 12px;
}

:root[data-theme="light"] .classification-spielqualitaet-section {
  background: linear-gradient(
    180deg,
    rgba(122, 199, 167, 0.025) 0%,
    rgba(122, 199, 167, 0.06) 42%,
    rgba(122, 199, 167, 0.1) 100%
  );
}
.spielqualitaet-rubrik-assistant {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(8, 22, 31, .18);
  animation: spielqualitaetAssistantSlideIn .24s ease-out;
}
@keyframes spielqualitaetAssistantSlideIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.spielqualitaet-rubrik-assistant-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.spielqualitaet-rubrik-assistant-title {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
}
.spielqualitaet-rubrik-assistant-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}@media (hover: hover) {
.spielqualitaet-rubrik-assistant-close:hover,
.spielqualitaet-rubrik-assistant-close:focus-visible {
  color: var(--ink);
  border-color: rgba(122, 199, 167, .35);
  background: rgba(122, 199, 167, .1);
}}
.spielqualitaet-rubrik-assistant-work-title {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--ink);
}
.spielqualitaet-rubrik-assistant-work-title span {
  color: var(--muted);
  font-size: 13px;
}
.review-assistant-work-browser {
  display: grid;
  gap: 10px;
}
.review-assistant-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 22, 31, .18);
  color: var(--muted);
}
.review-assistant-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.review-assistant-suggestions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.review-assistant-suggestions button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
}
.review-assistant-suggestions button strong,
.review-assistant-suggestions button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-assistant-suggestions button strong { color: var(--ink); font-size: 13px; }
.review-assistant-suggestions button span { color: var(--muted); font-size: 11px; }
.review-assistant-suggestions button.is-active {
  border-color: rgba(96, 165, 250, .5);
  background: rgba(96, 165, 250, .14);
}
.review-assistant-suggestions button.is-marked {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .22);
}
.review-assistant-suggestions > p {
  grid-column: 1 / -1;
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
}
.classification-spielqualitaet-heading {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.review-focus-spielqualitaet-panel {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(122, 199, 167, .28);
  border-radius: 16px;
  background: rgba(8, 22, 31, .12);
}
.classification-jump-playing-quality {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.classification-spielqualitaet-section .classification-field-hint,
.spielqualitaet-rubrik-assistant .classification-field-hint,
.classification-review-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.classification-review-hint {
  color: var(--muted);
  max-width: 52ch;
}
.classification-review-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 22, 31, .22);
  color: var(--ink);
  font-weight: 650;
  justify-self: start;
}
.classification-review-toggle.is-active {
  border-color: rgba(122, 199, 167, .55);
  background: rgba(122, 199, 167, .16);
  color: var(--accent);
}

.review-glasses-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.review-glasses-icon-btn {
  width: 22px;
  height: 22px;
}
.review-glasses-icon-toggle {
  width: 26px;
  height: 26px;
}
.review-mark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.review-workspace,
.review-focus-workspace {
  display: grid;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.review-header,
.review-focus-header {
  display: grid;
  gap: 8px;
}
.review-header-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.review-assistant-open-btn {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.review-assistant-open-btn.is-active {
  border-color: rgba(122, 199, 167, .45);
  background: rgba(122, 199, 167, .12);
  color: var(--accent);
}
.review-header h2,
.review-focus-title-block h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
}
.review-header p,
.review-header small,
.review-focus-quality > span {
  margin: 0;
  color: var(--muted);
}
.review-sort-bar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.review-sort-bar select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
}
.review-list { display: grid; gap: 8px; }
.review-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 22, 31, .18);
}
.review-list-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.review-list-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.review-list-open strong {
  color: var(--ink);
  font-size: 17px;
}
.review-list-quality-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.review-list-quality-row .classification-rating-row button {
  min-height: 32px;
  min-width: 32px;
  padding: 4px 8px;
  font-size: 11px;
}
.review-list-quality-label,
.review-list-quality,
.playing-quality-stars {
  color: var(--muted);
  font-size: 13px;
}
.review-media-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.review-media-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--muted);
}
.review-media-btn.has-asset { color: var(--accent); }
.review-media-btn.is-missing-asset { opacity: .72; }@media (hover: hover) {
.review-media-btn.is-missing-asset:hover,
.review-media-btn.is-missing-asset:focus-visible {
  opacity: 1;
  border-color: rgba(122, 199, 167, .35);
  background: rgba(122, 199, 167, .1);
  color: var(--accent);
}}
.review-mark-btn.is-active {
  border-color: rgba(122, 199, 167, .55);
  background: rgba(122, 199, 167, .16);
  color: var(--accent);
}
.review-goto-classification-btn,
.review-open-pdf-primary,
.review-open-audio-primary {
  justify-self: start;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
}
.review-focus-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.review-focus-back {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
}
.review-playing-quality {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.review-playing-quality button {
  min-height: 34px;
  min-width: 34px;
  padding: 4px 8px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
}
.review-playing-quality button.is-active {
  border-color: rgba(96, 165, 250, .55);
  background: rgba(96, 165, 250, .16);
  color: #60a5fa;
}
.review-focus-body,
.review-no-pdf,
.review-pdf-empty {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 22, 31, .14);
}
.review-focus-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.review-removed-notice,
.pdf-review-removed-notice {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(122, 199, 167, .12);
  color: var(--muted);
  font-size: 13px;
}
.pdf-review-toolbar {
  display: grid;
  gap: 8px;
  padding: 10px 12px 0;
}
.pdf-review-toolbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.pdf-review-quality .classification-rating-row button {
  min-height: 30px;
  min-width: 30px;
  padding: 2px 6px;
  font-size: 11px;
}
.pdf-review-back,
.pdf-review-nav button {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--muted);
}
.pdf-review-title {
  color: var(--ink);
  font-size: 16px;
}
.pdf-review-nav {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.pdf-viewer-dialog.is-review-pdf .pdf-viewer-bar .pdf-title-group,
.pdf-viewer-dialog.is-review-pdf .pdf-viewer-bar .pdf-viewer-status,
.pdf-viewer-dialog.is-review-pdf #pdfLiveTracker,
.pdf-viewer-dialog.is-review-pdf #pdfCollectionToggleBtn,
.pdf-viewer-dialog.is-review-pdf #pdfAddToSetlistBtn {
  display: none;
}
.pdf-viewer-dialog.is-review-pdf .pdf-stage {
  min-height: calc(100vh - 180px);
}
.review-pdf-empty {
  position: absolute;
  inset: 0;
  place-content: center;
  text-align: center;
  background: rgba(8, 22, 31, .72);
  z-index: 2;
}

.classification-community-card {
  display: grid;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(122, 199, 167, .28);
  border-radius: 20px;
  background: rgba(122, 199, 167, .07);
}

.classification-community-card > div:first-child,
.classification-community-card header > div { display: grid; gap: 4px; }
.classification-community-card small { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.classification-community-card strong { color: var(--ink); font-size: 19px; }
.classification-community-card > div > span,
.classification-community-card header > span { color: var(--muted); font-size: 12px; }
.classification-community-card header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.classification-community-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.classification-community-metrics > div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(8, 22, 31, .28);
}
.classification-community-metrics span { color: var(--muted); font-size: 12px; }
.classification-community-metrics strong { font-size: 18px; }
.classification-community-card section { display: grid; gap: 8px; }
.classification-community-card h4 { margin: 0; color: var(--ink); font-size: 13px; }
.classification-community-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.classification-community-tags span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
}
.classification-community-tags b { color: var(--accent); }
.classification-community-tags em { color: var(--muted); font-size: 12px; font-style: normal; }

@media (max-width: 760px) {
  .live-rating-head {
    flex: 1 1 100%;
  }

  .live-rating-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }

  .live-good-version-control {
    max-width: none;
  }
  .work-classification-hero { align-items: flex-start; }
  .classification-progress { min-width: 110px; }
  .classification-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-assistant-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classification-card > section,
  .classification-work-title,
  .classification-card-footer { padding: 17px; }
  .classification-community-card { padding: 17px; }
}

@media (max-width: 520px) {
  .work-classification-hero { display: grid; padding: 18px; }
  .classification-progress { text-align: left; }
  .classification-energy { grid-template-columns: 1fr; gap: 7px; }
  .classification-community-card header { display: grid; }
  .classification-community-metrics { grid-template-columns: 1fr; }
  .classification-work-browser > header { display: grid; align-items: start; }
  .classification-suggestions { grid-template-columns: 1fr; }
  .review-assistant-suggestions { grid-template-columns: 1fr; }
}

:root[data-theme="light"] .live-helper-button {
  border-color: rgba(62, 85, 92, 0.18);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(34, 47, 52, 0.68);
}@media (hover: hover) {

:root[data-theme="light"] .live-helper-button:hover,
:root[data-theme="light"] .live-helper-button:focus-visible,
:root[data-theme="light"] .live-helper-button.is-active {
  border-color: rgba(55, 139, 105, 0.28);
  background: rgba(122, 199, 167, 0.16);
  color: rgba(28, 45, 49, 0.86);
}}

:root[data-theme="light"] .live-helper-popover {
  border-color: rgba(62, 85, 92, 0.18);
  background: rgba(246, 250, 248, 0.97);
  box-shadow: 0 18px 34px rgba(38, 58, 65, 0.16);
}

:root[data-theme="light"] .live-helper-popover button { color: rgba(34, 47, 52, 0.76); }@media (hover: hover) {

:root[data-theme="light"] .live-helper-popover button:hover,
:root[data-theme="light"] .live-helper-popover button:focus-visible,
:root[data-theme="light"] .live-helper-popover button.is-active {
  background: rgba(122, 199, 167, 0.16);
  color: rgba(28, 45, 49, 0.9);
}}

#libraryView .sidebar {
  align-self: stretch;
  min-height: 0;
  max-height: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#libraryView .sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

#libraryView .sidebar-panel,
#libraryView .collection-section,
#libraryView .auto-list-section {
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

#libraryView .collection-section .panel-header h2,
#libraryView .auto-list-section h2 {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.35;
  padding-top: 3px;
  padding-bottom: 1px;
  overflow: visible;
}

#libraryView .collection-section .panel-header {
  overflow: visible;
}

#libraryView .collection-section {
  padding: 12px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

#libraryView .collection-section.is-collection-drag-over {
  border-color: rgba(122, 199, 167, 0.72);
  background: rgba(122, 199, 167, 0.1);
}

#libraryView .collection-section .collection-list:empty::after {
  content: "Noch keine Sammlungen";
  display: block;
  padding: 7px 10px 3px;
  color: var(--muted);
  font-size: 11px;
}

#libraryView .collection-list,
#libraryView .auto-list {
  align-content: start;
  height: auto;
  max-height: none;
  overflow: visible;
}

#libraryView .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#libraryView .table-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  #libraryView .table-wrap {
    scrollbar-width: auto;
    scrollbar-color: rgba(122, 158, 183, 0.62) transparent;
  }

  #libraryView .table-wrap::-webkit-scrollbar {
    width: 0;
    height: 12px;
    background: transparent;
  }

  #libraryView .table-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    margin-inline: 8px;
  }

  #libraryView .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(122, 158, 183, 0.62);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }@media (hover: hover) {

  #libraryView .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(168, 198, 218, 0.88);
    border: 2px solid transparent;
    background-clip: padding-box;
  }}

  #libraryView .table-wrap::-webkit-scrollbar-corner {
    background: transparent;
  }

  :root[data-theme="light"] #libraryView .table-wrap {
    scrollbar-color: rgba(90, 112, 102, 0.45) transparent;
  }

  :root[data-theme="light"] #libraryView .table-wrap::-webkit-scrollbar-track {
    background: rgba(32, 35, 31, 0.06);
  }

  :root[data-theme="light"] #libraryView .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(90, 112, 102, 0.45);
  }@media (hover: hover) {

  :root[data-theme="light"] #libraryView .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(70, 90, 82, 0.62);
  }}
}

#libraryView .library-table-scroller {
  display: block;
  box-sizing: border-box;
  /* Fill the available width on wide (desktop) windows, while min-width keeps
     the columns readable and enables horizontal scroll on narrow screens. */
  width: 100%;
  min-width: calc(10.25rem + 10ch + 810px);
  max-width: none;
}

.gema-view .event-form {
  position: relative;
  z-index: 3;
  width: min(1120px, 100%);
  margin: 0 0 12px;
  padding: 16px;
}

.gema-event-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.gema-event-form-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -0.01em;
}

.gema-event-form-header .dialog-close-button {
  position: static;
  flex: 0 0 auto;
}

.gema-view .form-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 7px 8px;
}

.gema-view label {
  gap: 3px;
  font-size: 11px;
}

.gema-view label input,
.gema-view label select {
  min-height: 31px;
  padding: 5px 7px;
  font-size: 13px;
}

.panel-header,
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-header h2 {
  margin-bottom: 0;
}

#libraryView .sidebar-panel .panel-header h2 {
  font-size: 15px;
  letter-spacing: 0.03em;
}

.concert-event-line {
  display: grid;
  gap: 1px;
  margin-top: 3px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}

.concert-event-name {
  overflow: hidden;
  color: rgba(196, 214, 226, 0.84);
  font-size: 12px;
  font-weight: 790;
  letter-spacing: 0.015em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-event-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(186, 214, 236, 0.14);
  color: rgba(214, 232, 244, 0.92);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.concert-event-details {
  overflow: hidden;
  color: rgba(167, 185, 199, 0.74);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.concert-event-line::before {
  display: none;
}@media (hover: hover) {

.concert-event-line:hover {
  color: var(--muted);
  background: var(--soft);
  border-color: transparent;
  box-shadow: none;
}}

.toolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.toolbar input[type="search"] {
  max-width: none;
  flex: 1 1 360px;
}

.library-actions-menu {
  position: relative;
  flex: 0 0 auto;
}

.library-actions-menu summary {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(167, 185, 199, 0.74);
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 650;
}

.library-actions-menu summary::-webkit-details-marker {
  display: none;
}

.library-actions-menu summary:not([data-help])::after {
  content: none;
  color: var(--muted);
  font-size: 12px;
}@media (hover: hover) {

.library-actions-menu[open] summary,
.library-actions-menu summary:hover {
  border-color: rgba(122, 158, 183, 0.20);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(210, 224, 232, 0.88);
}}

.library-actions-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 18;
  width: 220px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-list);
  background: var(--panel);
  box-shadow: var(--glass-shadow);
  display: grid;
  gap: 5px;
}

.library-actions-panel button,
.library-actions-panel .file-button {
  position: relative;
  width: 100%;
  justify-content: flex-start;
  min-height: 30px;
  border-color: transparent;
  background: transparent;
  font-size: 12px;
  color: rgba(210, 224, 232, 0.82);
  font-weight: 650;
}

.library-actions-panel .file-button input[type="file"] {
  display: none !important;
}

.menu-section-label {
  display: block;
  margin: 7px 6px 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}

.menu-section-label:first-child {
  margin-top: 2px;
}

[data-help] {
  position: relative;
}

[data-help]::after {
  content: none !important;
}

.help-tooltip {
  position: fixed;
  z-index: 1000;
  width: min(300px, 52vw);
  min-height: 34px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 199, 167, 0.28);
  border-radius: 12px;
  background: rgba(12, 25, 35, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  color: rgba(229, 239, 244, 0.96);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
}

.help-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.library-search[data-help]::after {
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  transform: translateY(0) translateX(0);
}@media (hover: hover) {

.library-search[data-help]:hover::after,
.library-search[data-help]:focus-within::after {
  transform: translateY(0) translateX(0);
}}@media (hover: hover) {

.library-actions-panel button:hover,
.library-actions-panel .file-button:hover {
  border-color: transparent;
  background: var(--soft);
}}

.library-selection-submenu {
  position: relative;
}

.library-actions-panel .work-context-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 12px;
}

.library-selection-submenu-panel {
  z-index: 20;
  min-width: 220px;
}

.library-selection-submenu-panel .danger-action-button {
  color: #ff8f8f;
}@media (hover: hover) {

.library-actions-panel button:disabled,
.library-actions-panel button:disabled:hover {
  cursor: default;
  opacity: 0.42;
  background: transparent;
}}

.library-actions-panel .danger-action-button {
  color: #ff8f8f;
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding-top: 8px;
}@media (hover: hover) {

.library-actions-panel .danger-action-button:hover {
  background: rgba(255, 92, 92, 0.12);
  color: #ffb0b0;
}}

.duplicate-works-dialog {
  width: min(760px, calc(100vw - 24px));
}

.duplicate-works-summary {
  margin: -4px 0 4px;
  color: var(--muted);
  font-size: 13px;
}

.duplicate-works-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow: auto;
  padding-right: 4px;
}

.duplicate-empty {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-list);
  color: var(--muted);
  background: var(--field);
}

.duplicate-group {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: var(--radius-list);
  background: rgba(255, 255, 255, 0.035);
}

.duplicate-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.duplicate-group p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
}

.duplicate-work-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 7px 9px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.16);
}

.duplicate-work-row.is-keep {
  border-color: rgba(143, 217, 173, 0.28);
  background: rgba(122, 199, 167, 0.10);
}

.duplicate-work-row strong,
.duplicate-work-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duplicate-work-row strong {
  color: var(--ink);
  font-size: 13px;
}

.duplicate-work-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.duplicate-work-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.library-export-dialog {
  width: min(520px, calc(100vw - 24px));
}

.library-export-dialog label,
.library-export-format {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.library-export-dialog select {
  min-height: 40px;
  border: 1px solid rgba(122, 158, 183, 0.26);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.20);
  color: var(--ink);
}

.library-export-format {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.library-export-format legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-export-format label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
}

.library-export-summary {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.collection-share-dialog,
.collection-import-dialog {
  width: min(620px, calc(100vw - 24px));
}

.collection-share-dialog label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.collection-share-dialog select {
  min-height: 40px;
  border: 1px solid rgba(122, 158, 183, 0.26);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.20);
  color: var(--ink);
}

.collection-share-result {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.collection-share-result input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--ink);
}

.collection-import-preview {
  max-height: min(48vh, 420px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.collection-import-preview ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

.collection-import-preview li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.collection-import-preview li:last-child {
  border-bottom: 0;
}

.collection-import-preview strong {
  color: var(--ink);
  font-size: 14px;
}

.collection-import-preview small {
  color: var(--muted);
  font-size: 12px;
}

.compact {
  margin-top: 8px;
  margin-bottom: 0;
}

.collection-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 1px;
}

.collection-list button {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  min-height: 34px;
  gap: 8px;
  border-color: transparent;
  border-radius: var(--radius-list);
  background: transparent;
  box-shadow: none;
}

.collection-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
}

.collection-label span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.collection-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.collection-badge {
  width: 28px;
  min-width: 28px;
  height: 24px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(122, 199, 167, 0.18), rgba(122, 199, 167, 0.08));
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.02em;
  line-height: 1;
}

.collection-list button.is-active .collection-badge,
.live-collection-list button.is-active .collection-badge {
  border-color: rgba(122, 199, 167, 0.42);
  background:
    linear-gradient(180deg, rgba(122, 199, 167, 0.34), rgba(122, 199, 167, 0.14));
  color: var(--ink);
}

.collection-list button::before {
  display: none;
}

.collection-list button.is-active {
  background: var(--selected);
  border-color: transparent;
  box-shadow: none;
}

.collection-list button.is-fixed-root-collection {
  min-height: 34px;
  margin-bottom: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: var(--radius-list);
}

.collection-list button.is-fixed-root-collection .collection-label span:last-child {
  font-size: 15px;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

.collection-list button.is-fixed-root-collection .collection-count {
  font-size: inherit;
  font-weight: inherit;
}

.collection-list button.is-dragging {
  opacity: 0.58;
}

.collection-list button.is-drag-over {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.16);
}

.collection-list button.is-raw-import-collection {
  border-color: rgba(202, 168, 100, 0.42);
  background: rgba(202, 168, 100, 0.08);
}

.collection-list button.is-setlists-root {
  border-color: rgba(122, 158, 183, 0.24);
}

.auto-list-section {
  margin-top: 0;
}

.auto-list-section h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.35;
  padding-top: 3px;
  padding-bottom: 1px;
  overflow: visible;
}

.auto-list {
  margin-top: 0;
}

.auto-list-chevron {
  width: 24px;
  min-width: 24px;
  color: rgba(167, 185, 199, 0.72);
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.auto-list .auto-import-item button {
  min-height: 28px;
  padding-left: 22px;
  color: rgba(204, 218, 227, 0.72);
}

.auto-list .auto-import-item .collection-label span:last-child {
  font-size: 12px;
  font-weight: 640;
}

.auto-import-empty {
  padding: 7px 10px 7px 22px;
  color: rgba(167, 185, 199, 0.58);
  font-size: 12px;
}

.collection-label small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-context-menu {
  position: fixed;
  z-index: 2200;
  width: min(238px, calc(100vw - 20px));
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 10px;
  background: rgba(8, 19, 29, 0.98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

.work-context-menu[hidden] {
  display: none;
}

.work-context-menu button {
  width: 100%;
  min-height: 28px;
  justify-content: flex-start;
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
  box-shadow: none;
}@media (hover: hover) {

.work-context-menu button:hover,
.work-context-menu button:focus-visible {
  background: rgba(122, 199, 167, 0.12);
}}

.work-context-menu button:disabled {
  cursor: default;
  opacity: 0.42;
}

.work-context-submenu {
  position: relative;
}

.work-context-submenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 12px;
  z-index: 2;
}

.work-context-menu.opens-left .work-context-submenu::after {
  left: auto;
  right: 100%;
}

.work-context-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  gap: 12px;
}

.work-context-submenu-trigger span {
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.work-context-submenu-panel {
  position: absolute;
  top: -6px;
  left: calc(100% + 6px);
  z-index: 1;
  min-width: 210px;
  max-height: min(48vh, 360px);
  display: none;
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 10px;
  background: rgba(8, 19, 29, 0.98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.work-context-submenu-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  right: 100%;
  width: 8px;
}

.work-context-menu.opens-left .work-context-submenu-panel::before {
  right: auto;
  left: 100%;
}

.work-context-menu.opens-left .work-context-submenu-panel {
  right: calc(100% + 6px);
  left: auto;
}

.work-context-submenu-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}@media (hover: hover) {

.work-context-submenu:hover .work-context-submenu-panel,
.work-context-submenu:focus-within .work-context-submenu-panel {
  display: grid;
}}

.work-context-empty {
  display: block;
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-list);
  background: var(--glass-field);
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.library-meta-bar {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
  margin: 0 0 14px;
}

.library-meta-search {
  flex: 1 1 auto;
  max-width: none;
  min-height: 32px;
  margin-left: 0;
  padding-inline: 12px;
  background: rgba(255, 255, 255, 0.065);
}

.library-meta-search input[type="search"] {
  font-size: 14px;
}

.library-active-title {
  margin: 0 4px 2px;
  color: rgba(190, 205, 216, 0.88);
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: 0.025em;
  line-height: 1.2;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 12px;
  text-align: left;
  vertical-align: middle;
}

#libraryView .data-table td {
  height: 31px;
  padding: 2px 8px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
}

.data-table th {
  position: sticky;
  top: 0;
  background: #edf1ec;
  z-index: 1;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}

:root[data-theme="dark"] .data-table th {
  background: #223341;
}

.data-table th:not(:has(.table-head-tool)) {
  padding: 7px 12px;
}

.table-head-tool {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

#libraryView .table-head-tool {
  min-height: 28px;
  padding: 0 8px;
  font-size: 10px;
  cursor: pointer;
}

#libraryView .data-table th:not(:has(.table-head-tool)) {
  padding: 5px 8px;
  font-size: 10px;
}@media (hover: hover) {

.table-head-tool:hover,
.table-head-tool:focus-visible,
.table-head-tool.is-active {
  background: rgba(122, 199, 167, 0.12);
  color: var(--ink);
}}@media (hover: hover) {

.table-head-tool.is-quiet-head,
.table-head-tool.is-quiet-head:hover,
.table-head-tool.is-quiet-head:focus-visible,
.table-head-tool.is-quiet-head.is-active {
  background: transparent;
  color: var(--muted);
}}

.table-head-tool::before {
  display: none;
}

.sort-indicator {
  min-width: 12px;
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
}

.import-target-label {
  display: grid;
  gap: 5px;
  margin: 4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.data-table tr {
  cursor: pointer;
}

.data-table tr.is-selected {
  background: rgba(122, 199, 167, 0.24);
  outline: 1px solid rgba(122, 199, 167, 0.34);
  outline-offset: -1px;
}

#libraryView.is-library-selection-pointer-active .table-wrap {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

#libraryView.is-library-selection-pointer-active .work-area {
  touch-action: none;
}

#libraryView.is-library-selection-mode .data-table tr {
  cursor: default;
}

#libraryView.is-library-selection-mode .data-table .title-cell {
  position: relative;
  padding-left: 36px;
}

#libraryView.is-library-selection-mode .data-table .title-cell::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(122, 199, 167, 0.55);
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.05);
  transform: translateY(-50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#libraryView.is-library-selection-mode .data-table tr.is-selected .title-cell::before {
  border-color: rgba(122, 199, 167, 0.9);
  background:
    radial-gradient(circle at 50% 50%, rgba(202, 255, 223, 0.95) 0 32%, transparent 34%),
    rgba(122, 199, 167, 0.42);
}

#libraryView .data-table {
  table-layout: fixed;
  width: 100%;
  min-width: calc(10.25rem + 10ch + 810px);
  max-width: none;
}

#libraryView .data-table col.col-title { width: auto; }
#libraryView .data-table col.col-rating { width: 92px; }
#libraryView .data-table col.col-asset { width: 48px; }
#libraryView .data-table col.col-duration { width: 80px; }
#libraryView .data-table col.col-collections { width: 220px; }
#libraryView .data-table col.col-composer { width: 150px; }
#libraryView .data-table col.col-work-number { width: 172px; }

#libraryView .data-table th,
#libraryView .data-table td {
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom-color: rgba(122, 158, 183, 0.11);
  overflow: hidden;
}@media (hover: hover) {

#libraryView .data-table tbody tr:not(.is-selected),
#libraryView .data-table tbody tr:not(.is-selected):hover {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}}

#libraryView .data-table .title-column,
#libraryView .data-table td.title-cell {
  /* Flexible title column: keeps a readable minimum, absorbs extra width so the
     table fills wide desktop windows instead of ending early. */
  width: auto;
  min-width: calc(10.25rem + 10ch);
  max-width: none;
}

#libraryView .data-table .rating-column,
#libraryView .data-table td.rating-cell {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

#libraryView .data-table .asset-column,
#libraryView .data-table td.asset-cell {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
}

#libraryView .data-table .duration-column,
#libraryView .data-table td.duration-cell {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

#libraryView .data-table .duration-column .duration-average-mark {
  margin-right: 1px;
  color: color-mix(in srgb, var(--muted) 70%, var(--accent) 30%);
  font-weight: 700;
}

#libraryView .data-table .collections-column,
#libraryView .data-table td.collections-cell {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

#libraryView .data-table .composer-column,
#libraryView .data-table td.composer-cell {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

#libraryView .data-table .work-number-column,
#libraryView .data-table td.work-number-cell {
  width: 172px;
  min-width: 172px;
  max-width: 172px;
}

#libraryView .data-table td.composer-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#libraryView .data-table td.title-cell {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#libraryView .data-table td.title-cell small {
  display: none;
}

#libraryView .data-table .duration-cell {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
}

#libraryView .data-table .generated-work-duration {
  /* Generated (concert-derived) durations are hinted by color only; keep the
     font size identical to manual durations so the column does not flicker
     between the early paint and the app render. */
  color: color-mix(in srgb, var(--muted) 78%, var(--accent) 22%);
  font-size: inherit;
}

#libraryView .data-table .work-number-cell {
  color: rgba(167, 185, 199, 0.78);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#libraryView .data-table .work-number-cell .inline-work-text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#libraryView .data-table td.composer-cell {
  cursor: zoom-in;
}

#libraryView .data-table td.composer-cell.is-expanded {
  white-space: normal;
  overflow: visible;
  background: var(--field);
  color: var(--ink);
  position: relative;
  z-index: 2;
  cursor: zoom-out;
}

#libraryView .data-table .inline-work-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

#libraryView .data-table .title-cell .inline-work-text {
  flex: 1 1 auto;
}

#libraryView .data-table .title-cell .work-rating-inline,
#libraryView .data-table .title-cell .work-alias-label,
#libraryView .data-table .title-cell .work-status-badge,
#libraryView .data-table .title-cell .raw-import-review-button {
  flex: 0 0 auto;
}

#libraryView .data-table .title-cell .work-rating-inline {
  margin-left: 0;
}

#libraryView .data-table .inline-work-edit-input {
  width: 100%;
  min-width: 72px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid rgba(135, 201, 174, 0.72);
  border-radius: 7px;
  background: rgba(7, 18, 26, 0.92);
  color: var(--ink);
  font: inherit;
  font-weight: inherit;
  box-shadow: 0 0 0 2px rgba(135, 201, 174, 0.12);
}

#libraryView .data-table .inline-work-edit-input:focus {
  outline: none;
}

.table-input {
  width: 100%;
  min-width: 96px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass-field);
  color: var(--ink);
  font: inherit;
}

.table-input.is-duration {
  min-width: 72px;
}

.table-input.is-title {
  min-width: 180px;
}

.table-input.is-composer {
  min-width: 150px;
}

.table-input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(62, 106, 78, 0.16);
}

.table-input.is-invalid {
  border-color: #b42318;
  background: #fff3f1;
}

#gemaPreview .table-input {
  min-height: 28px;
  padding: 2px 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}@media (hover: hover) {

#gemaPreview .table-input:hover {
  color: var(--accent);
}}

#gemaPreview .table-input:focus {
  padding: 2px 6px;
  border-color: var(--accent);
  border-radius: 14px;
  background: var(--glass-field);
  outline: 2px solid rgba(62, 106, 78, 0.16);
}

#gemaPreview .table-input.is-invalid {
  padding: 2px 6px;
  border-color: #b42318;
  border-radius: 14px;
  background: #fff3f1;
}

.collection-text-list {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: rgba(167, 185, 199, 0.66);
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.015em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#libraryView .collection-list .collection-label {
  min-width: 0;
}

#libraryView .collection-list .collection-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-mini-logo {
  width: 26px;
  min-width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 6px;
  background: rgba(122, 199, 167, 0.12);
  color: var(--ink);
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
}

#libraryView .data-table td.asset-cell {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}

#libraryView .live-pdf-button,
#libraryView .live-audio-button, #libraryView .play-along-button {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  border-radius: 9px;
  vertical-align: middle;
}

#libraryView .pdf-icon-button {
  font-size: 8px;
}

#libraryView .live-audio-button, #libraryView .play-along-button {
  font-size: 22px;
}

.tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.15;
  color: var(--muted);
  background: var(--field);
}

.concert-grid {
  display: block;
}

.concert-grid.is-live-active {
  display: block;
}

.concert-grid.is-live-active .event-form {
  display: none;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

label input,
label textarea {
  color: var(--ink);
  font-size: 15px;
}

.full {
  grid-column: 1 / -1;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-field);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.segmented button {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
}

.segmented.live-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  flex-wrap: nowrap;
  padding: 4px;
  border-radius: 13px;
  overflow: visible;
}

.segmented.live-toolbar button {
  flex: none;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 8px;
}

.concert-status {
  min-width: 0;
  min-height: 140px;
  margin: 0;
  padding: 0;
  color: var(--ink);
}

.concert-status > .live-progress-tracker {
  box-sizing: border-box;
  height: 100%;
  min-height: 140px;
  padding: 9px;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-ring {
  width: 96px;
  height: 96px;
  transform: none;
}

.live-overview-row .live-progress-tracker.is-large {
  grid-template-columns: minmax(0, 1.86fr) minmax(200px, 0.58fr);
}

@media (orientation: landscape) and (min-width: 900px) {
  .live-overview-row .live-progress-tracker.is-large .live-progress-ring {
    width: 136px !important;
    height: 136px !important;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring span {
    margin-top: -12px;
    font-size: clamp(34px, 3.1vw, 45px) !important;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring small {
    margin-top: 38px;
    font-size: clamp(11px, 0.9vw, 13px);
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-main {
    gap: 14px;
  }
}

.live-overview-row .live-progress-tracker.is-large .live-progress-main {
  padding-top: 0;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-meta {
  padding-left: 12px;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-piece > strong {
  font-size: clamp(19px, 2.2vw, 27px);
}

.live-progress-tracker {
  --progress: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.86fr) minmax(200px, 0.58fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(17, 37, 51, 0.94), rgba(8, 19, 29, 0.98));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.27);
  position: relative;
}

.live-progress-status,
.live-progress-main,
.live-progress-meta {
  min-width: 0;
}

.live-progress-status {
  position: absolute;
  left: 9px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.live-progress-main {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-top: 14px;
}

.live-progress-main.is-pause-only {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 100%;
  padding: 0;
}

.live-pause-hero {
  color: #efbd48;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

.live-pause-hero-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.live-pause-running-light {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffd43b;
  box-shadow: 0 0 8px rgba(255, 212, 59, 0.95), 0 0 18px rgba(255, 193, 7, 0.68);
}

.live-pause-hero-time {
  color: #f6d778;
  font-size: clamp(27px, 3.8vw, 46px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.live-progress-ring {
  width: clamp(58px, 6vw, 78px);
  height: clamp(58px, 6vw, 78px);
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    conic-gradient(
      from -90deg,
      var(--ring-color) calc(var(--progress) * 1turn),
      rgba(32, 201, 195, 0.16) 0
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 10px rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.24);
}

.live-progress-ring::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background:
    conic-gradient(
      from -90deg,
      var(--ring-color) calc(var(--progress) * 1turn),
      transparent 0
    );
  filter: blur(7px);
  opacity: 0.62;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
  mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}

.live-progress-ring::after {
  content: "";
  position: absolute;
  inset: clamp(4px, 0.55vw, 6px);
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: inherit;
  background: #101f2b;
  z-index: 1;
}

.live-progress-ring span,
.live-progress-ring small,
.live-progress-ring em {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
}

.live-progress-ring span {
  align-self: center;
  margin-top: -5px;
  color: var(--ink);
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.live-progress-ring small {
  align-self: center;
  margin-top: clamp(15px, 1.6vw, 22px);
  color: var(--muted);
  font-size: 8px;
}

.live-progress-ring em {
  align-self: center;
  display: none;
  color: var(--muted);
  font-size: clamp(13px, 1.35vw, 17px);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.live-progress-tracker.is-over-target-duration .live-progress-ring {
  border-color: rgba(242, 184, 75, 0.72);
  background:
    conic-gradient(from -90deg, #f2b84b 1turn, rgba(242, 184, 75, 0.18) 0);
  box-shadow:
    0 0 0 1px rgba(242, 184, 75, 0.20) inset,
    0 0 20px rgba(242, 184, 75, 0.34),
    0 8px 22px rgba(0, 0, 0, 0.26);
  animation: none;
}

.live-progress-tracker.is-duration-caution {
  border-color: rgba(122, 158, 183, 0.26);
  background: var(--panel);
}

.live-progress-tracker.is-duration-caution .live-progress-ring {
  box-shadow: none;
}

.live-progress-tracker.is-over-target-duration {
  position: relative;
  overflow: hidden;
  border-color: rgba(122, 158, 183, 0.26);
  background: var(--panel);
}

.live-progress-tracker.is-over-target-duration::after {
  content: none;
}

.live-progress-tracker.is-over-target-duration > * {
  position: relative;
  z-index: 1;
}

.live-progress-tracker.is-over-target-duration .live-progress-ring::before {
  opacity: 0;
  filter: none;
}

.live-progress-tracker.is-over-target-duration .live-progress-ring span {
  color: #fff6df;
}

.live-progress-tracker.is-critical-overrun {
  border-color: #ff3b30;
  animation: criticalOverrunPulse 1.15s ease-in-out infinite;
}

.live-progress-tracker.is-critical-overrun .live-progress-ring {
  box-shadow: 0 0 0 5px rgba(255, 45, 32, 0.24), 0 0 34px rgba(255, 45, 32, 0.62);
}

.live-duration-notice {
  position: relative;
  overflow: hidden;
  margin: 7px 0 10px;
  min-height: clamp(24px, 2.5vw, 34px);
  padding: 2px 4px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.55vw, 21px);
  font-weight: 620;
  letter-spacing: 0.01em;
  line-height: 1.22;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: none;
}

.live-duration-notice span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-progress-tracker.is-fullscreen-warning-flash::before {
  content: none;
}

@keyframes durationTextFlash {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.18; filter: brightness(1.8); }
}

@keyframes fullScreenWarningShimmer {
  0%, 100% { background: rgba(255, 255, 255, 0); }
  38% { background: rgba(255, 255, 255, 0.72); }
}

@keyframes liveGoldRingBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(242, 184, 75, 0.18) inset,
      0 0 18px rgba(242, 184, 75, 0.30),
      0 0 42px rgba(242, 184, 75, 0.16),
      0 8px 22px rgba(0, 0, 0, 0.26);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 216, 128, 0.30) inset,
      0 0 26px rgba(255, 202, 88, 0.46),
      0 0 86px rgba(242, 184, 75, 0.26),
      0 8px 22px rgba(0, 0, 0, 0.26);
  }
}

@keyframes liveTimerSunRays {
  0%, 100% {
    opacity: 0.16;
    transform: scale(0.88) rotate(0deg);
  }
  45% {
    opacity: 0.34;
    transform: scale(1.04) rotate(4deg);
  }
  70% {
    opacity: 0.22;
    transform: scale(0.96) rotate(2deg);
  }
}

.live-progress-tracker.is-hit-target-duration .live-progress-ring {
  animation: none;
}

.live-progress-ring[role="button"] {
  cursor: pointer;
}

.live-progress-ring[role="button"]:focus-visible {
  outline: 2px solid rgba(143, 217, 173, 0.62);
  outline-offset: 5px;
}

.live-progress-tracker.is-haptic-bump {
  animation: liveHapticBump 180ms cubic-bezier(0.2, 0.72, 0.26, 1) 1;
}

@keyframes liveHapticBump {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
  34% {
    transform: translate3d(1px, 0, 0) scale(1.002);
    filter: brightness(1.035);
  }
  68% {
    transform: translate3d(-0.75px, 0, 0) scale(0.999);
    filter: brightness(1.012);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-progress-tracker.is-haptic-bump,
  .live-work-row.is-confirmed > button:first-child {
    animation: none;
  }
}

.live-progress-piece {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
}

.live-progress-piece > span {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-progress-piece-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 5px;
}

.live-progress-piece-heading > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.live-progress-piece-heading .live-progress-status {
  position: static !important;
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #65c86d;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-14px);
}

.live-progress-piece-heading > span {
  order: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
}

.live-progress-piece-heading .live-progress-status .status-light {
  display: block;
  width: 10px;
  height: 10px;
}

.live-progress-piece-heading .live-progress-status:not(.is-paused):not(.is-ended):not(.is-idle) .status-light {
  background: #39ff14;
  box-shadow: 0 0 7px rgba(57, 255, 20, 0.95), 0 0 16px rgba(57, 255, 20, 0.65);
}

.live-progress-piece-heading .live-progress-status.is-idle {
  color: #8798a6;
}

.live-progress-piece-heading .live-progress-status.is-idle .status-light {
  background: #43515c;
  box-shadow: inset 0 0 0 2px #71808b;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status strong {
  color: inherit;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.03em;
}

.live-overview-row .live-progress-status .live-pause-duration {
  margin-left: 6px;
  color: #f1c84b;
  font-size: 27px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.live-progress-piece-heading .live-progress-status.is-paused {
  border-color: transparent;
  background: transparent;
  color: rgba(206, 172, 96, 0.82);
}

.live-progress-tracker.is-plain-pause .live-progress-main {
  align-items: center;
  gap: clamp(22px, 3.2vw, 42px);
  padding-top: 0;
}

.live-progress-tracker.is-plain-pause .live-progress-piece {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(58px, 6vw, 78px);
  padding-left: clamp(8px, 1.6vw, 22px);
}

.live-progress-tracker.is-plain-pause .live-progress-piece-heading {
  margin: 0;
}

.live-progress-tracker.is-plain-pause .live-progress-piece-heading .live-progress-status.is-paused {
  position: static;
  display: inline-flex;
  align-items: center;
  transform: none;
}

.live-progress-tracker.is-plain-pause .live-progress-ring span {
  color: rgba(206, 172, 96, 0.86);
  text-shadow: none;
}

.live-progress-tracker.is-plain-pause .live-progress-ring {
  border-color: rgba(122, 158, 183, 0.22);
  background:
    conic-gradient(
      from -90deg,
      rgba(206, 172, 96, 0.74) 1turn,
      rgba(206, 172, 96, 0.74) 0
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

.live-progress-tracker.is-plain-pause .live-progress-ring::before {
  opacity: 0;
  filter: none;
}

.live-progress-tracker.is-plain-pause .live-progress-status.is-paused {
  color: rgba(206, 172, 96, 0.86);
}

.live-progress-tracker.is-plain-pause .live-progress-status.is-paused .status-light {
  display: none;
}

.live-progress-tracker.is-plain-pause .live-progress-status.is-paused strong {
  color: rgba(206, 172, 96, 0.86);
  font-size: clamp(66px, 9vw, 124px) !important;
  letter-spacing: 0.04em;
  line-height: 0.84;
}

.live-progress-tracker.is-plain-pause .live-current-set-button {
  margin-top: 8px;
  color: var(--muted);
}

.live-progress-piece-heading .live-progress-status.is-paused:has(.live-pause-duration) {
  display: grid;
  grid-template-columns: 9px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 0;
  transform: translateY(-10px);
}

.live-progress-piece-heading .live-progress-status.is-paused:has(.live-pause-duration) .status-light {
  grid-column: 1;
  grid-row: 1;
}

.live-progress-piece-heading .live-progress-status.is-paused:has(.live-pause-duration) strong {
  grid-column: 2;
  grid-row: 1;
}

.live-overview-row .live-progress-piece-heading .live-progress-status.is-paused .live-pause-duration {
  grid-column: 2;
  grid-row: 2;
  margin: 2px 0 0;
  font-size: 23px;
  line-height: 1;
}

.live-progress-piece-heading .live-progress-status.is-ended {
  border-color: transparent;
  background: transparent;
  color: #b8c0b8;
}

.live-progress-piece > strong {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 2.4em;
  font-size: clamp(17px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.live-progress-piece small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.live-recording-meta strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.live-recording-meta strong > span,
.live-recording-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9aa29a;
  box-shadow: 0 0 0 3px rgba(154, 162, 154, 0.14);
  flex: 0 0 auto;
}

.live-recording-meta.is-recording strong {
  color: #ff8d86;
}

.live-recording-meta.is-recording strong > span,
.live-recording-meta.is-recording .live-recording-dot {
  background: #ef4e45;
  box-shadow:
    0 0 0 3px rgba(239, 78, 69, 0.16),
    0 0 11px rgba(239, 78, 69, 0.82),
    0 0 22px rgba(239, 78, 69, 0.34);
}

.live-recording-meta.is-error strong {
  color: #e2b84f;
}

.live-recording-meta.is-error strong > span {
  background: #d9a622;
}

.live-recording-meta.is-idle strong > span,
.live-recording-meta.is-idle .live-recording-dot {
  background: #3f4a52;
  box-shadow: 0 0 0 2px rgba(143, 155, 163, 0.06);
}

.live-recording-meta.is-paused strong > span,
.live-recording-meta.is-paused .live-recording-dot,
.live-recording-meta.is-error .live-recording-dot {
  background: #d9b84f;
  box-shadow:
    0 0 0 3px rgba(217, 184, 79, 0.15),
    0 0 10px rgba(217, 184, 79, 0.55);
}

.live-progress-meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(68px, auto);
  grid-template-rows: minmax(42px, auto) minmax(78px, 1fr);
  gap: 0;
  justify-items: stretch;
  align-self: stretch;
  padding-left: 8px;
  border-left: 1px solid rgba(122, 158, 183, 0.25);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  overflow: hidden;
}

.live-progress-tracker.is-large .live-progress-meta {
  align-self: stretch;
  align-content: stretch;
}

.live-meta-card {
  display: grid;
  align-content: start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 7px 6px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.live-concert-duration.live-meta-card {
  border: 0;
}

.live-recording-time-group.live-meta-card {
  border: 0;
  justify-items: end;
  text-align: right;
  padding-right: 0;
}

.live-meta-card small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
}

.live-meta-card > strong,
.live-recording-time-group .live-recording-meta strong {
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 820;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live-concert-duration > strong {
  color: #d7e5ec;
  font-size: clamp(17px, 1.75vw, 23px);
}

.live-recording-time-group .live-recording-meta.is-recording strong {
  color: #e15b52;
}

.live-recording-time-group .live-recording-meta.is-idle strong {
  color: #5c6972;
}

.live-recording-time-group .live-recording-meta.is-paused strong,
.live-recording-time-group .live-recording-meta.is-error strong {
  color: #d9b84f;
}

.live-progress-meta .live-meta-card strong {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.live-history-button.live-meta-card {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-items: end;
  align-self: center;
  align-content: center;
  min-height: 100%;
  color: inherit;
  cursor: pointer;
}

.live-current-set-button {
  display: inline-grid;
  align-items: start;
  gap: 1px;
  width: max-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 1px 0 2px;
  border: 0;
  background: transparent;
  color: rgba(159, 178, 195, 0.72);
  font: inherit;
  font-size: clamp(11px, 1.02vw, 14px);
  font-weight: 760;
  letter-spacing: 0.075em;
  line-height: 1.18;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.live-current-set-button span {
  color: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.18;
}

.live-current-set-button em {
  color: inherit;
  font-size: clamp(13px, 1.08vw, 15px);
  font-style: normal;
  font-weight: 760;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: lowercase;
}@media (hover: hover) {

.live-current-set-button:hover,
.live-current-set-button:focus-visible {
  color: #bfd2df;
  outline: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}}

.live-progress-meta .live-played-count {
  justify-content: flex-end;
  color: #8fd9ad;
  font-size: clamp(60px, 7.5vw, 94px) !important;
  line-height: 0.9;
  text-align: right;
  text-shadow: 0 0 12px rgba(155, 232, 120, 0.24);
}

.set-history-list {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.set-history-list li {
  display: grid;
  grid-template-columns: 13px minmax(64px, 0.8fr) minmax(70px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 3px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.18);
  background: transparent;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.set-history-list li:last-child {
  border-bottom: 0;
}

.set-history-list li.is-current {
  background: transparent;
}

.set-history-current-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.set-history-list li.is-current .set-history-current-dot {
  background: #39ff14;
  box-shadow: 0 0 7px rgba(57, 255, 20, 0.9), 0 0 14px rgba(57, 255, 20, 0.42);
}

.set-history-list strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.set-history-list .set-history-duration {
  color: #c8d8e5;
  font-size: 17px;
  font-weight: 850;
}

.set-history-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.live-progress-meta .live-played-count i {
  color: #7fcf9d;
  font-size: 0.38em;
}

.live-played-count em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}

.live-recording-meta.is-paused strong,
.audio-dot.is-paused {
  color: #ffd45c;
}

.audio-dot.is-paused {
  background: #ffd45c;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-ring {
  width: 124px !important;
  height: 124px !important;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-ring span {
  margin-top: -11px;
  font-size: clamp(31px, 3.45vw, 43px) !important;
  font-weight: 900;
}

.live-overview-row .live-progress-tracker.is-large .live-progress-ring small {
  margin-top: 34px;
  font-size: clamp(11px, 1.08vw, 14px);
  font-weight: 780;
  letter-spacing: 0.02em;
}

@media (orientation: landscape) and (min-width: 900px) {
  .live-overview-row .live-progress-tracker.is-large .live-progress-ring {
    width: 146px !important;
    height: 146px !important;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring span {
    margin-top: -12px;
    font-size: clamp(33px, 2.75vw, 41px) !important;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring small {
    margin-top: 39px;
    font-size: clamp(11px, 0.9vw, 13px);
  }
}

@keyframes criticalOverrunPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 32, 0.08), 0 16px 36px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 7px rgba(255, 45, 32, 0.22), 0 0 30px rgba(255, 45, 32, 0.32); }
}

.live-progress-meta span {
  display: grid;
  gap: 4px;
}@media (hover: hover) {

.live-progress-meta button:hover,
.live-progress-meta button:focus-visible {
  background: transparent;
  color: var(--accent);
}}

.live-progress-meta small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.live-progress-meta strong {
  color: var(--ink);
  font-size: clamp(12px, 1.25vw, 16px);
  font-weight: 800;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.live-progress-meta .live-concert-duration > strong {
  color: #d7e5ec;
  font-size: clamp(17px, 1.75vw, 23px);
  line-height: 1.08;
}

@keyframes liveProgressHit {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 120, 246, 0.0), 0 8px 20px rgba(0, 0, 0, 0.24);
    transform: scale(1);
  }
  24% {
    box-shadow: 0 0 0 10px rgba(238, 248, 255, 0.18), 0 0 26px rgba(238, 248, 255, 0.18), 0 8px 22px rgba(0, 0, 0, 0.24);
    transform: scale(1.045);
  }
  54% {
    box-shadow: 0 0 0 5px rgba(238, 248, 255, 0.10), 0 0 18px rgba(238, 248, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.24);
    transform: scale(1.018);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(238, 248, 255, 0.0), 0 8px 20px rgba(0, 0, 0, 0.24);
    transform: scale(1);
  }
}

.live-progress-tracker.is-medium {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 10px;
}

.live-progress-tracker.is-medium .live-progress-status {
  grid-column: 1 / -1;
}

.live-progress-tracker.is-medium .live-progress-ring {
  width: 40px;
  height: 40px;
}

.live-progress-tracker.is-compact {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
}

.live-progress-tracker.is-compact .live-progress-status {
  grid-column: 1 / -1;
}

.live-progress-tracker.is-compact .live-progress-ring {
  width: 30px;
  height: 30px;
}

.live-progress-tracker.is-compact .live-progress-ring::after {
  inset: 4px;
}

.live-progress-tracker.is-compact .live-progress-meta {
  display: none;
}

#liveSearchToggleBtn.is-active,
#unknownWorkMenuBtn.is-active {
  color: var(--ink);
  border-color: var(--line);
  background: var(--selected);
}

.unknown-template-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}

#addUnknownWorkBtn {
  min-height: 34px;
  padding-inline: 12px;
  border-color: rgba(143, 217, 173, 0.55);
  background: rgba(143, 217, 173, 0.18);
  color: #d7f3df;
  font-weight: 900;
}

.live-action-dialog {
  width: min(560px, calc(100vw - 34px));
  max-height: min(74vh, 680px);
  padding: 0;
  border-color: rgba(122, 158, 183, 0.32);
  background: rgba(8, 22, 33, 0.985);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.live-action-dialog::backdrop {
  background: rgba(2, 8, 13, 0.52);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.live-action-dialog form {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.live-action-dialog h2 {
  margin: 0 32px 2px 0;
  color: #a8d8c4;
  font-size: 13px;
  font-weight: 880;
  letter-spacing: 0.14em;
}

.live-action-dialog input {
  min-height: 42px;
  border: 1px solid rgba(122, 158, 183, 0.26);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink);
  font-size: 16px;
}

.live-search-results {
  display: grid;
  gap: 6px;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding-right: 2px;
}

.live-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  text-align: left;
}

.live-search-result strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b9f0c7;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.live-search-result small {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
}

.live-search-result em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #8aa0ad;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}@media (hover: hover) {

.live-search-result:hover,
.live-search-result:focus-visible {
  border-color: rgba(143, 217, 173, 0.48);
  background: rgba(143, 217, 173, 0.12);
  outline: none;
}}

.live-search-empty {
  margin: 0;
  padding: 14px 4px 6px;
  color: var(--muted);
  font-size: 14px;
}

.unknown-primary-log {
  width: fit-content;
  min-height: 44px;
  padding: 0 18px;
  border-color: rgba(122, 158, 183, 0.30);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.075);
  color: #cfe9dc;
  font-size: 14px;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.unknown-title-field {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.unknown-title-field input {
  min-height: 44px;
  border-color: rgba(122, 158, 183, 0.20);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-size: 15px;
  font-weight: 430;
  letter-spacing: 0.01em;
}

.unknown-title-field input::placeholder {
  color: rgba(167, 185, 199, 0.52);
  font-weight: 360;
}

.unknown-template-heading {
  margin: 4px 0 -4px;
  color: rgba(167, 185, 199, 0.66);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.unknown-work-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.unknown-work-hint strong {
  color: var(--muted);
  font-weight: 600;
}

.unknown-work-dialog form {
  display: grid;
  gap: 12px;
}

.unknown-work-dialog .unknown-template-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unknown-work-dialog .unknown-template-list button {
  min-height: 44px;
  border-color: rgba(122, 158, 183, 0.24);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  color: #b8d8c8;
  font-size: 12px;
  font-weight: 840;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}@media (hover: hover) {

.unknown-work-dialog .unknown-template-list button:hover,
.unknown-work-dialog .unknown-template-list button:focus-visible {
  border-color: rgba(143, 217, 173, 0.46);
  background: rgba(143, 217, 173, 0.12);
  outline: none;
}}

.timer-settings-dialog label,
.setlist-import-dialog label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-settings-dialog input,
.timer-settings-dialog select,
.timer-settings-dialog textarea,
.setlist-import-dialog textarea {
  min-height: 42px;
  border: 1px solid rgba(122, 158, 183, 0.26);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--ink);
  font-size: 15px;
}

.timer-settings-dialog .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
}

.timer-settings-dialog .toggle-row input {
  min-height: 0;
  width: 22px;
  height: 22px;
}

.timer-settings-dialog textarea {
  min-height: 72px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.timer-settings-dialog textarea:disabled {
  opacity: 0.45;
}

.timer-settings-hint {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
}

.concert-start-dialog {
  max-width: min(460px, calc(100vw - 32px));
}

.concert-start-dialog.is-prepared-picker {
  max-width: min(560px, calc(100vw - 32px));
}

.concert-start-back {
  margin-top: 12px;
}

.concert-start-planned-empty {
  margin: 0;
}

.concert-start-lead {
  margin: 0 0 14px;
}

.concert-start-options {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.concert-start-option {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
}

.concert-start-option strong {
  font-size: 1rem;
}

.concert-start-option small {
  color: var(--muted, rgba(255, 255, 255, 0.62));
  line-height: 1.35;
}

.concert-start-option.primary-action {
  border-color: rgba(111, 196, 168, 0.42);
  background: rgba(111, 196, 168, 0.12);
}

.concert-start-planned {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 14px;
  margin-top: 4px;
}

.concert-start-planned h3 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, rgba(255, 255, 255, 0.62));
}

.concert-start-planned-list {
  display: grid;
  gap: 8px;
}

.concert-start-planned-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  cursor: pointer;
}@media (hover: hover) {

.concert-start-planned-item:hover,
.concert-start-planned-item:focus-visible {
  border-color: rgba(111, 196, 168, 0.34);
  background: rgba(111, 196, 168, 0.08);
  outline: none;
}}

.concert-start-planned-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.concert-start-planned-copy strong,
.concert-start-planned-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-start-planned-copy small {
  color: var(--muted, rgba(255, 255, 255, 0.62));
}

:root[data-theme="light"] .concert-start-option {
  border-color: rgba(47, 74, 92, 0.14);
  background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .concert-start-option.primary-action {
  border-color: rgba(47, 122, 97, 0.28);
  background: rgba(47, 122, 97, 0.08);
}

:root[data-theme="light"] .concert-start-planned-item {
  border-color: rgba(47, 74, 92, 0.12);
  background: rgba(255, 255, 255, 0.82);
}

.concert-prep-dialog {
  width: min(620px, calc(100vw - 24px));
}

.concert-prep-dialog form {
  gap: 14px;
}

.concert-prep-intro {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.concert-prep-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.concert-prep-steps span {
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 999px;
  color: rgba(167, 185, 199, 0.55);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-prep-steps span.is-active {
  border-color: rgba(143, 217, 173, 0.44);
  color: var(--ink);
  background: rgba(122, 199, 167, 0.15);
}

.concert-prep-steps span.is-done {
  color: #8fd9ad;
  border-color: rgba(143, 217, 173, 0.26);
}

.concert-prep-summary {
  display: grid;
  gap: 7px;
}

.concert-prep-card {
  display: grid;
  gap: 5px;
  min-height: 108px;
  align-content: center;
  padding: 18px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.14);
}

.concert-prep-card strong {
  color: var(--ink);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.1;
}

.concert-prep-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.concert-prep-status {
  display: grid;
  grid-template-columns: 20px 120px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
}

.concert-prep-status span {
  color: rgba(177, 196, 206, 0.58);
  font-size: 14px;
}

.concert-prep-status.is-ok span {
  color: #8fd9ad;
  text-shadow: 0 0 12px rgba(82, 238, 84, 0.35);
}

.concert-prep-status strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.concert-prep-status small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-prep-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.concert-prep-actions button {
  min-height: 42px;
  border-radius: 13px;
}

.concert-prep-actions .primary-action {
  min-height: 48px;
  border-color: rgba(143, 217, 173, 0.40);
  background: rgba(122, 199, 167, 0.16);
  color: var(--ink);
}

.concert-prep-workspace,
.setlist-quality-overview {
  display: grid;
  gap: 14px;
  align-content: start;
}

.concert-prep-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.concert-prep-workspace-header strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
}

.concert-prep-workspace-header span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.concert-prep-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.concert-prep-new-concert-btn {
  min-height: 52px;
  padding: 0 22px;
  border-color: rgba(143, 217, 173, 0.52);
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.34), rgba(122, 199, 167, 0.14));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.18),
    0 10px 24px rgba(122, 199, 167, 0.16);
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.concert-prep-assistant-intro {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(122, 199, 167, 0.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.12), rgba(255, 255, 255, 0.04));
}

.concert-prep-assistant-stack {
  display: grid;
  gap: 12px;
}

.concert-prep-assistant-intro.is-style-collection {
  border-color: rgba(232, 156, 62, 0.28);
  background: linear-gradient(135deg, rgba(232, 156, 62, 0.12), rgba(92, 72, 160, 0.08), rgba(255, 255, 255, 0.03));
}

.concert-prep-assistant-intro.is-style-collection .concert-prep-assistant-intro-kicker {
  color: rgba(255, 210, 122, 0.95);
}

.concert-prep-assistant-intro.is-style-collection .concert-prep-assistant-intro-action {
  border-color: rgba(232, 156, 62, 0.36);
  background: rgba(232, 156, 62, 0.14);
}

.concert-prep-assistant-intro-copy {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.concert-prep-assistant-intro-kicker {
  margin: 0;
  color: rgba(168, 216, 196, 0.95);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.concert-prep-assistant-intro-copy > p:not(.concert-prep-assistant-intro-kicker) {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.concert-prep-assistant-intro-action {
  justify-self: end;
  min-height: 44px;
  padding: 0 16px;
  border-color: rgba(122, 199, 167, 0.36);
  background: rgba(122, 199, 167, 0.14);
  color: var(--ink);
  font-weight: 800;
}

.concert-prep-assistant-intro-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.concert-prep-list,
.setlist-quality-concert-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.setlist-quality-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title action"
    "meta action"
    "count action";
  gap: 4px 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}@media (hover: hover) {

.setlist-quality-event:hover,
.setlist-quality-event:focus-visible {
  border-color: rgba(122, 199, 167, 0.4);
  background: rgba(122, 199, 167, 0.08);
  outline: none;
}}

.setlist-quality-overview .concert-prep-workspace-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setlist-quality-event strong {
  grid-area: title;
  font-size: 17px;
  font-weight: 800;
}

.setlist-quality-event small,
.setlist-quality-overview .concert-prep-workspace-header span {
  color: var(--muted);
  font-size: 13px;
}

.setlist-quality-event > small:not(.setlist-quality-event-count) {
  grid-area: meta;
}

.setlist-quality-event-count {
  grid-area: count;
  color: var(--ink) !important;
  font-weight: 750;
}

.setlist-quality-open-btn {
  grid-area: action;
  justify-self: end;
  align-self: center;
  min-height: 36px;
  margin-top: 0;
  padding: 0 14px;
  border-color: rgba(122, 199, 167, 0.36);
  background: rgba(122, 199, 167, 0.14);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.setlist-quality-align-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.setlist-quality-align-bar strong,
.setlist-quality-align-bar small {
  display: block;
}

.setlist-quality-align-bar small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.setlist-quality-align-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setlist-quality-accept-btn {
  min-height: 32px;
  padding: 0 10px;
  border-color: rgba(122, 158, 183, 0.22);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.setlist-quality-setlist-row.is-issue {
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
}

.setlist-quality-back {
  justify-self: start;
  min-height: 32px;
  margin-bottom: 8px;
  padding: 0 10px;
  border-color: rgba(122, 158, 183, 0.2);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.setlist-quality-setlist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-quality-setlist-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.setlist-quality-setlist-row.is-pause {
  opacity: 0.7;
}

.setlist-quality-setlist-row.is-issue {
  border-color: rgba(232, 198, 106, 0.42);
  background: rgba(232, 198, 106, 0.08);
  cursor: pointer;
}@media (hover: hover) {

.setlist-quality-setlist-row.is-issue:hover,
.setlist-quality-setlist-row.is-issue:focus-visible {
  border-color: rgba(232, 198, 106, 0.7);
  outline: none;
}}

.setlist-quality-setlist-num {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.setlist-quality-setlist-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setlist-quality-setlist-main strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
}

.setlist-quality-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.setlist-quality-chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(232, 198, 106, 0.16);
  color: #e8c66a;
  font-size: 11px;
  font-weight: 800;
}

.setlist-quality-setlist-dur {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.concert-prep-list-item {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(122, 158, 183, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
}

.concert-prep-list-item:focus-visible {
  outline: 2px solid rgba(122, 158, 183, .55);
  outline-offset: 2px;
}@media (hover: hover) {

.concert-prep-list-item:hover {
  border-color: rgba(122, 158, 183, .34);
  background: rgba(255, 255, 255, .07);
}}

.concert-prep-list-item.is-next {
  border-color: rgba(122, 199, 167, 0.34);
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.14), rgba(255, 255, 255, 0.04));
}

.concert-prep-list-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.concert-prep-list-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.concert-prep-list-title-row .concert-dashboard-next-hero-countdown {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 20px;
}

.concert-prep-list-title-row .countdown-prefix,
.concert-prep-list-title-row .countdown-label {
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 650;
}

.concert-prep-list-title-row .countdown-value {
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

.concert-prep-list-title-row .countdown-unit {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 850;
  line-height: 1;
}

.concert-prep-list-main {
  flex: 1;
  min-width: 0;
}

.concert-prep-list-item strong {
  display: block;
  color: var(--ink);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 850;
  line-height: 1.2;
}

.concert-prep-list-title-row strong {
  display: inline;
}

.concert-prep-list-item small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.concert-prep-list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.concert-prep-list-actions .primary-action {
  min-height: 44px;
  padding: 0 16px;
  border-color: rgba(143, 217, 173, 0.48);
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.3), rgba(122, 199, 167, 0.12));
  box-shadow: 0 0 0 1px rgba(122, 199, 167, 0.14);
  font-weight: 800;
}

.preparation-setlist-view-tile {
  display: grid;
  gap: 3px;
  justify-items: start;
  width: fit-content;
  max-width: min(240px, 100%);
  padding: 10px 14px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}@media (hover: hover) {

.preparation-setlist-view-tile:hover,
.preparation-setlist-view-tile:focus-visible {
  border-color: rgba(122, 158, 183, 0.38);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}}

.preparation-setlist-view-tile-title {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.preparation-setlist-view-tile-meta {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.preparation-setlist-view-tile-action {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
}@media (hover: hover) {

.preparation-setlist-view-tile:hover .preparation-setlist-view-tile-action,
.preparation-setlist-view-tile:focus-visible .preparation-setlist-view-tile-action {
  color: var(--ink);
}}

:root[data-theme="light"] .preparation-setlist-view-tile {
  background: #e7eef3;
  border-color: rgba(42, 66, 84, 0.14);
}@media (hover: hover) {

:root[data-theme="light"] .preparation-setlist-view-tile:hover,
:root[data-theme="light"] .preparation-setlist-view-tile:focus-visible {
  background: #dde7ee;
  border-color: rgba(42, 66, 84, 0.22);
}}

:root[data-theme="light"] .prep-setlist-preview-dialog {
  background: linear-gradient(180deg, #f4f7f8, #eef2f3) !important;
  border-color: rgba(42, 66, 84, 0.14) !important;
  box-shadow: 0 28px 70px rgba(35, 42, 36, 0.16) !important;
}

.prep-setlist-preview-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.28) !important;
  border-radius: 20px;
  background: linear-gradient(180deg, #1a2c3c, #141f2a) !important;
  color: var(--ink) !important;
  box-shadow: 0 28px 70px rgba(8, 16, 24, 0.45) !important;
}

@media (min-width: 1100px) {
  .prep-setlist-preview-dialog {
    width: min(720px, calc(100vw - 64px));
  }
}

.prep-setlist-preview-form {
  display: grid;
  gap: 10px;
  padding: 22px 22px 18px;
}

.prep-setlist-preview-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prep-setlist-preview-dialog h2 {
  margin: 0;
  color: var(--ink) !important;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.prep-setlist-preview-meta {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.prep-setlist-preview-body {
  display: grid;
  gap: 18px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.prep-setlist-preview-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.prep-setlist-preview-set-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.prep-setlist-preview-set-head strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prep-setlist-preview-set-head span {
  color: var(--muted);
  font-size: 11px;
}

.prep-setlist-preview-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prep-setlist-preview-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.16);
}

.prep-setlist-preview-row:last-child {
  border-bottom: 0;
}

.prep-setlist-preview-num {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.prep-setlist-preview-title {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
}

.prep-setlist-preview-dur {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.prep-setlist-preview-empty {
  margin: 0;
  color: var(--muted);
}

.prep-setlist-preview-dialog .dialog-close-button {
  color: var(--muted);
}

.prep-setlist-preview-dialog menu {
  margin-top: 8px;
}

.prep-setlist-preview-dialog menu button {
  min-height: 36px;
}

.pianist-statistics-concert-picker {
  display: grid;
  gap: 8px;
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.pianist-statistics-concert-picker select {
  min-height: 40px;
}

.setlist-quality-dialog form {
  display: grid;
  gap: 12px;
}

.setlist-quality-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.setlist-quality-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.setlist-import-dialog textarea {
  min-height: 170px;
  padding: 12px;
  resize: vertical;
  line-height: 1.45;
}

.setlist-import-intro {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

.setlist-import-intro p {
  margin: 0;
}

.setlist-import-intro-lead {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}

.setlist-import-intro-tip {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.88;
}

.setlist-import-summary {
  margin: -4px 0 0;
  color: #a8d8c4;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setlist-import-preview {
  display: grid;
  gap: 5px;
  max-height: min(32vh, 260px);
  overflow: auto;
}

.setlist-import-preview-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  cursor: grab;
  text-align: left;
}

.setlist-import-preview-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.setlist-import-preview-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b9f0c7;
  font-size: 13px;
}@media (hover: hover) {

.unknown-primary-log:hover,
.unknown-primary-log:focus-visible {
  border-color: rgba(143, 217, 173, 0.42);
  background: rgba(143, 217, 173, 0.11);
  outline: none;
}}

.pause-playback-panel {
  display: grid;
  grid-template-columns: 64px minmax(210px, 1.2fr) minmax(180px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(239, 190, 72, 0.62);
  border-radius: 14px;
  background:
    radial-gradient(circle at 7% 50%, rgba(242, 192, 67, 0.19), transparent 23%),
    linear-gradient(135deg, rgba(52, 43, 23, 0.98), rgba(24, 28, 34, 0.98));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.live-panel.is-pause-player-open .pause-playback-panel {
  grid-template-columns: 64px minmax(210px, 1fr) auto;
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: none;
}

.live-panel.is-pause-player-open .pause-player-playlist {
  display: none !important;
}

.live-panel.is-pause-player-open .pause-playback-actions {
  grid-column: 3;
}

.live-panel.is-pause-player-open .split {
  padding: 8px;
  border: 1px solid rgba(239, 190, 72, 0.62);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, rgba(37, 32, 22, 0.96), rgba(17, 23, 29, 0.98));
}

.pause-playback-panel div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pause-playback-panel small {
  color: #e7bd58;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.pause-playback-panel strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff5d6;
  font-size: 17px;
}

.pause-playback-panel button {
  flex: 0 0 auto;
  min-height: 28px;
  font-size: 11px;
}

.pause-player-artwork {
  width: 58px;
  height: 58px;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(255, 211, 102, 0.72);
  border-radius: 13px;
  background: linear-gradient(145deg, #dca62f, #765619);
  color: #fff8e3;
  font-size: 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 7px 16px rgba(0, 0, 0, 0.26);
}

.pause-player-main {
  gap: 5px !important;
}

.pause-player-progress-row {
  display: grid !important;
  grid-template-columns: 38px minmax(100px, 1fr) 38px;
  align-items: center;
  gap: 7px !important;
}

.pause-player-progress-row time {
  color: #d9d3c2;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.pause-player-progress-row input[type="range"] {
  width: 100%;
  min-height: 20px;
  accent-color: #efbd48;
}

.pause-player-playlist {
  gap: 4px !important;
}

.pause-playback-panel select {
  min-width: 0;
  width: 100%;
}

.pause-playback-actions {
  display: flex !important;
  grid-auto-flow: column;
  gap: 5px !important;
}

.pause-playback-actions button:not(.continue-concert-button) {
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border-color: rgba(239, 190, 72, 0.42);
  background: rgba(239, 190, 72, 0.09);
  color: #ffe5a0;
  font-size: 17px;
}

.pause-playback-actions .continue-concert-button {
  min-height: 38px;
  padding: 0 12px;
  border-color: rgba(122, 216, 80, 0.7);
  background: rgba(122, 216, 80, 0.16);
  color: #baf49d;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.live-progress-tracker.is-playback-mode {
  border-color: rgba(239, 190, 72, 0.62);
  background:
    radial-gradient(circle at 14% 50%, rgba(239, 190, 72, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(49, 39, 20, 0.98), rgba(18, 22, 29, 0.99));
}

.live-progress-tracker.is-playback-mode .live-progress-piece-heading > span {
  color: #e7bd58;
}

.live-overview-row .live-progress-tracker.is-playback-mode .live-progress-status {
  top: 8px !important;
  right: auto !important;
  left: 136px !important;
  color: #ffd45c;
}

.live-overview-row .live-progress-tracker.is-playback-mode .live-progress-status strong {
  color: #ffd45c;
  font-size: 30px !important;
  font-weight: 900;
}

.setlist li.is-playback-entry,
.played-history-list li.is-pause-music-entry {
  border-color: rgba(239, 190, 72, 0.58);
  background: rgba(239, 190, 72, 0.13);
}

.live-tap-confirmation {
  position: fixed;
  z-index: 10000;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 12px 18px;
  border: 2px solid #72ed67;
  border-radius: 14px;
  background: rgba(8, 31, 22, 0.96);
  color: #efffed;
  box-shadow: 0 0 34px rgba(57, 255, 20, 0.42);
  pointer-events: none;
}

.live-tap-confirmation span {
  color: #72ed67;
  font-size: 28px;
  font-weight: 900;
}

.live-tap-confirmation strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
}

.live-tap-confirmation.is-setlist-import-confirmation {
  display: grid;
  gap: 3px;
  align-items: start;
  border-color: rgba(202, 168, 100, 0.58);
  background: rgba(18, 32, 35, 0.97);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), 0 0 26px rgba(202, 168, 100, 0.16);
}

.live-tap-confirmation.is-setlist-import-confirmation strong {
  color: #caa864;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-tap-confirmation.is-setlist-import-confirmation small {
  color: var(--muted);
  font-size: 12px;
}

.live-tap-confirmation[hidden] {
  display: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink);
}

.checkbox-label input {
  width: auto;
}

.concert-notes-box,
.archive-notes-box {
  margin: -3px 0 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--glass-soft);
  color: var(--muted);
}

.concert-notes-box strong,
.archive-notes-box strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12px;
}

.concert-notes-box p,
.archive-notes-box p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.archive-notes-box {
  margin: 7px 0 3px;
}

.audio-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa29a;
  box-shadow: 0 0 0 3px rgba(154, 162, 154, 0.13);
  flex: 0 0 auto;
}

.audio-dot.is-recording {
  background: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.17);
}

.audio-dot.is-error {
  background: #d9a622;
  box-shadow: 0 0 0 3px rgba(217, 166, 34, 0.18);
}

.status-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #28a05f;
  box-shadow: 0 0 0 3px rgba(40, 160, 95, 0.16);
  flex: 0 0 auto;
}

.status-light.is-paused {
  background: #d9a622;
  box-shadow: 0 0 0 3px rgba(217, 166, 34, 0.2);
}

.status-light.is-ended,
.status-light.is-idle {
  background: #9aa29a;
  box-shadow: 0 0 0 3px rgba(154, 162, 154, 0.16);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.split > div {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.live-list,
.setlist {
  display: grid;
  align-content: start;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: rgba(5, 14, 22, 0.20);
  padding: 8px;
}

.live-panel .live-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 8px 0 0;
}

.is-pause-playlist-heading {
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid rgba(239, 190, 72, 0.48);
  border-radius: 999px;
  background: rgba(239, 190, 72, 0.12);
  color: #d4a52f;
  font-size: 12px;
  letter-spacing: 0.035em;
}

.live-history-source {
  display: none !important;
}

.live-list:empty,
.setlist:empty {
  min-height: 80px;
}

#archiveView {
  min-height: 0;
}

#archiveView.is-active {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 18px 18px;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.archive-list {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 12px;
  scroll-padding-bottom: 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.archive-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.archive-list > .archive-item {
  display: grid;
  height: auto;
  max-height: none;
  min-height: 5.5rem;
  margin: 0 0 7px;
  overflow: visible;
}

.concerts-workbench {
  display: grid;
  grid-template-columns: minmax(185px, 220px) minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.concerts-sidebar,
.concerts-main {
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.concerts-sidebar { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.concerts-main { display: flex; flex-direction: column; padding: 14px; overflow: hidden; min-height: 0; }
.concerts-main.is-archive-collection {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow);
  --archive-tray-fill: rgba(255, 255, 255, 0.04);
  --archive-folder-fill: var(--panel);
  --archive-tab-idle-offset: 9px;
  --archive-tab-height: 40px;
  --archive-tab-radius: 12px;
  --archive-tab-inset: 12px;
  --archive-tab-inner-radius: calc(var(--radius-panel) - 1px);
}

:root[data-theme="light"] .concerts-main.is-archive-collection {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  box-shadow: var(--glass-shadow);
  --archive-tray-fill: rgba(36, 52, 54, 0.07);
}

.concerts-main.is-archive-collection[data-archive-submode="drafts"],
.concerts-main.is-archive-collection[data-archive-submode="trash"] {
  --archive-folder-fill: color-mix(in srgb, var(--panel) 82%, rgba(122, 158, 183, 0.18) 18%);
}

:root[data-theme="light"] .concerts-main.is-archive-collection[data-archive-submode="drafts"],
:root[data-theme="light"] .concerts-main.is-archive-collection[data-archive-submode="trash"] {
  --archive-folder-fill: rgba(255, 255, 255, 0.94);
}

.archive-collection-chrome {
  flex: 0 0 auto;
  padding: 0;
  min-width: 0;
}

.archive-collection-chrome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
  min-height: calc(var(--archive-tab-height) + var(--archive-tab-idle-offset));
  padding: 0 14px 0 0;
  border-bottom: 1px solid var(--line);
  background: var(--archive-tray-fill);
}

.archive-collection-tabs {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  gap: 0;
  padding: 0 0 0 var(--archive-tab-inset);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.archive-collection-chrome .archive-header-actions {
  flex: 0 0 auto;
  margin-left: 0;
  align-self: center;
  padding: 0 0 8px;
}

.archive-register-tab {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  height: calc(var(--archive-tab-height) - var(--archive-tab-idle-offset));
  margin: 0 0 -1px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--archive-tab-radius) var(--archive-tab-radius) 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  overflow: visible;
  cursor: pointer;
  transition: color 160ms ease, height 160ms ease, background 160ms ease, border-color 160ms ease;
}@media (hover: hover) {

.archive-register-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
}}

.archive-register-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}@media (hover: hover) {

.archive-register-tab.is-active,
.archive-register-tab.is-active:hover {
  z-index: 3;
  height: var(--archive-tab-height);
  padding: 0 20px;
  border-color: var(--line) var(--line) var(--archive-folder-fill);
  background: var(--archive-folder-fill);
  color: var(--ink);
  font-weight: 800;
}}

.archive-register-tab:not(.is-active) + .archive-register-tab:not(.is-active) {
  border-left-color: var(--line);
  border-top-left-radius: 0;
}

.concerts-main.is-archive-collection .archive-list {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 0 0 var(--archive-tab-inner-radius) var(--archive-tab-inner-radius);
  background: var(--archive-folder-fill);
  box-shadow: none;
}

.archive-collection-tabs .archive-register-tab:not(.is-active) {
  font-weight: 650;
}

.archive-submode-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 4px 2px 10px;
}

.archive-submode-toolbar-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.archive-submode-toolbar-copy strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-submode-toolbar-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.archive-submode-clear-btn {
  min-height: 36px;
  padding: 0 12px;
  border-color: rgba(196, 110, 110, 0.35);
  background: rgba(196, 110, 110, 0.10);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.archive-submode-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.concerts-main[data-archive-submode="drafts"] .archive-list > .archive-item,
.concerts-main[data-archive-submode="trash"] .archive-list > .archive-item,
.archive-item.is-draft-item,
.archive-item.trash-item {
  min-height: 0;
  margin-bottom: 6px;
  border-radius: 12px;
  border-color: rgba(122, 158, 183, 0.14);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}@media (hover: hover) {

.concerts-main[data-archive-submode="drafts"] .archive-item:hover,
.concerts-main[data-archive-submode="drafts"] .archive-item:focus-within,
.concerts-main[data-archive-submode="trash"] .archive-item:hover,
.concerts-main[data-archive-submode="trash"] .archive-item:focus-within,
.archive-item.is-draft-item:hover,
.archive-item.trash-item:hover {
  box-shadow: none;
  transform: none;
}}

.concerts-main[data-archive-submode="trash"] .archive-item,
.archive-item.trash-item {
  border-color: rgba(160, 120, 120, 0.22);
  background: rgba(28, 18, 18, 0.28);
}

.concerts-main[data-archive-submode="drafts"] .archive-item strong,
.archive-item.is-draft-item strong,
.concerts-main[data-archive-submode="trash"] .archive-item strong,
.archive-item.trash-item strong {
  font-size: 15px;
  font-weight: 750;
}

.concerts-main[data-archive-submode="drafts"] .archive-event-summary,
.archive-item.is-draft-item .archive-event-summary,
.concerts-main[data-archive-submode="trash"] .archive-event-summary,
.archive-item.trash-item .archive-event-summary {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px 12px;
}

.concerts-main[data-archive-submode="drafts"] .archive-event-date,
.archive-item.is-draft-item .archive-event-date,
.concerts-main[data-archive-submode="trash"] .archive-event-date {
  margin-top: 0;
  font-size: 13px;
}

.concerts-main[data-archive-submode="drafts"] .archive-actions,
.archive-item.is-draft-item .archive-actions,
.concerts-main[data-archive-submode="trash"] .archive-actions,
.archive-item.trash-item .archive-actions {
  padding: 6px 10px;
  border-top: 0;
  background: transparent;
}

.concerts-sidebar .archive-mode-switch {
  display: grid;
  width: 100%;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.concerts-sidebar .archive-mode-switch button {
  justify-content: flex-start;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-align: left;
  font-size: 14px;
}

.concerts-sidebar .archive-mode-switch button.is-active { border-color: var(--selected-border); background: var(--selected); }

.concerts-sidebar .archive-mode-switch button.is-active,
:root[data-theme="light"] .concerts-sidebar .archive-mode-switch button.is-active {
  border-color: transparent !important;
  background: var(--selected) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.concert-dashboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.concert-dashboard-next-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  padding: 24px 26px;
  border: 1px solid rgba(122, 199, 167, 0.48);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.24), rgba(40, 100, 160, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.18),
    0 0 36px rgba(122, 199, 167, 0.2),
    0 16px 40px rgba(0, 0, 0, 0.18);
}
.concert-dashboard-next-hero-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 20px;
}

.concert-dashboard-next-hero-top .concert-dashboard-next-hero-main {
  grid-column: auto;
  flex: 1;
  min-width: 0;
}

.concert-dashboard-next-hero-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.concert-dashboard-next-hero-kicker {
  color: rgba(168, 216, 196, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.concert-dashboard-next-hero-title {
  color: var(--ink);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 850;
  line-height: 1.2;
}
.concert-dashboard-next-hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.concert-dashboard-next-hero-title-row .concert-dashboard-next-hero-countdown {
  margin-inline: 2px 0;
}
.concert-dashboard-next-hero-timing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin-top: 4px;
}
.concert-dashboard-next-hero-time {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3.8vw, 38px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.concert-dashboard-next-hero-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(122, 199, 167, 0.26) 0%, rgba(88, 178, 152, 0.13) 30%, rgba(122, 199, 167, 0.045) 54%, rgba(122, 199, 167, 0) 68%),
    rgba(255, 255, 255, 0.055);
  box-shadow: none;
}
.concert-dashboard-next-hero-countdown .countdown-prefix,
.concert-dashboard-next-hero-countdown .countdown-label {
  color: var(--muted);
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 650;
}
.concert-dashboard-next-hero-countdown .countdown-value {
  color: rgba(186, 230, 210, 0.98);
  font-size: clamp(36px, 5.4vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.concert-dashboard-next-hero-countdown .countdown-unit {
  color: rgba(168, 216, 196, 0.95);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 850;
  line-height: 1;
}
.concert-dashboard-next-hero-countdown.is-imminent .countdown-label {
  color: rgba(186, 230, 210, 0.98);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 850;
}
.concert-dashboard-next-hero-countdown.is-imminent {
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(122, 199, 167, 0.32) 0%, rgba(88, 178, 152, 0.16) 30%, rgba(122, 199, 167, 0.055) 54%, rgba(122, 199, 167, 0) 68%),
    rgba(255, 255, 255, 0.06);
}
.concert-dashboard-next-hero-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.concert-dashboard-start-prompt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid rgba(122, 199, 167, 0.52);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.28), rgba(122, 199, 167, 0.12));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.16),
    0 0 28px rgba(122, 199, 167, 0.22);
  color: var(--ink);
  text-align: left;
}

.concert-dashboard-start-prompt.is-due {
  border-color: rgba(186, 230, 210, 0.72);
  animation: dashboard-start-prompt-pulse 2.4s ease-in-out infinite;
}

@keyframes dashboard-start-prompt-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(122, 199, 167, 0.16), 0 0 28px rgba(122, 199, 167, 0.22); }
  50% { box-shadow: 0 0 0 1px rgba(186, 230, 210, 0.28), 0 0 36px rgba(122, 199, 167, 0.36); }
}

.concert-dashboard-start-prompt-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(220, 248, 236, 0.98);
  font-size: 18px;
  font-weight: 900;
}

.concert-dashboard-start-prompt-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.concert-dashboard-start-prompt-copy strong {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 900;
  line-height: 1.15;
}

.concert-dashboard-start-prompt-copy small {
  color: rgba(220, 248, 236, 0.88);
  font-size: 13px;
  line-height: 1.35;
}

.concert-dashboard-next-hero > .primary-action {
  grid-column: 1 / -1;
  justify-self: end;
  min-height: 44px;
}

.concert-dashboard-upcoming-item.has-start-prompt {
  grid-template-columns: minmax(0, 1fr);
}

.concert-dashboard-upcoming-item .concert-dashboard-start-prompt {
  grid-column: 1 / -1;
  min-height: 64px;
  padding: 12px 14px;
}

.concert-dashboard-next-hero-countdown.is-overdue {
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(255, 196, 120, 0.24) 0%, rgba(232, 168, 88, 0.12) 30%, rgba(255, 196, 120, 0.04) 54%, rgba(255, 196, 120, 0) 68%),
    rgba(255, 255, 255, 0.05);
}

:root[data-theme="light"] .concert-dashboard-next-hero-countdown {
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(122, 199, 167, 0.2) 0%, rgba(88, 178, 152, 0.1) 30%, rgba(122, 199, 167, 0.035) 54%, rgba(122, 199, 167, 0) 68%),
    rgba(255, 255, 255, 0.78);
}

:root[data-theme="light"] .concert-dashboard-next-hero-countdown.is-overdue {
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(255, 196, 120, 0.18) 0%, rgba(232, 168, 88, 0.09) 30%, rgba(255, 196, 120, 0.03) 54%, rgba(255, 196, 120, 0) 68%),
    rgba(255, 255, 255, 0.76);
}

:root[data-theme="light"] .concert-dashboard-next-hero-countdown.is-imminent {
  background:
    radial-gradient(ellipse 118% 96% at 50% 50%, rgba(122, 199, 167, 0.24) 0%, rgba(88, 178, 152, 0.12) 30%, rgba(122, 199, 167, 0.04) 54%, rgba(122, 199, 167, 0) 68%),
    rgba(255, 255, 255, 0.8);
}

.concert-prep-list-time {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.concert-dashboard-missed-prompt {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 196, 120, 0.28);
  border-radius: 14px;
  background: rgba(255, 196, 120, 0.08);
}

.concert-dashboard-missed-question {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.concert-dashboard-missed-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.concert-dashboard-missed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.concert-dashboard-missed-actions button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
}

@media (max-width: 720px) {
  .concert-prep-list-top {
    flex-direction: column;
    align-items: stretch;
  }

  .concert-prep-list-actions {
    justify-content: stretch;
  }

  .concert-prep-list-actions button {
    flex: 1 1 auto;
  }

  .concert-dashboard-next-hero-top,
  .concert-dashboard-upcoming-top,
  .concert-dashboard-overdue-top {
    flex-direction: column;
    align-items: stretch;
  }

  .preparation-setlist-view-tile {
    width: 100%;
    max-width: none;
  }

  .concert-dashboard-upcoming-top .concert-dashboard-upcoming-actions {
    width: 100%;
    justify-content: stretch;
  }

  .concert-dashboard-next-hero-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.concert-prep-list-item .concert-dashboard-start-prompt,
.concert-prep-list-item .concert-dashboard-missed-prompt {
  grid-column: auto;
}

.concert-dashboard-overdue {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(243, 201, 121, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(243, 201, 121, 0.1), rgba(255, 255, 255, 0.03));
}

.concert-dashboard-overdue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.concert-dashboard-overdue-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}

.concert-dashboard-overdue-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.concert-dashboard-overdue-list {
  display: grid;
  gap: 8px;
}

.concert-dashboard-overdue-item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(243, 201, 121, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.concert-dashboard-overdue-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.concert-dashboard-overdue-top .concert-dashboard-overdue-copy {
  flex: 1;
  min-width: 0;
}

.concert-dashboard-overdue-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.concert-dashboard-overdue-copy strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}

.concert-dashboard-overdue-copy p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.concert-dashboard-overdue-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(243, 201, 121, 0.18);
  color: rgba(243, 201, 121, 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.concert-dashboard-overdue-note {
  margin: 0;
  font-size: 12px;
}

.concert-dashboard-overdue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.concert-dashboard-overdue-actions button {
  flex: 0 0 auto;
}
.concert-dashboard-next-hero button {
  min-height: 44px;
}

@media (max-width: 720px) {
  .concert-dashboard-next-hero {
    padding: 20px 18px;
    gap: 14px;
  }

  .concert-dashboard-next-hero-timing {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .concert-dashboard-next-hero > .primary-action,
  .concert-dashboard-next-hero button {
    width: 100%;
    justify-self: stretch;
  }
}

.concert-dashboard-top,
.concert-dashboard-card,
.concert-dashboard-actions { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); }
.concert-dashboard-top { grid-column: 1/-1; display: block; padding: 14px 16px; }
.concert-dashboard-top-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 18px;
}
.concert-dashboard-top-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.concert-dashboard-build-tile {
  --dashboard-build-ink: rgba(132, 162, 146, 0.92);
  --dashboard-build-muted: rgba(132, 162, 146, 0.66);
  --dashboard-build-border: rgba(132, 162, 146, 0.24);
  --dashboard-build-fill: rgba(132, 162, 146, 0.1);
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 118px;
  max-width: min(240px, 42vw);
  padding: 10px 12px;
  border: 1px solid var(--dashboard-build-border);
  border-radius: 14px;
  background: var(--dashboard-build-fill);
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.concert-dashboard-build-tile-kicker {
  color: var(--dashboard-build-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.concert-dashboard-build-tile-version {
  color: var(--dashboard-build-ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.1;
}
.concert-dashboard-build-tile-note {
  color: var(--dashboard-build-muted);
  font-size: 11px;
  line-height: 1.35;
}
:root[data-theme="light"] .concert-dashboard-build-tile {
  --dashboard-build-ink: rgba(58, 92, 76, 0.88);
  --dashboard-build-muted: rgba(58, 92, 76, 0.62);
  --dashboard-build-border: rgba(58, 92, 76, 0.18);
  --dashboard-build-fill: rgba(58, 92, 76, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.concert-dashboard-upcoming {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(122, 199, 167, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.16);
}
.concert-dashboard-upcoming-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.concert-dashboard-upcoming-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}
.concert-dashboard-upcoming-head span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.concert-dashboard-upcoming-head button {
  flex: 0 0 auto;
}
.concert-dashboard-upcoming-list {
  display: grid;
  gap: 8px;
}
.concert-dashboard-upcoming-item {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.concert-dashboard-upcoming-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.concert-dashboard-upcoming-top .concert-dashboard-upcoming-copy {
  flex: 1;
  min-width: 0;
}
.concert-dashboard-upcoming-item.is-next {
  border-color: rgba(122, 199, 167, 0.34);
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: 0 0 0 1px rgba(122, 199, 167, 0.12);
}
.concert-dashboard-upcoming-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.concert-dashboard-upcoming-copy strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}
.concert-dashboard-upcoming-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.concert-dashboard-upcoming-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid rgba(122, 199, 167, 0.28);
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.12);
  color: rgba(186, 214, 204, 0.95);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.concert-dashboard-upcoming-item.is-next .concert-dashboard-upcoming-badge {
  border-color: rgba(122, 199, 167, 0.42);
  background: rgba(122, 199, 167, 0.2);
}
.concert-dashboard-upcoming-item button {
  flex: 0 0 auto;
}

.concert-dashboard-upcoming-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.concert-dashboard-empty-plan {
  grid-column: 1 / -1;
  border: 1px solid rgba(122, 199, 167, 0.42);
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.2), rgba(40, 100, 160, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.14),
    0 0 28px rgba(122, 199, 167, 0.16),
    0 14px 32px rgba(0, 0, 0, 0.16);
}
.concert-dashboard-empty-plan > strong {
  color: var(--ink);
}
.concert-dashboard-empty-plan .primary-action {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.18);
}
.concert-dashboard-top strong { display: block; color: var(--ink); font-size: 18px; font-weight: 850; }
.concert-dashboard-top span,
.concert-dashboard-card p,
.concert-dashboard-card li,
.concert-dashboard-card dt { color: var(--muted); }
.concert-dashboard-status,
.concert-dashboard-card-title small { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 850; }
.concert-dashboard-status.is-ready,
.concert-dashboard-card-title small.is-ready { color: var(--accent); }
.concert-dashboard-status.is-attention,
.concert-dashboard-card-title small.is-attention { color: var(--warn); }
.concert-dashboard-card { display: grid; gap: 12px; align-content: start; padding: 16px; }
.concert-dashboard-card-wide { grid-column: 1/-1; }
.concert-dashboard-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.concert-dashboard-card-title span,
.concert-dashboard-card > strong { color: var(--ink); font-weight: 850; }
.concert-dashboard-card > strong { font-size: 20px; }
.concert-dashboard-card p,
.concert-dashboard-card ul { margin: 0; }
.concert-dashboard-card ul { display: grid; gap: 7px; padding: 0; list-style: none; }
.concert-dashboard-card button,
.concert-dashboard-actions button { width: fit-content; }
.concert-dashboard-card .concert-dashboard-task-item,
.concert-dashboard-card .concert-dashboard-activity-item,
.concert-dashboard-card .concert-dashboard-top-feature-item,
.concert-dashboard-card .concert-dashboard-feature-teaser,
.concert-dashboard-card .concert-dashboard-discover-toggle {
  width: 100%;
}
.concert-dashboard-card .concert-dashboard-activity-list,
.concert-dashboard-card .concert-dashboard-task-list,
.concert-dashboard-card .concert-dashboard-top-feature-list {
  gap: 0;
}
.concert-dashboard-card .concert-dashboard-activity-list {
  gap: 0;
}
.concert-dashboard-classification-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.075); }
.concert-dashboard-classification-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.concert-dashboard-stats { display: grid; gap: 8px; margin: 0; }
.concert-dashboard-stats div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.concert-dashboard-stats dd { margin: 0; color: var(--ink); font-size: 20px; font-weight: 900; }
.concert-dashboard-overview {
  padding: 12px 16px 14px;
}
.concert-dashboard-overview-compact {
  gap: 10px;
}
.concert-dashboard-stats-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
}
.concert-dashboard-stat-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border-right: 1px solid rgba(122, 158, 183, 0.18);
}
.concert-dashboard-stat-inline:first-child {
  padding-left: 0;
}
.concert-dashboard-stat-inline:last-child {
  border-right: 0;
  padding-right: 0;
}
.concert-dashboard-stat-inline strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1;
}
.concert-dashboard-stat-inline span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.concert-dashboard-stat {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.concert-dashboard-stat strong {
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.concert-dashboard-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.concert-dashboard-stat.is-works { border-color: rgba(37, 107, 90, 0.28); background: linear-gradient(160deg, rgba(37, 107, 90, 0.14), rgba(255, 255, 255, 0.03)); }
.concert-dashboard-stat.is-concerts { border-color: rgba(92, 72, 160, 0.26); background: linear-gradient(160deg, rgba(92, 72, 160, 0.13), rgba(255, 255, 255, 0.03)); }
.concert-dashboard-stat.is-venues { border-color: rgba(40, 100, 160, 0.26); background: linear-gradient(160deg, rgba(40, 100, 160, 0.13), rgba(255, 255, 255, 0.03)); }
.concert-dashboard-stat.is-profiles { border-color: rgba(143, 63, 82, 0.24); background: linear-gradient(160deg, rgba(143, 63, 82, 0.12), rgba(255, 255, 255, 0.03)); }
.concert-dashboard-tasks {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-self: stretch;
}
.concert-dashboard-care-progress {
  display: grid;
  gap: 6px;
}
.concert-dashboard-care-progress small {
  color: var(--muted);
  font-size: 11px;
}
.concert-dashboard-task-item.is-ready .concert-dashboard-task-copy small {
  color: rgba(168, 186, 198, 0.72);
}
.concert-dashboard-task-count.is-ready {
  background: rgba(122, 199, 167, 0.12);
  color: var(--accent);
}
.concert-dashboard-task-list {
  display: grid;
  gap: 0;
  align-content: start;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  scrollbar-width: none;
}
.concert-dashboard-task-list li {
  min-height: 0;
}
.concert-dashboard-task-list li.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}
.concert-dashboard-task-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.concert-dashboard-task-list li:last-child .concert-dashboard-task-item {
  border-bottom: 0;
}@media (hover: hover) {
.concert-dashboard-task-item:hover {
  border-color: rgba(122, 158, 183, 0.14);
  background: rgba(255, 255, 255, 0.03);
}}
.concert-dashboard-task-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.concert-dashboard-task-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}
.concert-dashboard-task-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.concert-dashboard-task-count {
  display: inline-flex;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(181, 94, 0, 0.14);
  color: var(--warn);
  font-size: 12px;
  font-weight: 850;
}

.concert-sync-panel {
  display: grid;
  gap: 18px;
  max-width: 720px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.concert-sync-panel .sync-center-summary {
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
}

.concert-sync-panel .sync-center-summary p {
  grid-template-columns: minmax(152px, 172px) minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0;
  line-height: 1.5;
  align-items: center;
}

.concert-sync-panel .sync-center-summary .sync-center-note {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
}

.concert-sync-panel .sync-diagnostics {
  margin: 0;
}

.sync-difference-card {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(122, 199, 167, 0.24);
  border-radius: 14px;
  background: rgba(122, 199, 167, 0.07);
}

.sync-difference-card.is-attention {
  border-color: rgba(214, 164, 60, 0.34);
  background: rgba(214, 164, 60, 0.08);
}

.sync-difference-card > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
}

.sync-difference-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sync-difference-list li {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.sync-difference-list li.is-warn {
  color: rgba(214, 164, 60, 0.98);
}

.sync-difference-suggestion {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.sync-difference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sync-difference-actions button {
  min-height: 36px;
  font-size: 13px;
}

.sync-difference-actions button.primary-action {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.16);
}

.sync-center-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.sync-diff-details {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--soft) 88%, transparent);
}

.sync-diff-detail-group {
  display: grid;
  gap: 6px;
}

.sync-diff-detail-group > strong {
  font-size: 12px;
  color: var(--ink);
}

.sync-diff-detail-group ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sync-diff-detail-group li {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.sync-diff-bucket {
  display: inline-block;
  min-width: 6.8rem;
  margin-right: 6px;
  color: var(--ink);
  font-weight: 650;
}

.concert-sync-panel .sync-center-action-row {
  margin-top: 2px;
}

.concert-sync-panel .sync-center-action-row .sync-center-primary-button {
  margin: 0;
}

.concert-sync-panel .sync-center-result {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(46, 125, 50, 0.12);
  color: var(--text-primary, #1b1b1b);
  font-size: 0.95rem;
  line-height: 1.35;
}

.concert-sync-status-line.is-complete {
  color: #2e7d32;
  font-weight: 600;
}

.sync-center-primary-button.is-sync-complete,
#settingsSyncNowBtn.is-sync-complete,
#syncAllDataBtn.is-sync-complete {
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.45);
  animation: sync-complete-pulse 1.2s ease-in-out 2;
}

@keyframes sync-complete-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.app-settings-dialog [data-settings-panel="sync"] .sync-center-result {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(46, 125, 50, 0.12);
  color: var(--text-primary, #1b1b1b);
  font-size: 0.95rem;
  line-height: 1.35;
}

.concert-sync-panel-header {
  display: grid;
  gap: 4px;
}

.concert-sync-panel-header strong {
  color: var(--ink);
  font-size: 18px;
}

.concert-sync-panel-header span {
  color: var(--muted);
  font-size: 13px;
}

.concert-dashboard-page-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}
.concert-dashboard-page-nav small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.concert-dashboard-page-arrow {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-control);
  font-size: 18px;
  line-height: 1;
}

.concert-dashboard-quick-access-compact {
  grid-column: 1 / -1;
  padding: 12px 16px;
  gap: 10px;
  align-self: stretch;
}

.concert-dashboard-quick-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.concert-dashboard-quick-link {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.concert-dashboard-quick-link-icon {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}@media (hover: hover) {

.concert-dashboard-quick-link:hover {
  border-color: rgba(122, 199, 167, 0.38);
  background: rgba(122, 199, 167, 0.1);
}}

.concert-dashboard-quick-link.is-live {
  border-color: rgba(122, 199, 167, 0.42);
  background: rgba(122, 199, 167, 0.12);
}

.concert-dashboard-discover-band {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.018);
}

.concert-dashboard-onboarding-band {
  border-color: rgba(232, 156, 62, 0.34);
  background: linear-gradient(145deg, rgba(232, 156, 62, 0.12), rgba(92, 72, 160, 0.08), rgba(255, 255, 255, 0.02));
}

.concert-dashboard-onboarding-band .concert-dashboard-feature-card-tour {
  margin: 0;
}

.concert-dashboard-discover-band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.concert-dashboard-discover-band-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.concert-dashboard-discover-band-head span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.concert-dashboard-discover-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px 16px;
  border-color: rgba(122, 158, 183, 0.16);
  background: rgba(255, 255, 255, 0.025);
}

.concert-dashboard-top-feature-list {
  display: grid;
  gap: 0;
  align-content: start;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  scrollbar-width: none;
}
.concert-dashboard-top-feature-list li {
  min-height: 3.9rem;
}
.concert-dashboard-top-feature-list li.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.concert-dashboard-top-feature-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}

.concert-dashboard-top-feature-list li:last-child .concert-dashboard-top-feature-item {
  border-bottom: 0;
}@media (hover: hover) {

.concert-dashboard-top-feature-item:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}}

.concert-dashboard-top-feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  font-size: 20px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.concert-dashboard-top-feature-item.is-teal .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(37, 107, 90, 0.55), rgba(122, 199, 167, 0.22));
}
.concert-dashboard-top-feature-item.is-violet .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(92, 72, 160, 0.55), rgba(160, 140, 220, 0.22));
}
.concert-dashboard-top-feature-item.is-amber .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(181, 94, 0, 0.52), rgba(230, 170, 70, 0.22));
}
.concert-dashboard-top-feature-item.is-rose .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(143, 63, 82, 0.55), rgba(210, 120, 140, 0.22));
}
.concert-dashboard-top-feature-item.is-sky .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(40, 100, 160, 0.55), rgba(90, 160, 210, 0.22));
}
.concert-dashboard-top-feature-item.is-lime .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(80, 130, 50, 0.52), rgba(150, 190, 90, 0.22));
}
.concert-dashboard-top-feature-item.is-coral .concert-dashboard-top-feature-icon {
  background: linear-gradient(145deg, rgba(190, 80, 60, 0.55), rgba(230, 140, 110, 0.22));
}

.concert-dashboard-top-feature-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.concert-dashboard-top-feature-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.3;
}

.concert-dashboard-top-feature-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.concert-dashboard-feature-teaser {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}@media (hover: hover) {

.concert-dashboard-feature-teaser:hover {
  background: transparent;
}}

.concert-dashboard-feature-teaser-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 18px;
  line-height: 1;
}

.concert-dashboard-feature-teaser-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.concert-dashboard-feature-teaser-copy strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.concert-dashboard-feature-teaser-copy p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.concert-dashboard-feature-teaser-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.concert-dashboard-discover-nav {
  display: none;
}

.concert-dashboard-discover-nav-btn {
  display: none;
}@media (hover: hover) {

.concert-dashboard-discover-nav-btn:hover {
  border-color: rgba(122, 199, 167, 0.34);
}}

.concert-dashboard-tour-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 2px 0 4px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.16);
  font-size: 22px;
}

.concert-dashboard-feature-card-tour.is-completed {
  border-color: rgba(122, 199, 167, 0.38);
  background: linear-gradient(160deg, rgba(122, 199, 167, 0.18), rgba(40, 100, 160, 0.12), rgba(255, 255, 255, 0.03));
  box-shadow: none;
}

.concert-dashboard-discover-tour-copy {
  display: grid;
  gap: 4px;
}

.concert-dashboard-discover-tour-copy > strong {
  font-size: 16px;
}

.concert-dashboard-discover-tour-copy > p {
  margin: 0;
}

.concert-dashboard-discover-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {

  .concert-dashboard-stats-strip {
    gap: 10px 0;
  }

  .concert-dashboard-stat-inline {
    padding: 0 12px;
  }

  .concert-dashboard-discover-tour-actions {
    justify-content: flex-start;
  }

  .concert-dashboard-next-hero,
  .concert-dashboard-empty-plan,
  .concert-dashboard-quick-access,
  .concert-dashboard-side-row,
  .concert-dashboard-tasks,
  .concert-dashboard-activities,
  .concert-dashboard-discover-unified,
  .concert-dashboard-discover-compact,
  .concert-dashboard-discover-panel {
    grid-column: 1 / -1;
  }

  .concert-dashboard-activities {
    width: 100%;
    max-width: none;
  }

  .concert-dashboard-quick-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.concert-dashboard-activities {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  justify-self: stretch;
  padding: 12px 16px;
}

.concert-dashboard-activities .concert-dashboard-activity-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-dashboard-activity-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.concert-dashboard-activity-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 8px 8px 8px 4px;
  border: 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.12);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}@media (hover: hover) {

.concert-dashboard-activity-item:hover {
  background: rgba(122, 199, 167, 0.07);
}}

.concert-dashboard-activity-list > li:last-child .concert-dashboard-activity-item {
  border-bottom: 0;
}

.concert-dashboard-more-link {
  width: fit-content;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}@media (hover: hover) {

.concert-dashboard-more-link:hover {
  color: var(--ink);
}}

.concert-dashboard-discover-tour {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
}

.concert-dashboard-discover-tour > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.concert-dashboard-discover-panel {
  grid-column: 1 / -1;
  gap: 14px;
  padding: 18px 20px 16px;
  border-color: rgba(122, 158, 183, 0.22);
  background:
    linear-gradient(160deg, rgba(40, 100, 160, 0.12), rgba(92, 72, 160, 0.08) 42%, rgba(255, 255, 255, 0.03));
  cursor: pointer;
}

.concert-dashboard-discover-panel.is-expanded {
  padding: 22px 24px 18px;
  border-color: rgba(122, 199, 167, 0.32);
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.2);
  cursor: default;
}

.concert-dashboard-discover-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.concert-dashboard-discover-tip h3,
.concert-dashboard-discover-known h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.2;
}

.concert-dashboard-discover-tip h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

.concert-dashboard-discover-panel .concert-dashboard-feature-teaser-copy strong {
  font-size: 17px;
}

.concert-dashboard-discover-panel .concert-dashboard-feature-teaser-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 22px;
}

.concert-dashboard-discover-rule {
  width: 100%;
  height: 0;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid rgba(122, 158, 183, 0.2);
}

.concert-dashboard-discover-known {
  display: grid;
  gap: 10px;
}

.concert-dashboard-discover-known-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.concert-dashboard-discover-known h3 {
  font-size: 16px;
}

.concert-dashboard-discover-panel .concert-dashboard-discover-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.concert-dashboard-discover-panel .concert-dashboard-discover-nav-btn {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.concert-dashboard-discover-panel .concert-dashboard-top-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.concert-dashboard-discover-panel .concert-dashboard-top-feature-list li {
  min-height: 0;
}

.concert-dashboard-discover-accordion-item {
  min-height: 0;
  list-style: none;
}

.concert-dashboard-discover-accordion-item.is-expanded {
  grid-column: 1 / -1;
}

.concert-dashboard-discover-accordion-card {
  display: grid;
  gap: 0;
  min-width: 0;
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.concert-dashboard-discover-panel .concert-dashboard-discover-accordion-card {
  border: 1px solid rgba(122, 158, 183, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.concert-dashboard-discover-accordion-card.is-open {
  border-color: rgba(122, 199, 167, 0.28);
  box-shadow: 0 0 0 1px rgba(122, 199, 167, 0.08);
}

.concert-dashboard-discover-accordion-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.concert-dashboard-discover-tip .concert-dashboard-discover-accordion-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.concert-dashboard-discover-tip .concert-dashboard-discover-accordion-card.is-open {
  border: 1px solid rgba(122, 199, 167, 0.22);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 0 1px rgba(122, 199, 167, 0.06);
}

.concert-dashboard-discover-tip .concert-dashboard-discover-accordion-toggle {
  align-items: start;
  padding: 0;
}

.concert-dashboard-discover-tip .concert-dashboard-discover-accordion-chevron {
  margin-top: 12px;
}

.concert-dashboard-discover-accordion-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.72;
  transition: transform 0.22s ease, opacity 0.2s ease;
}

.concert-dashboard-discover-accordion-chevron::before {
  content: "›";
  display: block;
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.concert-dashboard-discover-accordion-card.is-open .concert-dashboard-discover-accordion-chevron {
  transform: rotate(90deg);
  opacity: 1;
}

.concert-dashboard-discover-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease;
}

.concert-dashboard-discover-accordion-card.is-open .concert-dashboard-discover-accordion-body {
  grid-template-rows: 1fr;
}

.concert-dashboard-discover-accordion-body-inner {
  overflow: hidden;
  min-height: 0;
}

.concert-dashboard-discover-accordion-card.is-open .concert-dashboard-discover-accordion-body-inner {
  padding: 0 12px 12px;
}

.concert-dashboard-discover-tip .concert-dashboard-discover-accordion-card.is-open .concert-dashboard-discover-accordion-body-inner {
  padding: 0 0 4px;
}

.concert-dashboard-discover-accordion-about {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.concert-dashboard-discover-accordion-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.concert-dashboard-discover-accordion-meta div {
  display: grid;
  gap: 2px;
}

.concert-dashboard-discover-accordion-meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.concert-dashboard-discover-accordion-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.concert-dashboard-discover-accordion-cta {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(122, 199, 167, 0.34);
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}@media (hover: hover) {

.concert-dashboard-discover-accordion-cta:hover {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.18);
}}

.concert-dashboard-discover-panel .concert-dashboard-top-feature-item {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.concert-dashboard-discover-panel .concert-dashboard-top-feature-list li:last-child .concert-dashboard-top-feature-item {
  border-bottom: 0;
}

.concert-dashboard-discover-all {
  width: fit-content;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.concert-dashboard-discover-new {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.concert-dashboard-discover-new button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

@media (min-width: 800px) {
  .concert-dashboard-discover-panel .concert-dashboard-top-feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.concert-dashboard-activity-mark {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 107, 90, 0.12);
}

.concert-dashboard-activity-item.is-concert .concert-dashboard-activity-mark {
  background: #5c48a0;
  box-shadow: 0 0 0 4px rgba(92, 72, 160, 0.14);
}
.concert-dashboard-activity-item.is-prep .concert-dashboard-activity-mark {
  background: #256b5a;
  box-shadow: 0 0 0 4px rgba(37, 107, 90, 0.14);
}
.concert-dashboard-activity-item.is-setlist .concert-dashboard-activity-mark {
  background: #2864a0;
  box-shadow: 0 0 0 4px rgba(40, 100, 160, 0.14);
}
.concert-dashboard-activity-item.is-library .concert-dashboard-activity-mark {
  background: #8f3f52;
  box-shadow: 0 0 0 4px rgba(143, 63, 82, 0.14);
}
.concert-dashboard-activity-item.is-sync .concert-dashboard-activity-mark {
  background: #508232;
  box-shadow: 0 0 0 4px rgba(80, 130, 50, 0.14);
}
.concert-dashboard-activity-item.is-delete .concert-dashboard-activity-mark {
  background: #b55e00;
  box-shadow: 0 0 0 4px rgba(181, 94, 0, 0.14);
}

.concert-dashboard-activity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.concert-dashboard-activity-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concert-dashboard-activity-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.concert-dashboard-activity-empty {
  margin: 0;
  padding: 8px 2px 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.concert-help-panel {
  display: grid;
  gap: 18px;
  max-width: 860px;
}

.concert-help-header {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.concert-help-header strong {
  color: var(--ink);
  font-size: 18px;
}

.concert-help-header span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.concert-help-quickstart {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(111, 196, 168, 0.28);
  border-radius: 20px;
  background: rgba(111, 196, 168, 0.08);
}

.concert-help-kicker {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.concert-help-quickstart h3,
.concert-help-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
}

.concert-help-quickstart-list {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.55;
}

.concert-help-quickstart-list li + li {
  margin-top: 8px;
}

.concert-help-quickstart-list strong {
  color: var(--ink);
}

.concert-help-rule {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 210, 122, 0.35);
  background: rgba(255, 210, 122, 0.1);
}

.concert-help-rule strong {
  color: #ffd27a;
  font-size: 14px;
}

.concert-help-rule p {
  margin: 0;
  color: var(--text, var(--ink));
  line-height: 1.45;
}

.concert-help-tour-button {
  width: fit-content;
  min-height: 42px;
}

.concert-help-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.concert-help-tour-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.concert-help-sections {
  display: grid;
  gap: 14px;
}

.concert-help-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.concert-help-step {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 158, 183, 0.12);
}

.concert-help-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.concert-help-step.is-emphasis {
  padding: 14px;
  border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: 14px;
  background: rgba(255, 210, 122, 0.08);
}

.concert-help-step h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.concert-help-lead {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.concert-help-body {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.5;
}

.concert-help-body li + li {
  margin-top: 6px;
}

.concert-help-tip {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(111, 196, 168, 0.24);
  background: rgba(111, 196, 168, 0.08);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.missing-media-choice-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
  line-height: 1.5;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.missing-media-choice-copy p {
  margin: 0;
}

.missing-media-choice-copy strong {
  color: var(--ink);
}

.concert-section-placeholder { display: grid; place-content: center; min-height: 320px; padding: 36px; border: 1px solid var(--line); border-radius: 20px; text-align: center; background: rgba(255,255,255,.025); }
.concert-section-placeholder span { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.concert-section-placeholder h3 { margin: 8px 0; color: var(--ink); font-size: 28px; }
.concert-section-placeholder p { max-width: 520px; margin: 0; color: var(--muted); }

.pianist-statistics-preview { display: grid; gap: 16px; align-content: start; }
.pianist-statistics-hero,
.pianist-stat-card,
.pianist-kpi-card { border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 18% 0%,rgba(122,231,188,.08),transparent 34%),rgba(255,255,255,.04); }
.pianist-statistics-hero { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.pianist-statistics-hero strong { display: block; color: var(--ink); font-size: clamp(24px,3vw,36px); font-weight: 900; }
.pianist-statistics-hero span,
.pianist-kpi-card span,
.pianist-stat-card-head span { color: var(--muted); }
.pianist-kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.pianist-kpi-card { display: grid; gap: 6px; min-height: 98px; align-content: center; padding: 14px 16px; }
.pianist-kpi-card strong { color: var(--ink); font-size: clamp(24px,2.8vw,36px); font-weight: 950; line-height: 1.05; }
.pianist-kpi-card span { font-size: 12px; line-height: 1.35; }
.pianist-stat-card { display: grid; gap: 14px; padding: 18px 20px; }
.pianist-stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.pianist-stat-card-head strong { color: var(--ink); font-size: 17px; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; line-height: 1.2; }
.pianist-stat-inline-value { color: var(--muted); font-size: 15px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.pianist-statistics-range { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pianist-statistics-range button { min-height: 32px; padding: 0 12px; border-color: var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 12px; font-weight: 800; }
.pianist-statistics-range button.is-active { border-color: rgba(122,231,188,.45); background: rgba(122,231,188,.14); color: var(--ink); }
.pianist-stat-chart-head { align-items: flex-start; flex-wrap: wrap; }
.pianist-stat-chart-head > div:first-child { display: grid; gap: 2px; }
.pianist-chart-mode-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pianist-chart-mode-switch button { min-height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.pianist-chart-mode-switch button.is-active { border-color: rgba(122,158,255,.45); background: rgba(122,158,255,.14); color: var(--ink); }
.pianist-stat-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.pianist-stat-card.is-wide { grid-column: 1 / -1; }
.pianist-metric-list { display: grid; gap: 8px; margin: 0; }
.pianist-metric-list div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(122,158,183,.13); }
.pianist-metric-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.pianist-metric-list dt, .pianist-metric-list dd { margin: 0; }
.pianist-metric-list dt { color: var(--muted); }
.pianist-metric-list dd { color: var(--ink); font-weight: 850; }
.pianist-activity-caption { margin: 0; font-size: 12px; line-height: 1.45; }
.pianist-activity-chart { display: grid; grid-template-columns: repeat(var(--activity-count,12),minmax(18px,1fr)); align-items: end; gap: 10px; min-height: 190px; padding: 8px 4px 0; }
.pianist-activity-chart span { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; min-width: 0; color: var(--muted); text-align: center; }
.pianist-activity-chart i { position: relative; align-self: end; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: 100%; min-height: 28px; height: var(--bar,12%); padding: 6px 4px 4px; border-radius: 999px 999px 8px 8px; background: linear-gradient(180deg,rgba(122,231,188,.95),rgba(72,151,134,.48)); box-sizing: border-box; }
.pianist-activity-chart i.is-concert-count { background: linear-gradient(180deg,rgba(122,158,255,.92),rgba(72,98,180,.52)); }
.pianist-activity-chart b { color: var(--ink); font-size: 12px; font-weight: 900; line-height: 1; }
.pianist-activity-month { overflow: hidden; font-size: 11px; font-weight: 700; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.pianist-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.pianist-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pianist-chart-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.pianist-chart-legend i.is-duration { background: linear-gradient(180deg,rgba(122,158,255,.92),rgba(72,98,180,.52)); }
.pianist-chart-legend i.is-pieces { background: linear-gradient(180deg,rgba(122,231,188,.95),rgba(72,151,134,.48)); }
.pianist-concert-detail-chart { display: grid; grid-template-columns: repeat(var(--month-count,12),minmax(56px,1fr)); align-items: end; gap: 10px; min-height: 220px; padding: 8px 4px 0; overflow-x: auto; }
.pianist-chart-month-column { display: grid; grid-template-rows: 1fr auto; gap: 8px; min-width: 0; height: 100%; text-align: center; }
.pianist-chart-month-bars { display: flex; align-items: flex-end; justify-content: center; gap: 5px; min-height: 190px; height: 100%; padding-top: 4px; }
.pianist-chart-concert-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; align-items: end; flex: 0 0 auto; width: 34px; height: 100%; }
.pianist-chart-mini-bar { display: flex; align-items: flex-start; justify-content: center; align-self: end; width: 100%; min-height: 18px; height: var(--bar,12%); padding: 4px 1px; border-radius: 6px 6px 4px 4px; box-sizing: border-box; overflow: hidden; }
.pianist-chart-mini-bar.is-duration { background: linear-gradient(180deg,rgba(122,158,255,.92),rgba(72,98,180,.52)); }
.pianist-chart-mini-bar.is-pieces { background: linear-gradient(180deg,rgba(122,231,188,.95),rgba(72,151,134,.48)); }
.pianist-chart-mini-bar b { color: var(--ink); font-size: 8px; font-weight: 900; line-height: 1.1; text-align: center; word-break: break-word; }
.pianist-top-works { display: grid; gap: 0; }
.pianist-top-works > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(122,158,183,.13); }
.pianist-top-works > div:last-child { border-bottom: 0; }
.pianist-top-works strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pianist-top-works span { color: var(--accent); font-weight: 850; }
.pianist-nerd-mode summary { cursor: pointer; color: var(--ink); font-weight: 900; }
.pianist-nerd-mode[open] summary { margin-bottom: 12px; }

@media (max-width: 760px) {
  .concerts-workbench { grid-template-columns: 1fr; }
  .concerts-sidebar { padding: 10px; }
  .concerts-sidebar .archive-mode-switch { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .concerts-sidebar .archive-mode-switch button { justify-content: center; min-height: 36px; padding: 0 8px; text-align: center; font-size: 12px; }
  .concert-dashboard { grid-template-columns: 1fr; }
  .concert-dashboard-upcoming-item {
    flex-direction: column;
    align-items: stretch;
  }
  .concert-dashboard-upcoming-item button {
    width: 100%;
  }
  .concert-dashboard-next-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .concert-dashboard-next-hero button {
    width: 100%;
  }
  .concert-dashboard-quick-links {
    grid-template-columns: 1fr;
  }
  .concert-dashboard-stat-inline {
    border-right: 0;
    padding: 4px 0;
    min-width: 42%;
  }
  .pianist-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pianist-statistics-hero { align-items: flex-start; flex-direction: column; }
  .pianist-statistics-range { justify-content: flex-start; }
  .pianist-stat-grid { grid-template-columns: 1fr; }
}

.archive-mode-switch {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 0 0 10px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass-field);
}

.archive-mode-switch button {
  min-height: 30px;
  padding: 0 12px;
  border-color: transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}@media (hover: hover) {

.archive-mode-switch button:hover {
  border-color: transparent;
  background: var(--soft);
  color: var(--ink);
}}

.archive-mode-switch button.is-active {
  background: var(--selected);
  color: var(--ink);
}

.saved-place-picker {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--glass-field);
}

.performance-venue-item .archive-event-summary strong {
  color: var(--accent-strong);
}

.live-browser {
  display: grid;
  grid-template-columns: minmax(230px, var(--live-collection-width, 230px)) 4px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 4px;
  row-gap: 0;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

@media (min-width: 1180px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .live-browser {
    grid-template-columns: minmax(230px, var(--live-collection-width, 230px)) 4px minmax(420px, 1fr);
    column-gap: 5px;
  }
}

.live-browser > .live-collections-header {
  grid-column: 1;
  grid-row: 1;
}

.live-collections-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px 6px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: rgba(5, 14, 22, 0.27);
}

.live-collections-header h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-collections-header .live-column-toggle {
  display: none !important;
}

.live-browser > .live-collections-header + .live-column {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  height: auto;
  overflow: hidden;
  margin-top: -1px;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.live-browser > .live-column-resizer {
  grid-row: 1 / span 2;
}

.live-browser > .live-column-resizer:first-of-type {
  grid-column: 2;
}

.live-browser > .live-works-column {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.live-browser > .live-column:last-child {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.live-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 16px;
  background: rgba(5, 14, 22, 0.27);
  padding: 8px;
}

.live-column h3 {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-collapsed-collection-context {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
}

.live-collapsed-collection-context strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 760;
}

.live-collapsed-collection-context small {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.live-column-toggle {
  width: 42px;
  min-width: 42px;
  min-height: 34px;
  margin-bottom: 0;
  padding: 0;
  border-color: rgba(122, 158, 183, 0.22);
  border-radius: var(--radius-list);
  background: var(--glass-field);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
  justify-self: start;
  z-index: 1;
}@media (hover: hover) {

.live-column-toggle:hover {
  border-color: rgba(122, 158, 183, 0.32);
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink);
}}

.live-browser.is-collapsed {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 10px;
}

.live-browser.is-collapsed .live-collections-header + .live-column,
.live-browser.is-collapsed .live-column-resizer {
  display: none;
}

.live-browser.is-collapsed > .live-collections-header {
  grid-column: 1;
  grid-row: 1;
}

.live-browser.is-collapsed > .live-column:last-child,
.live-browser.is-collapsed > .live-works-column {
  grid-column: 1;
  grid-row: 2;
}

.live-column-resizer {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 4px;
  min-height: 100%;
  border-radius: 999px;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  align-self: stretch;
}@media (hover: hover) {

.live-column-resizer:hover,
.live-column-resizer.is-dragging {
  background: rgba(122, 199, 167, 0.24);
}}

.live-collection-list {
  display: grid;
  align-content: start;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: none;
}

.live-collection-group-block {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid rgba(122, 158, 183, .22);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
.live-collection-group-block.is-live { border-color: rgba(122,199,167,.3); background: rgba(122,199,167,.045); }
.live-collection-group-block.is-setlist-assistant { border-color: rgba(196, 168, 255, .34); background: rgba(196, 168, 255, .06); }
.live-collection-group-block.is-pause { border-color: rgba(201,173,103,.25); background: rgba(201,173,103,.035); }
.live-collection-group-block .live-collection-group-heading { padding: 2px 3px 7px; }
.live-collection-group-block .live-collection-group-empty { padding-inline: 3px; }
.live-collection-group-heading-main {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}
.live-collection-group-heading-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.live-list,
.live-collection-list,
.live-column {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.live-list::-webkit-scrollbar,
.live-collection-list::-webkit-scrollbar,
.live-column::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.live-collection-list button {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  justify-content: space-between;
  gap: 5px;
  font-size: 14px;
  text-align: left;
  box-sizing: border-box;
  border-color: rgba(122, 158, 183, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

.live-collection-list button:not(.is-active) {
  border-color: transparent;
  background: transparent;
}@media (hover: hover) {

.live-collection-list button:not(.is-active):hover,
.live-collection-list button:not(.is-active):focus-visible {
  border-color: transparent;
  background: rgba(122, 199, 167, 0.08);
}}

.live-collection-list button:focus,
.live-collection-list button:focus-visible {
  outline: none;
}

.live-collection-list button::before {
  display: none;
}

.live-collection-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.live-collection-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.18;
}

.live-collection-list button small {
  color: var(--muted);
  font-size: 12px;
}

.live-collection-list button.is-active {
  background: var(--selected);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}

.live-collection-list button.is-active small {
  color: var(--accent);
}

.live-collection-group-heading {
  padding: 10px 10px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.live-collection-list .live-collection-group-heading:first-child {
  padding-top: 3px;
}

.live-collection-group-empty {
  margin: 0;
  padding: 4px 10px 9px;
  color: var(--muted);
  font-size: 11px;
}

.live-list button {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.live-list > button {
  width: auto;
  margin: 2px 4px;
  border-color: transparent;
  border-radius: var(--radius-list);
  background: transparent;
}

.live-list > button,
.live-work-row {
  border-bottom: 0;
}

.live-work-row.is-current {
  border-radius: 12px;
}@media (hover: hover) {

.live-list > button:hover {
  border-color: transparent;
  background: var(--soft);
}}

.live-work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 52px;
  column-gap: 8px;
  row-gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.live-work-column-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: 30px;
  margin-bottom: 8px;
  padding: 0 8px 0 2px;
}

.live-work-column-header h3 {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.live-asset-folder-button {
  display: none !important;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  display: grid;
  place-items: center;
  justify-self: stretch;
}

#liveAssignMediaBtn,
#liveAssignMediaBtn .live-asset-folder-icon {
  width: 52px;
}@media (hover: hover) {

.live-asset-folder-button:hover,
.live-asset-folder-button:focus-visible {
  border-color: rgba(126, 196, 190, 0.42);
  background: rgba(0, 0, 0, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(126, 196, 190, 0.10);
}}

.live-asset-folder-icon {
  position: relative;
  width: 52px;
  height: 44px;
  display: inline-grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #a8d8d4;
}

.live-asset-folder-icon::before {
  display: none;
}

.live-asset-folder-icon i {
  align-self: end;
  color: #a8d8d4;
  font-size: 19px;
  font-style: normal;
  font-weight: 850;
  line-height: 0.9;
}

.live-asset-folder-icon b {
  align-self: start;
  color: rgba(198, 216, 228, 0.78);
  font-size: 8px;
  font-weight: 860;
  line-height: 1;
  letter-spacing: 0.02em;
}@media (hover: hover) {

.live-work-row:hover,
.live-work-row:focus-within {
  background: transparent;
}}

.live-work-row > button:first-child {
  min-width: 0;
  min-height: 52px;
  padding: 7px 9px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 760;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.live-work-row > button:first-child:focus:not(:focus-visible) {
  outline: none;
}

.live-work-row.is-confirmed > button:first-child {
  border-color: rgba(122, 158, 183, 0.18);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
  animation: liveWorkHapticPulse 340ms cubic-bezier(0.19, 0.78, 0.24, 1) 1;
  transform-origin: center;
}

.live-work-row.is-confirmed > button:first-child strong {
  animation: liveWorkNameFlash 0.95s ease-out;
}

.live-progress-piece > strong.is-entering-live-block {
  animation: liveTitleSettle 0.95s ease-out;
}

@keyframes liveWorkNameFlash {
  0% { color: var(--ink); text-shadow: none; }
  28% { color: #8fd9ad; text-shadow: 0 0 12px rgba(155, 232, 120, 0.24); }
  100% { color: var(--ink); text-shadow: none; }
}

@keyframes liveTitleSettle {
  0% { opacity: 0.25; transform: translateY(6px); }
  35% { opacity: 1; color: #8fd9ad; text-shadow: 0 0 12px rgba(155, 232, 120, 0.24); }
  100% { opacity: 1; transform: translateY(0); color: var(--ink); text-shadow: none; }
}

@keyframes liveWorkHapticPulse {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  26% {
    transform: translate3d(1.5px, 0, 0) scale(1.012);
  }
  54% {
    transform: translate3d(-1px, 0, 0) scale(1.006);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.live-work-row.is-current > button:first-child {
  border-color: rgba(143, 217, 173, 0.54);
  background:
    linear-gradient(90deg, rgba(143, 217, 173, 0.18), rgba(143, 217, 173, 0.075));
}

.live-browser.is-pause-playlist .live-work-column-header,
.live-browser.is-pause-playlist .live-work-row {
  grid-template-columns: minmax(0, 1fr);
}

.live-browser.is-pause-playlist .live-pdf-button,
.live-browser.is-pause-playlist .live-audio-button, .live-browser.is-pause-playlist .play-along-button {
  display: none;
}

.live-browser.is-pause-playlist .live-work-row > button:first-child {
  min-height: 42px;
  padding: 7px 8px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
}

.live-browser.is-pause-playlist .pause-track-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}@media (hover: hover) {

.live-browser.is-pause-playlist .live-work-row > button:first-child:hover,
.live-browser.is-pause-playlist .live-work-row > button:first-child:focus-visible {
  border-color: transparent;
  background: rgba(239, 190, 72, 0.08);
}}

.live-browser.is-pause-playlist .live-work-row.is-current > button:first-child {
  border-color: transparent;
  background: rgba(239, 190, 72, 0.13);
}

.live-browser.is-pause-playlist .live-work-row.is-current > button:first-child .live-work-status-indicator {
  display: none;
}

.live-work-row.is-current > button:first-child::after {
  display: none;
}

.live-work-row > button:first-child span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.18;
  text-align: left;
}

.live-work-row > button:first-child strong {
  font-size: 14px;
  line-height: 1.12;
}

.live-work-row > button:first-child small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.12;
}

.live-work-row.is-raw-import > button:first-child small {
  color: #caa864;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-work-row.is-planned-entry > button:first-child {
  border-color: rgba(143, 217, 173, 0.34);
}

.live-work-row.is-current .live-work-action-icon {
  display: none;
}@media (hover: hover) {

.live-work-row > button:first-child:hover,
.live-work-row > button:first-child:focus-visible {
  border-color: rgba(122, 199, 167, 0.38);
  background: rgba(255, 255, 255, 0.095);
}}

.live-work-row.live-suggestion-work-row > button:first-child {
  border-color: color-mix(in srgb, rgba(122, 199, 167, 0.49) 62%, var(--line));
  background: color-mix(in srgb, var(--glass-soft) 58%, rgba(122, 199, 167, 0.12));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.27),
    0 0 20px rgba(122, 199, 167, 0.27),
    0 0 37px rgba(122, 199, 167, 0.14);
}

@keyframes liveSuggestionGlowPulse {
  0% {
    border-color: color-mix(in srgb, rgba(122, 199, 167, 0.49) 62%, var(--line));
    background: color-mix(in srgb, var(--glass-soft) 58%, rgba(122, 199, 167, 0.12));
    box-shadow:
      0 0 0 1px rgba(122, 199, 167, 0.27),
      0 0 20px rgba(122, 199, 167, 0.27),
      0 0 37px rgba(122, 199, 167, 0.14);
  }
  20% {
    border-color: color-mix(in srgb, rgba(122, 199, 167, 0.72) 80%, var(--line));
    background: color-mix(in srgb, var(--glass-soft) 68%, rgba(122, 199, 167, 0.2));
    box-shadow:
      0 0 0 1px rgba(122, 199, 167, 0.44),
      0 0 32px rgba(122, 199, 167, 0.46),
      0 0 58px rgba(122, 199, 167, 0.26);
  }
  52% {
    border-color: color-mix(in srgb, rgba(122, 199, 167, 0.56) 67%, var(--line));
    background: color-mix(in srgb, var(--glass-soft) 59%, rgba(122, 199, 167, 0.145));
    box-shadow:
      0 0 0 1px rgba(122, 199, 167, 0.31),
      0 0 23px rgba(122, 199, 167, 0.29),
      0 0 40px rgba(122, 199, 167, 0.145);
  }
  100% {
    border-color: color-mix(in srgb, rgba(122, 199, 167, 0.49) 62%, var(--line));
    background: color-mix(in srgb, var(--glass-soft) 58%, rgba(122, 199, 167, 0.12));
    box-shadow:
      0 0 0 1px rgba(122, 199, 167, 0.27),
      0 0 20px rgba(122, 199, 167, 0.27),
      0 0 37px rgba(122, 199, 167, 0.14);
  }
}

.live-work-row.live-suggestion-work-row > button:first-child.is-glow-pulse {
  animation: liveSuggestionGlowPulse 1.35s cubic-bezier(0.42, 0.08, 0.22, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .live-work-row.live-suggestion-work-row > button:first-child.is-glow-pulse {
    animation: none;
  }
}@media (hover: hover) {

.live-work-row.live-suggestion-work-row > button:first-child:hover,
.live-work-row.live-suggestion-work-row > button:first-child:focus-visible {
  border-color: color-mix(in srgb, rgba(122, 199, 167, 0.58) 72%, var(--line));
  background: color-mix(in srgb, var(--glass-soft) 62%, rgba(122, 199, 167, 0.14));
  box-shadow:
    0 0 0 1px rgba(122, 199, 167, 0.32),
    0 0 24px rgba(122, 199, 167, 0.32),
    0 0 44px rgba(122, 199, 167, 0.16);
}}

.live-work-row > button:first-child::before {
  display: none;
}

.live-pdf-button {
  width: 40px;
}

.live-pdf-button:disabled,
.live-audio-button:disabled, .play-along-button:disabled {
  cursor: default;
}

.pdf-icon-button,
.live-audio-button, .play-along-button {
  box-sizing: border-box;
  width: 46px;
  min-width: 46px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(122, 158, 183, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(154, 168, 178, 0.72);
  box-shadow: none;
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.02em;
  text-align: center;
}

.pdf-icon-button.has-asset,
.live-audio-button.has-asset, .play-along-button.has-asset {
  border-color: rgba(105, 169, 171, 0.34);
  background: rgba(89, 142, 154, 0.13);
  color: #a8d8d4;
}

.pdf-icon-button.is-missing-asset,
.live-audio-button.is-missing-asset, .play-along-button.is-missing-asset {
  border-color: rgba(122, 139, 151, 0.24);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(137, 151, 161, 0.62);
}@media (hover: hover) {

.pdf-icon-button.has-asset:hover,
.pdf-icon-button.has-asset:focus-visible,
.live-audio-button.has-asset:hover, .play-along-button.has-asset:hover,
.live-audio-button.has-asset:focus-visible, .play-along-button.has-asset:focus-visible {
  border-color: rgba(126, 196, 190, 0.50);
  background: rgba(89, 142, 154, 0.19);
  color: #c1e5e1;
  box-shadow: none;
}}@media (hover: hover) {

.pdf-icon-button.is-missing-asset:hover,
.pdf-icon-button.is-missing-asset:focus-visible,
.live-audio-button.is-missing-asset:hover, .play-along-button.is-missing-asset:hover,
.live-audio-button.is-missing-asset:focus-visible, .play-along-button.is-missing-asset:focus-visible {
  border-color: rgba(122, 139, 151, 0.36);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(170, 185, 195, 0.76);
  box-shadow: none;
}}

.pdf-icon-button::before {
  display: none;
}

.pdf-symbol {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  font-weight: 820;
  line-height: 1;
  background: transparent;
}

.live-audio-button span, .play-along-button span {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  line-height: 1;
  transform: translateY(-1px);
}

.setlist {
  list-style: none;
  padding-left: 0;
  overflow-x: hidden;
}

.live-panel .setlist {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.setlist li,
.archive-item {
  border: 1px solid var(--line);
  background: var(--glass-field);
  padding: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.setlist li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 28px;
  align-items: start;
  gap: 6px;
  border: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  padding: 9px;
}

.setlist li.is-current {
  border-color: rgba(122, 216, 80, 0.78);
  background:
    linear-gradient(90deg, rgba(122, 216, 80, 0.20), rgba(122, 216, 80, 0.055));
  padding: 14px 10px;
}

.setlist li.is-current strong,
.setlist li.is-current .setlist-title-edit-button {
  font-size: 17px;
  font-weight: 800;
}

.setlist li.is-completed:not(.is-current) {
  opacity: 0.82;
}

.setlist-check {
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  justify-self: center;
}

.setlist li:last-child {
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
}

.setlist li.is-unknown-entry,
.archive-item.has-export-critical-issues {
  border-color: rgba(180, 35, 24, 0.45);
  background: #fff0ee;
}

.setlist li.is-raw-import-entry,
.archive-item.has-raw-imports {
  border-color: rgba(202, 168, 100, 0.48);
  background: rgba(202, 168, 100, 0.11);
}

.archive-item.has-optional-work-issues {
  border-color: rgba(202, 168, 100, 0.48);
  background: rgba(202, 168, 100, 0.11);
}

:root[data-theme="dark"] .archive-item.has-optional-work-issues {
  background: rgba(84, 62, 26, 0.38);
  border-color: rgba(202, 168, 100, 0.50);
}

:root[data-theme="dark"] .setlist li.is-unknown-entry,
:root[data-theme="dark"] .archive-item.has-export-critical-issues {
  background: #351f1d;
  border-color: #7d3a34;
}

:root[data-theme="dark"] .setlist li.is-raw-import-entry,
:root[data-theme="dark"] .archive-item.has-raw-imports {
  background: rgba(84, 62, 26, 0.38);
  border-color: rgba(202, 168, 100, 0.50);
}

.setlist li.is-playback-entry {
  border-color: rgba(239, 190, 72, 0.58);
  background: rgba(239, 190, 72, 0.13);
}

.pause-music-label {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(239, 190, 72, 0.16);
  color: #d4a52f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.raw-import-label,
.work-status-badge,
.archive-raw-import-warning span,
.work-raw-import-notice span {
  display: inline-flex;
  width: fit-content;
  margin: 3px 5px 0 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(202, 168, 100, 0.17);
  color: #caa864;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-status-badge.is-open,
.archive-raw-import-warning span + span,
.work-raw-import-notice span + span {
  background: rgba(122, 158, 183, 0.15);
  color: var(--muted);
}

.raw-import-review-button {
  display: inline-flex;
  margin-left: 8px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(202, 168, 100, 0.34);
  border-radius: 999px;
  background: rgba(202, 168, 100, 0.09);
  color: #caa864;
  font-size: 11px;
  font-weight: 760;
}

#acceptRawImportWorkBtn {
  border-color: rgba(202, 168, 100, 0.44);
  background: rgba(202, 168, 100, 0.12);
  color: #caa864;
}

.work-raw-import-notice {
  margin: -4px 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(202, 168, 100, 0.34);
  border-radius: 12px;
  background: rgba(202, 168, 100, 0.10);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.archive-raw-import-warning {
  color: #caa864;
}

.setlist-number {
  width: 26px;
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  background: transparent;
}

.setlist li strong,
.setlist-title-edit-button,
.archive-item strong {
  display: block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
}

.archive-event-date {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.archive-event-venue {
  font-weight: 650;
}

.archive-entry-count {
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.setlist-title-edit-button {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  justify-content: flex-start;
  text-align: left;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}@media (hover: hover) {

.setlist-title-edit-button:hover,
.setlist-title-edit-button:focus {
  color: var(--ink);
  background: var(--soft) !important;
  box-shadow: none;
  outline: none;
}}

.setlist-title-edit-button::before {
  display: none;
}

.setlist-title-input {
  width: 100%;
  min-height: 28px;
  padding: 3px 7px;
  font-size: 14px;
  font-weight: 700;
}

.setlist-number.is-pause {
  border-color: transparent;
  background: transparent;
}

.setlist small,
.archive-item small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.archive-event-summary {
  cursor: pointer;
  border-radius: 18px;
  padding: 4px 6px;
  margin: -4px -6px;
}@media (hover: hover) {

.archive-event-summary:hover,
.archive-event-summary:focus {
  background: transparent;
  outline: none;
}}

.duration-button {
  min-height: 24px;
  margin-top: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.duration-button::before {
  display: none;
}@media (hover: hover) {

.duration-button:hover {
  color: var(--ink);
  background: var(--soft);
}}

.unknown-complete-button {
  min-height: 28px;
  padding: 0 8px;
  border-color: rgba(180, 35, 24, 0.35);
  color: #8f221b;
  font-size: 12px;
}

.archive-unknown-warning {
  color: #b42318;
  font-weight: 600;
}

:root[data-theme="dark"] .unknown-complete-button,
:root[data-theme="dark"] .archive-unknown-warning {
  color: #ffb1a8;
}

.duration-input {
  width: 72px;
  min-height: 28px;
  margin-top: 3px;
  padding: 3px 6px;
  color: var(--ink);
}

.duration-input.is-invalid {
  border-color: #b42318;
  background: #fff3f1;
}

.entry-delete-button {
  grid-column: -2 / -1;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  color: #9f2b24;
  font-size: 20px;
  line-height: 1;
}@media (hover: hover) {

.entry-delete-button:hover {
  border-color: #d8b2ad;
  background: #fff3f1;
}}

.archive-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border-radius: 20px;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  overflow: visible;
  height: auto;
  max-height: none;
  min-height: 5.5rem;
  flex: none;
  cursor: pointer;
  pointer-events: auto;
}

.archive-item[data-concert-id] {
  cursor: pointer;
}@media (hover: hover) {

.archive-item:hover,
.archive-item:focus-within {
  border-color: rgba(122, 199, 167, 0.38);
  background: var(--soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 10px 26px rgba(0, 0, 0, 0.10);
}}

.archive-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 9px 12px;
  border-top: 1px solid rgba(122, 158, 183, .16);
  border-radius: 0;
  background: rgba(6, 18, 27, .16);
}

.archive-actions button { min-height: 32px; padding: 5px 10px; font-size: 12px; }

.archive-event-summary {
  display: grid;
  grid-template-columns: minmax(180px, .85fr) minmax(220px, 1.15fr);
  align-items: center;
  gap: 18px;
  min-height: min-content;
  margin: 0;
  padding: 12px 14px;
  border-radius: 0;
}
.archive-event-date { margin-top: 3px; font-size: clamp(16px, 1.1vw, 19px); }

@media (max-width: 760px) {
  .archive-event-summary { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
}

@media (max-width: 560px) {
  .archive-event-summary { grid-template-columns: 1fr; }
  .archive-actions { justify-content: flex-start; }
}

.archive-warning {
  color: #caa864;
  font-weight: 650;
}

.archive-draft-label {
  color: var(--muted);
  font-weight: 600;
}

.archive-draft-reason {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.archive-draft-label.is-discarded {
  color: #9a4f18;
  font-weight: 800;
}

.archive-recording {
  color: var(--accent);
  font-weight: 600;
}

/* Konzertarchiv — kompakte Archivzeilen */
.archive-list.is-compact-rows {
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
  padding: 0 0 14px !important;
}

.archive-list.is-compact-rows > .archive-item.archive-row {
  border: 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: default;
}

.archive-list.is-compact-rows > .archive-item.archive-row:last-child {
  border-bottom: 0;
}@media (hover: hover) {

.archive-list.is-compact-rows > .archive-item.archive-row:hover,
.archive-list.is-compact-rows > .archive-item.archive-row:focus-within {
  border-color: rgba(122, 158, 183, 0.12);
  background: rgba(122, 158, 183, 0.04);
  box-shadow: none;
  transform: none;
}}

.archive-list.is-compact-rows > .archive-item.archive-row.is-expanded {
  background: rgba(122, 158, 183, 0.06);
}

.archive-list.is-compact-rows > .archive-item.archive-row:last-child.is-expanded .archive-row-panel {
  padding-bottom: 16px;
}

.archive-list.is-compact-rows > .archive-item.has-raw-imports,
.archive-list.is-compact-rows > .archive-item.has-optional-work-issues,
.archive-list.is-compact-rows > .archive-item.has-export-critical-issues {
  border-bottom-color: rgba(122, 158, 183, 0.12);
  background: transparent;
}

.archive-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}

.archive-row-leading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.archive-row-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  min-width: 0;
}

.archive-row-title-text {
  color: var(--ink);
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.archive-row-date {
  color: rgba(168, 178, 190, 0.92);
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -0.015em;
  line-height: 1.25;
  white-space: nowrap;
}

:root[data-theme="light"] .archive-row-date {
  color: rgba(92, 102, 114, 0.88);
}

.archive-row-headline .archive-row-stat {
  color: var(--muted);
  font-size: 14px;
  font-weight: 680;
  white-space: nowrap;
}

.archive-row-venue {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.archive-row-title,
.archive-row-title-static {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: left;
}

.archive-row-trailing {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 14px;
  flex-shrink: 0;
}

.archive-row-stat {
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

.archive-row-chevron {
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  opacity: 0.72;
}

.archive-row-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.archive-row-status.is-optional,
.archive-row-status.is-warn {
  background: rgba(202, 168, 100, 0.14);
  color: #b8923f;
}

.archive-row-status.is-critical {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
}

.archive-row-status.is-draft {
  background: rgba(122, 158, 183, 0.12);
  color: var(--muted);
}

.archive-row-status.is-muted {
  background: rgba(122, 158, 183, 0.08);
  color: var(--muted);
}

:root[data-theme="dark"] .archive-row-status.is-optional,
:root[data-theme="dark"] .archive-row-status.is-warn {
  background: rgba(202, 168, 100, 0.16);
  color: #e4c477;
}

:root[data-theme="dark"] .archive-row-status.is-critical {
  background: rgba(180, 35, 24, 0.22);
  color: #ffb1a8;
}

.archive-row-panel {
  padding: 0 14px 12px;
}

.archive-row-panel[hidden] {
  display: none !important;
}

.archive-row-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 8px;
}

.archive-row-detail small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}

.archive-list.is-compact-rows .archive-actions {
  justify-content: flex-end;
  gap: 6px 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.archive-list.is-compact-rows .archive-actions button {
  min-height: 34px;
  padding: 5px 12px;
  font-size: 13px;
}

.archive-list.is-compact-rows .archive-action-open {
  border: 1px solid rgba(122, 199, 167, 0.42);
  background: rgba(122, 199, 167, 0.1);
  color: var(--ink);
  font-weight: 780;
}@media (hover: hover) {

.archive-list.is-compact-rows .archive-action-open:hover {
  border-color: rgba(122, 199, 167, 0.62);
  background: rgba(122, 199, 167, 0.18);
}}

.archive-list.is-compact-rows .archive-action-muted,
.archive-list.is-compact-rows .archive-action-audio {
  border: 1px solid rgba(122, 158, 183, 0.28);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}

.archive-list.is-compact-rows .archive-action-audio {
  border-color: rgba(122, 216, 80, 0.18);
}@media (hover: hover) {

.archive-list.is-compact-rows .archive-action-muted:hover,
.archive-list.is-compact-rows .archive-action-audio:hover {
  color: var(--ink);
  background: rgba(122, 158, 183, 0.08);
  border-color: rgba(122, 158, 183, 0.38);
}}@media (hover: hover) {

.archive-list.is-compact-rows .archive-action-audio:hover {
  border-color: rgba(122, 216, 80, 0.28);
}}

.archive-list.is-compact-rows .archive-action-danger {
  border: 1px solid rgba(180, 35, 24, 0.22);
  background: transparent;
  color: #b4534a;
  font-size: 12px;
  font-weight: 650;
}@media (hover: hover) {

.archive-list.is-compact-rows .archive-action-danger:hover {
  color: #b42318;
  background: rgba(180, 35, 24, 0.08);
}}

@media (max-width: 720px) {
  .archive-row-head {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .archive-row-trailing {
    justify-content: flex-start;
  }

  .archive-row-meta,
  .archive-row-venue {
    white-space: normal;
  }

  .archive-list.is-compact-rows .archive-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.danger-action {
  color: #9f2b24;
}

#endConcertDialog {
  width: min(620px, calc(100vw - 24px));
}

#endConcertDialog form {
  display: grid;
  gap: 18px;
  padding: 24px;
}

#endConcertDialog h2 {
  margin: 0;
  font-size: clamp(20px, 3vw, 28px);
}

#endConcertDialog menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#endConcertDialog button {
  min-height: 48px;
  padding: 10px 14px;
  white-space: normal;
  line-height: 1.15;
}

@media (min-width: 620px) {
  #endConcertDialog menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.location-proof-dialog {
  width: min(480px, calc(100vw - 28px));
}

.settings-access-button {
  width: 44px;
  min-width: 44px;
  min-height: 34px;
  padding-inline: 0;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(190, 205, 216, 0.78) !important;
  font-size: 34px;
  line-height: 1;
}@media (hover: hover) {

.settings-access-button:hover,
.settings-access-button:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(210, 224, 232, 0.88) !important;
}}

.app-settings-dialog {
  width: min(1280px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  /* dvh: beruecksichtigt die iOS-Leisten — sonst ragt der Dialog unten raus */
  max-height: min(88dvh, 900px);
  overflow: hidden;
}

.app-settings-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: inherit;
  overflow: hidden;
  padding: 22px 26px;
  box-sizing: border-box;
}

.settings-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
}

.settings-dialog-header h2 {
  margin: 0;
  font-size: 22px;
}

.settings-dialog-header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.settings-dialog-close {
  position: static;
  flex: 0 0 auto;
}

.settings-dialog-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  /* Kein erzwungenes min-height mehr: das drueckte den Inhalt aus dem
     Dialog (unten abgeschnitten, nicht scrollbar — Giottos iPad-Befund). */
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 18px;
}

.settings-category-list {
  display: grid;
  align-content: start;
  align-items: stretch;
  gap: 7px;
  min-height: 0;
  padding: 0 12px 0 0;
  border-right: 1px solid rgba(122, 158, 183, 0.14);
  border-bottom: 0;
  overflow: auto;
}

.settings-category-list button {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: none;
}@media (hover: hover) {

.settings-category-list button:hover,
.settings-category-list button:focus-visible,
.settings-category-list button.is-active {
  border-color: rgba(122, 158, 183, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
  box-shadow: none;
}}

.settings-panel-area {
  min-width: 0;
  overflow: auto;
  padding-right: 10px;
}

.app-settings-dialog .dialog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.app-settings-dialog .settings-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}

.app-settings-dialog label {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.settings-action-stack {
  display: grid;
  gap: 10px;
}

.settings-action-stack > button,
.settings-action-stack > .file-button {
  width: 100%;
  justify-content: center;
  font-size: 14px;
}

.app-settings-dialog .settings-action-stack .sync-center-primary-button {
  margin-bottom: 0;
}

.settings-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-action-grid button {
  width: 100%;
  font-size: 14px;
}

.sync-center-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

.sync-center-summary p {
  display: grid;
  grid-template-columns: minmax(132px, 152px) minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  font-size: 14px;
  min-width: 0;
  line-height: 1.45;
  align-items: start;
}

.sync-center-summary p span {
  overflow-wrap: anywhere;
}

.app-settings-dialog .settings-sync-summary {
  margin: 0;
}

.app-settings-dialog .settings-sync-summary p {
  grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
}

.app-settings-dialog .settings-sync-actions {
  gap: 8px;
}

.app-settings-dialog .settings-sync-actions .sync-center-primary-button {
  margin-bottom: 0;
}

.app-settings-dialog [data-settings-panel="sync"] {
  gap: 16px;
}

.app-settings-dialog [data-settings-panel="sync"] .sync-center-summary {
  margin-bottom: 0;
}

.app-settings-dialog [data-settings-panel="sync"] .settings-sync-toggle-note {
  margin: -4px 0 0;
}

.app-settings-dialog [data-settings-panel="sync"] .settings-toggle-row {
  margin-top: 4px;
}

.sync-diagnostics {
  display: grid;
  gap: 16px;
  margin: 0 0 14px;
}

.sync-diagnostics-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.sync-diagnostics-card > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
}

.sync-diagnostics-lead {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.sync-diagnostics-grid {
  display: grid;
  gap: 6px;
}

.sync-diagnostics-grid p {
  display: grid;
  grid-template-columns: minmax(118px, 132px) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  font-size: 13px;
  align-items: start;
}

.sync-diagnostics-grid strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-diagnostics-grid span {
  overflow-wrap: anywhere;
  color: var(--ink);
}

.sync-diagnostic-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.35;
}

.sync-diagnostics-grid p.is-ok span {
  color: rgba(122, 199, 167, 0.95);
}

.sync-diagnostics-grid p.is-warn span {
  color: rgba(214, 164, 60, 0.98);
}

.sync-diagnostics-grid p.is-muted span {
  color: rgba(210, 224, 232, 0.72);
}

.sync-diagnostics-card.is-refreshing {
  opacity: 0.88;
}

.sync-diagnostics-card.is-refreshing > strong::after {
  content: " · aktualisiert";
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.concert-sync-panel .sync-diagnostics {
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .app-settings-dialog .settings-sync-summary p {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.sync-center-summary strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sync-center-summary .sync-center-note {
  display: block;
  grid-template-columns: none;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
}

.sync-center-pending span {
  color: #d9a066;
}

.sync-center-primary-button {
  width: 100%;
  min-height: 40px;
  margin-bottom: 10px;
  font-size: 14px;
}

.settings-advanced-panel,
.settings-admin-sync-fallback,
.dashboard-sync-advanced {
  margin-top: 8px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
  padding-top: 10px;
}

.settings-advanced-panel summary,
.settings-admin-sync-fallback summary,
.dashboard-sync-advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.settings-advanced-panel-body {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.settings-advanced-panel-body .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding-top: 0;
  max-width: none;
  overflow: visible;
}

.settings-section h3 {
  margin: 0;
  color: rgba(196, 214, 226, 0.92);
  font-size: 18px;
  font-weight: 790;
  letter-spacing: 0.02em;
}

.settings-section > .muted {
  margin: -6px 0 2px;
  max-width: none;
  font-size: 14px;
  line-height: 1.5;
}

.settings-info-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 14px 15px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: var(--radius-list);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(210, 224, 232, 0.86);
  line-height: 1.5;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.settings-info-card strong {
  font-size: 14px;
  font-weight: 750;
  color: var(--ink);
}

.settings-info-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.storage-diagnostics {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}

.storage-diagnostics-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid rgba(122, 158, 183, 0.12);
  font-size: 13px;
  color: var(--muted);
}

.storage-diagnostics-row:first-child {
  border-top: 0;
}

.storage-diagnostics-row strong {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.storage-diagnostics-sub {
  padding-left: 12px;
  border-top: 0;
  font-size: 12px;
  opacity: 0.82;
}

.storage-diagnostics-sub span:first-child::before {
  content: "└ ";
  opacity: 0.6;
}

.settings-subgroup {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 14px 15px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: var(--radius-list);
  background: rgba(255, 255, 255, 0.045);
}

.settings-subgroup h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.settings-subgroup-lead {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-settings-dialog .settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.20);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.app-settings-dialog .settings-toggle-row input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.app-settings-dialog .settings-mode-field.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.app-settings-dialog menu {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
}

@media (max-width: 1180px) {
  .settings-dialog-body {
    grid-template-columns: 180px minmax(0, 1fr);
    /* hidden liess zwischen 760 und 1180 px GAR NICHTS mehr scrollen */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-settings-dialog .dialog-grid,
  .app-settings-dialog .settings-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-settings-dialog,
  .compact-dialog.app-settings-dialog {
    width: min(96vw, 760px);
    max-height: 88vh;
    /* dvh: iOS-Leisten einrechnen, sonst liegt das Dialog-Ende unterhalb
       des sichtbaren Bildschirms (abgeschnitten, unerreichbar) */
    max-height: 88dvh;
  }

  .app-settings-dialog form {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .settings-dialog-body {
    grid-template-columns: 1fr;
    gap: 14px;
    min-height: 0;
    overflow: visible;
  }

  .settings-category-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(122, 158, 183, 0.14);
    overflow: visible;
  }

  .settings-panel-area {
    overflow: visible;
    padding-right: 0;
  }

  .settings-action-grid {
    grid-template-columns: 1fr;
  }

  .app-settings-dialog .dialog-grid,
  .app-settings-dialog .settings-action-grid {
    grid-template-columns: 1fr;
  }
}

.app-settings-dialog .checkbox-label {
  align-items: center;
  flex-direction: row;
  gap: 9px;
  min-height: 38px;
  padding: 8px 0;
}

.app-settings-dialog .checkbox-label input {
  width: auto;
  min-width: 16px;
}

.app-settings-dialog select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 38px;
  border-radius: 12px;
  padding-right: 34px !important;
  border: 1px solid rgba(122, 158, 183, 0.16) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(196, 214, 226, 0.72) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(196, 214, 226, 0.72) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    rgba(255, 255, 255, 0.075) !important;
  color: rgba(210, 224, 232, 0.88) !important;
  box-shadow: none !important;
}

.app-settings-dialog select:focus {
  border-color: rgba(122, 158, 183, 0.26) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(122, 199, 167, 0.88) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(122, 199, 167, 0.88) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    rgba(255, 255, 255, 0.105) !important;
  outline: 2px solid rgba(122, 199, 167, 0.16) !important;
}

.app-settings-dialog select option {
  background: #12212e;
  color: rgba(232, 241, 246, 0.94);
}

.settings-dropdown {
  position: relative;
  width: 100%;
}

.settings-dropdown > button {
  width: 100%;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: var(--radius-list);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(210, 224, 232, 0.88);
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}

.settings-dropdown > button::after {
  content: "⌄";
  color: var(--muted);
  font-size: 13px;
}

.settings-dropdown.is-open > button,
.settings-dropdown > button:focus-visible {
  border-color: rgba(122, 158, 183, 0.26);
  background: rgba(255, 255, 255, 0.105);
}

.settings-dropdown-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: max(100%, 240px);
  min-width: 100%;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-list);
  background: var(--panel);
  box-shadow: var(--glass-shadow);
  display: none;
  gap: 5px;
}

.settings-dropdown.is-open .settings-dropdown-panel {
  display: grid;
}

.settings-dropdown-panel button {
  width: 100%;
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  color: rgba(210, 224, 232, 0.82);
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
}@media (hover: hover) {

.settings-dropdown-panel button:hover,
.settings-dropdown-panel button:focus-visible,
.settings-dropdown-panel button.is-selected {
  border-color: rgba(122, 158, 183, 0.20);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(232, 241, 246, 0.94);
}}

:root[data-theme="dark"] .archive-warning {
  color: #ff8a7a;
}

dialog.archive-audio-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: calc(100dvh - 12px);
  overflow: hidden;
}

dialog.archive-audio-dialog.is-align-mode {
  width: min(520px, calc(100vw - 24px));
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-fine-tune,
dialog.archive-audio-dialog.is-align-mode .archive-audio-marker-toolbar,
dialog.archive-audio-dialog.is-align-mode .archive-audio-marker-list,
dialog.archive-audio-dialog.is-align-mode .archive-audio-now-playing,
dialog.archive-audio-dialog.is-align-mode .archive-audio-first-tone-nudge,
dialog.archive-audio-dialog.is-align-mode #archiveAudioStopBtn,
dialog.archive-audio-dialog.is-align-mode #archiveMarkersDownloadBtn {
  display: none;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-player-card {
  gap: 8px;
  padding: 10px 12px 8px;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-waveform-wrap {
  min-height: 40px;
  background: color-mix(in srgb, var(--soft) 78%, var(--surface));
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-waveform-wrap canvas {
  height: 40px;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-header-tools #archiveAudioAssignBtn {
  min-height: 22px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.62;
}@media (hover: hover) {

dialog.archive-audio-dialog.is-align-mode .archive-audio-header-tools #archiveAudioAssignBtn:hover,
dialog.archive-audio-dialog.is-align-mode .archive-audio-header-tools #archiveAudioAssignBtn:focus-visible {
  opacity: 0.92;
  color: var(--ink);
}}

dialog.archive-audio-dialog.is-align-mode .archive-audio-waveform-loading {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted);
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-first-tone-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-first-tone-actions #archiveAudioFirstToneAutoBtn,
dialog.archive-audio-dialog.is-align-mode .archive-audio-first-tone-actions #archiveAudioSetFirstToneBtn {
  width: 100%;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-waveform-range {
  display: none;
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-timeline {
  grid-template-columns: minmax(0, 1fr) auto;
}

dialog.archive-audio-dialog.is-align-mode form {
  height: auto;
  max-height: calc(100dvh - 12px);
}

.archive-audio-dialog form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: min(760px, calc(100dvh - 12px));
  max-height: calc(100dvh - 12px);
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, var(--soft)), color-mix(in srgb, var(--panel) 82%, var(--soft)));
}

.archive-audio-controls {
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.archive-audio-header {
  min-width: 0;
}

.archive-audio-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.archive-audio-header-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.archive-audio-header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.archive-audio-header-tools button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.archive-audio-marker-toolbar {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin-top: -2px;
}

.archive-audio-marker-toolbar:empty,
.archive-audio-marker-toolbar:not(:has(button:not([hidden]))) {
  display: none;
}

.archive-audio-marker-toolbar button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 11px;
}

.archive-audio-dialog h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.archive-audio-event-info {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-audio-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.archive-audio-dialog .archive-audio-transport button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft) 82%, var(--surface));
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

.archive-audio-dialog .archive-audio-skip {
  min-width: 52px;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.archive-audio-dialog .archive-audio-transport-main {
  min-width: 44px;
  padding: 0 14px;
  border-color: transparent;
  background: var(--accent);
  color: #07140f;
  font-size: 15px;
  font-weight: 700;
}

.archive-audio-dialog .archive-audio-transport-secondary {
  min-width: 38px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
}@media (hover: hover) {

.archive-audio-dialog .archive-audio-transport button:hover:not(:disabled),
.archive-audio-dialog .archive-audio-transport button:focus-visible:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--ink);
}}@media (hover: hover) {

.archive-audio-dialog .archive-audio-transport-main:hover:not(:disabled),
.archive-audio-dialog .archive-audio-transport-main:focus-visible:not(:disabled) {
  filter: brightness(1.04);
  color: #07140f;
}}

.archive-audio-dialog .archive-audio-transport button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.archive-audio-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.archive-audio-player-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, var(--soft));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.archive-audio-now-playing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.archive-audio-now-playing-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.archive-audio-now-playing strong {
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.archive-audio-now-playing-meta {
  width: 100%;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.archive-audio-waveform-wrap {
  position: relative;
  width: 100%;
  min-height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  background: color-mix(in srgb, var(--soft) 45%, transparent);
  cursor: pointer;
}

.archive-audio-waveform-wrap canvas {
  display: block;
  width: 100%;
  height: 96px;
}

.archive-audio-waveform-range {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  pointer-events: none;
}

.archive-audio-waveform-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 0;
  margin-top: -2px;
}

.archive-audio-waveform-tools:not(:has(button:not([hidden]))) {
  display: none;
}

.archive-audio-quiet-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 2px;
}@media (hover: hover) {

.archive-audio-quiet-link:hover,
.archive-audio-quiet-link:focus-visible {
  color: var(--ink);
}}

#archiveAudioReplayPinBtn {
  margin-right: auto;
}

.archive-audio-fine-tune {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.archive-audio-fine-tune-head {
  display: grid;
  gap: 3px;
}

.archive-audio-fine-tune-head strong {
  font-size: 13px;
}

.archive-audio-fine-tune-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.archive-audio-fine-tune-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.archive-audio-fine-tune-nudge button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.archive-audio-fine-tune-result {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
}

.archive-audio-fine-tune-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-audio-fine-tune-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.archive-audio-fine-tune-actions #archiveAudioFineTuneApplyBtn {
  font-weight: 650;
}

.archive-audio-waveform-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.archive-audio-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.archive-audio-marker-action {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}@media (hover: hover) {

.archive-audio-marker-action:hover,
.archive-audio-marker-action:focus-visible {
  background: color-mix(in srgb, var(--glass-soft) 55%, transparent);
  color: var(--ink);
}}

.archive-audio-marker-action-spacer {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.archive-audio-marker .archive-audio-marker-duration {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.archive-audio-timeline input {
  width: 100%;
}

.archive-audio-timeline output {
  min-width: 88px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.archive-audio-alignment {
  display: grid;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--soft) 72%, transparent);
}

.archive-audio-first-tone-tools {
  display: grid;
  gap: 8px;
}

.archive-audio-first-tone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-audio-first-tone-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.archive-audio-first-tone-actions #archiveAudioSetFirstToneBtn {
  font-weight: 650;
}

.archive-audio-first-tone-result {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
}

dialog.archive-audio-dialog.is-align-mode .archive-audio-first-tone-result {
  color: var(--ink);
  font-weight: 600;
}

.archive-audio-alignment-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.archive-audio-alignment-copy strong {
  font-size: 12px;
  font-weight: 700;
}

.archive-audio-alignment small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.archive-audio-alignment > button {
  justify-self: start;
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.archive-audio-marker-list {
  display: grid;
  gap: 1px;
  flex: 1 1 0;
  min-height: 96px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--soft) 82%, transparent);
}

.archive-audio-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  padding-top: 2px;
}

.archive-audio-close {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

@media (max-width: 640px) {
  dialog.archive-audio-dialog {
    width: calc(100vw - 12px);
  }

  .archive-audio-dialog form {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 12px;
    gap: 7px;
  }

  .archive-audio-header-main {
    flex-direction: column;
    align-items: stretch;
  }

  .archive-audio-header-tools {
    justify-content: flex-start;
  }

  .archive-audio-event-info {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .archive-audio-alignment {
    grid-template-columns: 1fr 1fr;
  }

  .archive-audio-alignment-copy {
    grid-column: 1 / -1;
  }

  .archive-audio-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .archive-audio-close {
    width: 100%;
  }
}

.archive-audio-marker {
  position: relative;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 32px;
  align-items: center;
  gap: 8px;
  text-align: left;
  width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.archive-audio-marker.is-unavailable {
  cursor: default;
  opacity: 0.48;
}

.archive-audio-marker.is-selected {
  background: color-mix(in srgb, var(--glass-soft) 42%, transparent);
}

.archive-audio-marker.is-selected::before,
.archive-audio-marker.is-fine-tuning::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}

.archive-audio-marker.is-fine-tuning::before {
  background: color-mix(in srgb, var(--ink) 70%, transparent);
}@media (hover: hover) {

.archive-audio-marker:hover,
.archive-audio-marker:focus-within {
  background: color-mix(in srgb, var(--glass-soft) 55%, transparent);
}}

.archive-audio-marker-play {
  min-height: 26px;
  width: 30px;
  padding: 0;
  border-radius: 999px;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
}

.archive-audio-marker strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-audio-marker time {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.archive-audio-marker-text {
  min-width: 0;
}

.archive-audio-marker-text label {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.archive-audio-marker-text label span {
  color: var(--muted);
  font-size: 12px;
}

.archive-audio-marker-text input {
  min-height: 28px;
  width: 100%;
  padding: 3px 8px;
  border-radius: 9px;
  font-size: 13px;
}

.compact-event-dialog .form-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 7px 8px;
}

.compact-event-dialog label {
  gap: 3px;
  font-size: 11px;
}

.compact-event-dialog label input,
.compact-event-dialog label select,
.compact-event-dialog label textarea {
  min-height: 31px;
  padding: 5px 7px;
  font-size: 13px;
}

.compact-event-dialog label textarea {
  min-height: 64px;
}

#eventSetupDialog.wide-dialog {
  overflow: visible;
}

#eventSetupDialog.wide-dialog form {
  max-height: calc(100dvh - 12vh);
  overflow: auto;
}

#eventSetupDialog input[type="date"],
#eventSetupDialog input[type="time"],
.gema-view input[type="date"],
.gema-view input[type="time"] {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.2;
  color-scheme: dark;
  cursor: pointer;
  -webkit-appearance: auto;
  appearance: auto;
}

#eventSetupDialog input[type="date"]::-webkit-datetime-edit,
#eventSetupDialog input[type="time"]::-webkit-datetime-edit {
  padding: 0;
}

#eventSetupDialog input[type="date"]::-webkit-datetime-edit-fields-wrapper,
#eventSetupDialog input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  font-size: 14px;
}

#eventSetupDialog input[type="date"]::-webkit-datetime-edit-day-field,
#eventSetupDialog input[type="date"]::-webkit-datetime-edit-month-field,
#eventSetupDialog input[type="date"]::-webkit-datetime-edit-year-field,
#eventSetupDialog input[type="time"]::-webkit-datetime-edit-hour-field,
#eventSetupDialog input[type="time"]::-webkit-datetime-edit-minute-field {
  font-size: 14px;
  padding: 0 2px;
}

#eventSetupDialog input[type="date"]::-webkit-calendar-picker-indicator,
#eventSetupDialog input[type="time"]::-webkit-calendar-picker-indicator {
  transform: scale(1.05);
  transform-origin: center;
  cursor: pointer;
  opacity: 0.72;
}

.event-setup-dialog-lead {
  margin: -2px 0 12px;
  max-width: 56ch;
  font-size: 13px;
  line-height: 1.45;
}

.event-setup-section {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.event-setup-section:first-of-type {
  margin-top: 8px;
}

.event-setup-section-title {
  margin: 0 0 10px;
  color: rgba(168, 185, 199, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-setup-section-grid {
  gap: 8px 10px;
}

.event-setup-section .saved-place-picker {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#eventSetupDialog.is-planning-mode .event-end-time-field {
  display: none !important;
}

#eventSetupDialog.is-planning-mode .event-setup-section[data-event-setup-section="basics"] .event-setup-section-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(130px, 0.9fr) minmax(118px, 0.8fr);
}

#eventSetupDialog.is-planning-mode .event-setup-section[data-event-setup-section="basics"] label:has([name="name"]) {
  grid-column: 1 / -1;
}

.event-datetime-stepper {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
}

.event-datetime-stepper > input {
  width: 100%;
  min-width: 0;
}

.event-datetime-step-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(186, 201, 214, 0.92);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}@media (hover: hover) {

.event-datetime-step-btn:hover,
.event-datetime-step-btn:focus-visible {
  background: rgba(122, 199, 167, 0.14);
  border-color: rgba(122, 199, 167, 0.34);
  color: var(--ink);
}}

#eventSetupDialog .event-end-time-field {
  gap: 4px;
  font-size: 11px;
}

#eventSetupDialog .event-end-time-display {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#eventSetupDialog .event-end-time-display.is-empty {
  color: var(--muted);
}

:root[data-theme="light"] #eventSetupDialog input[type="date"],
:root[data-theme="light"] #eventSetupDialog input[type="time"],
:root[data-theme="light"] .gema-view input[type="date"],
:root[data-theme="light"] .gema-view input[type="time"] {
  color-scheme: light;
}

:root[data-theme="light"] #eventSetupDialog .event-end-time-display {
  background: rgba(255, 255, 255, 0.72);
}

.download-area {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--soft);
}

.export-actions {
  margin-bottom: 18px;
}

.gema-inline-save-feedback {
  width: fit-content;
  max-width: 100%;
  margin: -8px 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(122, 199, 167, 0.38);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.13);
  color: var(--accent);
  font-size: 12px;
  font-weight: 720;
  opacity: 0;
  transition: opacity 120ms ease;
}

.gema-inline-save-feedback.is-visible {
  opacity: 1;
}

.download-link {
  color: var(--accent);
  font-weight: 700;
}

.compact-dialog {
  width: min(460px, calc(100vw - 28px));
  line-height: 1.45;
}

.compact-dialog.app-settings-dialog {
  width: min(1280px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
}

.app-info-dialog,
.missing-media-choice-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(90dvh, 860px);
}

.app-info-dialog form,
.missing-media-choice-dialog form {
  min-width: 0;
}

.compact-dialog form {
  position: relative;
}

.dialog-corner-close {
  position: absolute;
  top: 4px;
  right: 4px;
}

.played-history-list {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.played-history-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 0;
  background: transparent;
}

.played-history-list li:last-child {
  border-bottom: 0;
}

.played-history-list span {
  color: var(--accent);
  font-weight: 800;
}

.played-history-number {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.played-history-title-edit {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
}@media (hover: hover) {

.played-history-title-edit:hover,
.played-history-title-edit:focus-visible {
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}}

.played-history-title-input {
  min-width: 0;
  width: 100%;
  padding: 5px 7px;
}

.played-history-delete {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 111, 111, 0.82);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  box-shadow: none;
}@media (hover: hover) {

.played-history-delete:hover,
.played-history-delete:focus-visible {
  border-color: transparent;
  color: #ff8a8a;
  background: transparent;
  box-shadow: none;
}}

.played-history-list strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.played-history-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.export-filename-label {
  display: block;
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.export-filename-input {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
}

.dialog-warning {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #e2a39c;
  border-radius: var(--radius-panel);
  background: #fff3f1;
  color: #7a1c16;
}

:root[data-theme="dark"] .dialog-warning {
  border-color: #7d3a34;
  background: #351f1d;
  color: #ffb1a8;
}

.dialog-warning p {
  margin: 6px 0 10px;
  line-height: 1.5;
}

.dialog-warning small {
  display: inline-block;
  margin: 0 5px 5px 0;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
}

.event-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.gema-readonly-panel {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--glass-field);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(1.28);
}

.event-summary-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.event-summary-list div {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}@media (hover: hover) {

.event-summary-list div:hover,
.event-summary-list div:focus {
  background: var(--glass-soft);
  outline: none;
}}

.event-summary-list span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 0;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-soft);
}

.event-summary-list strong {
  display: block;
  padding: 7px 8px;
  font-size: 15px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.event-summary-list strong.is-empty {
  color: #b42318;
  font-weight: 500;
}

.gema-readonly-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.gema-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-top: 10px;
}

.gema-toolbar-primary,
.gema-toolbar-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gema-toolbar-primary {
  padding: 4px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--soft) 88%, transparent);
}

.gema-toolbar-primary button {
  min-width: 0;
}

.gema-toolbar-secondary button {
  min-width: 0;
}

.gema-view.is-inspect-mode .gema-toolbar-secondary,
.gema-view.is-inspect-mode #saveGemaSetlistEditsBtn,
.gema-view.is-inspect-mode #editGemaEventBtn {
  display: none;
}

.gema-view.is-inspect-mode .gema-toolbar-primary {
  padding: 0;
  border: 0;
  background: transparent;
}

.gema-view.is-inspect-mode .table-input {
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}

.gema-view #saveGemaSetlistEditsBtn {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.gema-view #exportGemaBtn {
  border-color: rgba(202, 168, 100, 0.56);
  background: linear-gradient(180deg, rgba(202, 168, 100, 0.26), rgba(202, 168, 100, 0.13));
  color: var(--ink);
}

.standalone-close-button {
  position: static;
  flex: 0 0 auto;
  justify-self: end;
  align-self: start;
  width: 32px;
  min-width: 32px;
}

.gema-event-compact-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(170px, 0.8fr);
  gap: 10px 18px;
  align-items: start;
}

.gema-event-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.05;
}

.gema-event-main p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}

.gema-event-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.gema-event-facts {
  display: grid;
  gap: 5px;
  justify-items: start;
  color: var(--muted);
  font-size: 12px;
}

.gema-event-facts strong {
  color: var(--ink);
}

.gema-event-status {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.gema-event-status strong {
  font-size: 12px;
  font-weight: 760;
}

.gema-event-status.is-complete strong {
  color: var(--accent);
}

.gema-event-status.is-incomplete strong,
.gema-event-status.is-incomplete span {
  color: #caa864;
}

.gema-event-notes-link {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  box-shadow: none;
}@media (hover: hover) {

.gema-event-notes-link:hover,
.gema-event-notes-link:focus-visible {
  color: var(--accent);
  background: transparent;
}}

.gema-view > .panel-header {
  align-items: start;
}

#gemaView.is-active {
  display: block;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

#gemaView .table-wrap {
  overflow: visible;
}

@media (hover: none) {
  #gemaPreview tr {
    -webkit-user-drag: none;
  }
}

.gema-view > select[hidden] {
  display: none !important;
}

.gema-view .gema-readonly-panel {
  margin: 10px 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.gema-view .event-summary-list {
  display: block;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.gema-view .event-summary-list div {
  padding: 0;
  border: 0;
  background: transparent;
}@media (hover: hover) {

.gema-view .event-summary-list div:hover,
.gema-view .event-summary-list div:focus {
  background: transparent;
}}

.gema-view .event-summary-list span,
.gema-view .event-summary-list strong {
  display: initial;
  padding: 0;
  border: 0;
  background: transparent;
}

.gema-verification-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(122, 158, 183, 0.16);
  cursor: default;
}

.gema-verification-summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
  cursor: default;
}

.gema-verification-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gema-verification-summary strong {
  color: rgba(196, 214, 226, 0.82);
  font-size: 12px;
  font-weight: 720;
}

.gema-verification-summary strong.is-confirmed {
  color: rgba(122, 199, 167, 0.92);
}

.gema-verification-summary strong.is-missing {
  color: rgba(217, 184, 79, 0.92);
}

.gema-location-save-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 12px;
}

.gema-location-feedback {
  flex: 1 0 100%;
  margin-top: -4px;
  color: rgba(122, 199, 167, 0.88);
  font-size: 12px;
  line-height: 1.35;
}

.gema-location-feedback.is-error {
  color: rgba(217, 184, 79, 0.95);
}

.location-permission-hint {
  margin-top: -4px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.78;
}

.app-info-dialog p,
.app-info-dialog .app-info-details {
  min-width: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.app-info-dialog .app-info-details {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-muted) 76%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.app-info-dialog .app-info-details ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.gema-view .gema-event-compact-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 16px 0 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 56%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.gema-view .gema-event-main h3 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.gema-view .gema-event-main p {
  margin: 6px 0 0;
  color: color-mix(in srgb, var(--ink) 84%, var(--muted));
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 650;
}

.gema-view .gema-event-main small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 13px;
}

.gema-view .gema-event-date-line {
  display: block;
  margin-top: 9px;
  color: color-mix(in srgb, var(--ink) 88%, var(--accent));
  font-size: clamp(18px, 1.75vw, 24px);
  font-weight: 780;
  letter-spacing: -0.015em;
}

.gema-view .gema-event-time-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.gema-view .gema-event-time-line {
  display: block;
  margin-top: 0;
  margin-left: 0;
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: 13px;
  font-weight: 560;
}

.gema-view .gema-event-facts {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  color: var(--muted);
}

.gema-view .gema-event-facts span {
  font-size: inherit;
  line-height: 1.22;
}

.gema-view .gema-event-facts strong {
  font-weight: 780;
}

.gema-view .gema-event-status {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 0;
  font-size: 12px;
}

.gema-view .gema-event-status strong {
  font-weight: 780;
}

.gema-view .gema-event-status.is-complete strong {
  color: var(--accent);
}

.gema-view .gema-event-status.is-incomplete strong,
.gema-view .gema-event-status.is-incomplete span {
  color: #caa864;
}

.gema-view .gema-event-notes-link {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.gema-view .gema-event-notes-preview {
  max-width: 760px;
  margin: -2px 0 0;
  color: #b46a5b;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

.gema-view .gema-readonly-actions {
  margin-top: 9px;
}

.gema-view #editGemaEventBtn {
  min-width: 0;
}@media (hover: hover) {

.gema-view #exportGemaBtn:hover,
.gema-view #exportGemaBtn:focus-visible {
  border-color: rgba(202, 168, 100, 0.72);
  background: linear-gradient(180deg, rgba(202, 168, 100, 0.34), rgba(202, 168, 100, 0.17));
}}

#gemaPreview tr[draggable="true"] {
  cursor: grab;
}

#gemaPreview tr[draggable="true"]:active {
  cursor: grabbing;
}

#worksTable tr.is-live-order-draggable {
  cursor: grab;
}

#worksTable tr.is-live-order-draggable:active,
#worksTable tr.is-dragging-work {
  cursor: grabbing;
}

#worksTable tr.is-dragging-work {
  opacity: 0.48;
}

#worksTable tr.is-work-drag-over > td {
  border-top-color: var(--accent, #77c9a7);
  box-shadow: inset 0 2px 0 var(--accent, #77c9a7);
}

#gemaPreview .table-input[readonly] {
  cursor: default;
}

#gemaPreview .table-input.is-editing {
  cursor: text;
}

.gema-setlist-context-menu {
  min-width: 230px;
}

.gema-setlist-work-dialog {
  width: min(420px, calc(100vw - 28px));
}

.setlist-correction-wizard-dialog {
  width: min(680px, calc(100vw - 32px));
}

.setlist-correction-wizard-dialog form {
  display: grid;
  gap: 16px;
}

.setlist-correction-wizard-dialog .eyebrow {
  margin: 0;
}

.setlist-correction-assignment {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
}

.setlist-correction-assignment legend {
  padding: 0 6px;
  font-weight: 700;
}

.gema-event-notes-dialog {
  width: min(520px, calc(100vw - 28px));
}

.gema-event-notes-dialog textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.45;
}

.event-summary div {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-field);
  padding: 8px;
}

.event-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 2px;
}

.event-summary strong {
  display: block;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.import-panel,
.import-dialog {
  margin-bottom: 12px;
}

.import-dialog {
  width: min(560px, calc(100vw - 28px));
}

.import-dialog textarea {
  min-height: 160px;
  font-size: 13px;
  line-height: 1.45;
}

.import-dialog .toolbar {
  gap: 6px;
}

.import-dialog button,
.import-dialog .file-button {
  font-size: 13px;
}

dialog {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100dvh - 8vh);
  margin: 4vh auto auto;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--panel);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

dialog::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

dialog .settings-dialog-body,
dialog .settings-category-list,
dialog .settings-panel-area,
dialog .duplicate-works-list,
dialog .missing-work-data-list,
dialog .app-info-details,
.app-settings-dialog form {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

dialog .settings-dialog-body::-webkit-scrollbar,
dialog .settings-category-list::-webkit-scrollbar,
dialog .settings-panel-area::-webkit-scrollbar,
dialog .duplicate-works-list::-webkit-scrollbar,
dialog .missing-work-data-list::-webkit-scrollbar,
dialog .app-info-details::-webkit-scrollbar,
.app-settings-dialog form::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

dialog::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.compact-dialog,
.wide-dialog,
.profile-onboarding-dialog,
.venue-setup-dialog,
.access-dialog,
.import-dialog,
.archive-audio-dialog {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(8, 22, 33, 0.985);
}

.dialog-auto-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

#workDialog {
  width: min(640px, calc(100vw - 22px));
}

#workDialog .dialog-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

#workDialog .work-field-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
}

#workDialog label {
  gap: 6px;
  font-size: 11px;
}

#workDialog label input,
#workDialog label textarea {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 13px;
}

#workDialog .work-info-field-alias small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.work-alias-label,
.work-info-alias {
  margin-left: 5px;
  color: var(--muted);
  font-weight: 650;
}

.work-rating-inline,
.library-work-rating,
.live-work-rating {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  font-size: .82em;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.work-rating-star { color: rgba(151, 169, 184, .46); }
.work-rating-star.is-filled { color: #c9ad67; }
.live-work-title-line > .live-work-rating { flex: 0 0 auto; margin-left: 0; color: inherit; font-size: .66em; font-weight: 650; line-height: 1; opacity: .82; justify-content: flex-end; width: 5.1em; }
.live-work-rating .work-rating-star { color: rgba(151, 169, 184, .46); font-size: inherit; line-height: inherit; }
.live-work-rating .work-rating-star.is-filled { color: #c9ad67; }
.live-work-rating.is-unrated { opacity: .56; }
.live-work-title-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.1em;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.live-work-row > button:first-child span:first-child > .live-work-title-line,
.live-work-row > button:first-child .pause-track-row-copy > .live-work-title-line {
  width: 100%;
}
.live-work-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.library-work-rating { margin-left: 0; }
.library-work-rating .work-rating-star { color: rgba(151, 169, 184, .46); }
.library-work-rating .work-rating-star.is-filled { color: #c9ad67; }
.library-work-rating.is-unrated { opacity: .56; }

#libraryView .data-table .rating-cell .library-work-rating {
  display: inline-flex;
  justify-content: center;
  font-size: 0.72em;
}

.title-cell .work-rating-inline {
  vertical-align: .04em;
}

#workDialog textarea {
  min-height: 48px;
}

#workDialog .work-info-summary {
  display: block;
  margin: 0 0 14px;
}

#workDialog .work-info-title {
  display: block;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 860;
  line-height: 1.12;
}

#workDialog .work-info-line {
  display: block;
  margin: 0 0 6px;
  color: rgba(167, 185, 199, 0.88);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.25;
}

#workDialog .work-info-notes {
  display: block;
  margin: 2px 0 0;
  color: rgba(167, 185, 199, 0.82);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

#workDialog.is-info-mode .work-info-list {
  display: none;
}

#workDialog.is-editing .work-info-summary {
  display: none;
}

#workDialog .work-info-stats {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 158, 183, 0.12);
}

#workDialog .work-info-stats h3 {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

#workDialog .work-info-stats div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#workDialog .work-info-stats span {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#workDialog .work-info-stats strong,
#workDialog .work-info-stats small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#workDialog .work-info-stats strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

#workDialog .work-info-stats small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

#workDialog.is-editing .work-info-list {
  border-top: 0;
  gap: 12px;
}

#workDialog.is-editing .work-info-list label {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

#workDialog.is-editing .work-field-stack {
  gap: 12px;
}

#workDialog .work-dialog-collections-summary {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(122, 158, 183, 0.12);
  border-radius: 0;
  background: transparent;
}

#workDialog .work-dialog-collections-summary h3 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#workDialog .work-dialog-collections-summary p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

#workDialog .work-editor-collection-submenu {
  position: relative;
  margin-top: 10px;
}

#workDialog .work-editor-collection-submenu > .work-context-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.08);
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

#workDialog .work-editor-collection-submenu > .work-context-submenu-trigger span {
  color: var(--muted);
  font-size: 19px;
  transition: transform 120ms ease;
}

#workDialog .work-editor-collection-submenu.is-open > .work-context-submenu-trigger span {
  transform: rotate(90deg);
}

#workDialog .work-editor-collection-panel {
  top: auto;
  right: 0;
  bottom: calc(100% + 6px);
  left: auto;
  z-index: 5;
  min-width: min(320px, calc(100vw - 48px));
  gap: 4px;
  max-height: min(42vh, 330px);
  margin: 0;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: rgba(8, 19, 29, 0.98);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

#workDialog .work-editor-collection-panel::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 12px;
}

#workDialog .work-editor-collection-panel legend {
  display: none;
}

#workDialog .work-editor-collection-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}@media (hover: hover) {

#workDialog .work-editor-collection-panel label:hover,
#workDialog .work-editor-collection-panel label:has(input:checked) {
  background: rgba(122, 199, 167, 0.14);
}}

#workDialog .work-editor-collection-panel input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#workDialog .work-editor-collection-submenu.is-open > .work-editor-collection-panel {
  display: grid;
}

#workDialog .compact-notes-field textarea {
  min-height: 46px;
  resize: vertical;
}

#concertFinishActions {
  display: none !important;
}

#workDialog menu {
  margin-top: 8px;
}

.wide-dialog {
  width: min(980px, calc(100vw - 28px));
}

.pdf-viewer-dialog {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.missing-media-choice-dialog .dialog-eyebrow { display: block; margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.missing-media-choice-dialog h2 { margin-bottom: 7px; }

.pdf-viewer-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "bar"
    "track"
    "rating"
    "stage";
  gap: 0;
  padding: 0;
  background: #101820;
}

.pdf-work-rating-prompt {
  grid-area: rating;
  min-height: 0;
  padding: 4px 10px;
  border-top: 1px solid rgba(122, 158, 183, .18);
  border-bottom: 1px solid rgba(122, 158, 183, .18);
  background: rgba(122, 199, 167, .07);
}
.pdf-work-rating-prompt[hidden] { display: none; }

.pdf-rating-layout-compact .live-rating-title {
  font-size: 12px;
}

.pdf-rating-layout-compact .live-rating-question {
  font-size: 11px;
}

.pdf-rating-layout-compact .live-good-version-heart-btn {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.pdf-rating-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.pdf-rating-actions button:not(.pdf-rating-later) { min-width: 30px; min-height: 30px; padding: 0 4px; border-color: transparent; color: #c9ad67; font-size: 11px; font-weight: 800; }
.pdf-rating-actions button:not(.pdf-rating-later)[data-enjoyment-rating="0"] { color: var(--muted); font-size: 12px; }@media (hover: hover) {
.pdf-rating-actions button:not(.pdf-rating-later):hover,
.pdf-rating-actions button:not(.pdf-rating-later):focus-visible { color: #e2c989; background: rgba(201,173,103,.09); }}
.pdf-rating-actions .pdf-rating-later { min-height: 30px; margin-left: 4px; padding: 0 8px; color: var(--muted); font-size: 11px; }

@media (max-width: 760px) {
  .pdf-work-rating-prompt { padding: 6px 10px; gap: 6px; }
  .pdf-rating-actions button:not(.pdf-rating-later) { min-width: 26px; min-height: 28px; padding: 0 2px; font-size: 10px; }
}

.backing-track-panel {
  grid-area: track;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--field);
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.media-label,
.pdf-section-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.backing-track-panel strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.backing-track-controls {
  display: flex;
  gap: 6px;
}

.backing-track-controls button,
.live-audio-button, .play-along-button {
  font-size: 11px;
}

.pdf-section-label {
  grid-area: label;
  padding: 0 2px;
}

.pdf-viewer-bar {
  grid-area: bar;
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 8px;
  border: 0;
  border-bottom: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(7, 19, 29, 0.98), rgba(5, 14, 23, 0.99)),
    var(--panel);
}

.pdf-live-tracker {
  grid-column: 1;
  min-width: 0;
  position: relative;
}

.pdf-live-tracker .live-progress-tracker {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 4px;
  min-height: 72px;
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pdf-live-tracker .live-progress-piece-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.pdf-live-tracker .live-progress-piece-heading .live-progress-status {
  display: none !important;
}

.pdf-live-tracker .live-progress-piece-heading .live-progress-status strong {
  font-size: 11px !important;
}

.pdf-live-tracker .live-progress-piece-heading .status-light {
  width: 9px;
  height: 9px;
}

.pdf-live-tracker .live-progress-main {
  grid-column: 1;
  gap: 8px;
  padding-top: 0;
}

.pdf-live-tracker .live-progress-ring {
  width: 40px;
  height: 40px;
}

.pdf-live-tracker .live-progress-ring::after {
  inset: 4px;
}

.pdf-live-tracker .live-progress-ring span {
  display: none;
}

.pdf-live-tracker .live-progress-ring small,
.pdf-live-tracker .live-progress-ring em,
.pdf-live-tracker .live-progress-piece > span,
.pdf-live-tracker .live-progress-piece small {
  display: none;
}

.pdf-live-tracker .live-progress-piece > strong {
  font-size: 12px;
  line-height: 1.1;
}

.pdf-live-tracker .live-progress-meta {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-content: stretch;
  gap: 6px;
  margin-top: 2px;
  padding: 5px 0 0;
  border-top: 1px solid rgba(122, 158, 183, 0.18);
  border-left: 0;
}

.pdf-live-tracker .live-progress-meta small {
  display: block;
  margin-bottom: 2px;
  font-size: 8px;
  letter-spacing: 0.04em;
}

.pdf-live-tracker .live-progress-meta strong {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-live-tracker .live-progress-meta > span,
.pdf-live-tracker .live-progress-meta > button {
  min-width: 0;
}

.pdf-viewer-bar h2 {
  display: none;
}

.pdf-title-group {
  grid-column: 1;
  min-width: 0;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) .pdf-title-group {
  display: none;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 4px 6px 5px 4px;
  overflow: visible;
}

.pdf-viewer-status {
  margin-top: 2px;
  color: var(--accent);
  font-size: 12px;
  min-height: 15px;
}

.pdf-stage {
  grid-area: stage;
  position: relative;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  background: #101820;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.pdf-stage::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.pdf-stage.is-zoomed {
  overflow: auto;
  cursor: grab;
}

.pdf-duration-notice {
  position: absolute;
  z-index: 7;
  top: 54px;
  left: 150px;
  width: min(520px, calc(100vw - 190px));
  min-height: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 620;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  animation: none;
}

.pdf-duration-notice[hidden] {
  display: none !important;
}

.pdf-duration-notice span {
  display: block;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes pdfDurationNoticePulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

.pdf-viewer-shell iframe,
.pdf-viewer-shell canvas {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

.pdf-viewer-shell iframe {
  overflow: hidden;
  display: block;
  background: #101820;
}

/* V313 (Giottos Nacht-Befund): Die Bibliotheks-Kopfzeile ist eine ECHTE
   Zeile — Titel + Sterne links, Zu-Sammlung/♪/Brille/X rechts. Nichts
   schwebt mehr im PDF. */
.pdf-viewer-dialog.is-library-pdf .pdf-viewer-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 14px;
}

.pdf-viewer-dialog.is-library-pdf #pdfLiveTracker,
.pdf-viewer-dialog.is-library-pdf #pdfAddToSetlistBtn {
  display: none !important;
}

.pdf-viewer-dialog.is-library-pdf .pdf-viewer-bar > .dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.pdf-viewer-shell canvas {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  transform-origin: 0 0;
}

.pdf-page-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(37, 107, 90, 0.34);
  font-size: clamp(42px, 8vw, 84px);
  opacity: 0.18;
}@media (hover: hover) {

.pdf-page-zone:hover {
  background: rgba(37, 107, 90, 0.06);
  opacity: 0.45;
}}

.pdf-page-zone:disabled {
  opacity: 0;
  cursor: default;
}

.pdf-page-zone.is-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 14px;
}

.pdf-page-zone.is-next {
  right: 0;
  justify-content: flex-end;
  padding-right: 14px;
}

.pdf-page-indicator {
  position: absolute;
  right: 12px;
  bottom: 10px;
  min-width: 28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(20, 24, 21, 0.58);
  color: #fff;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}

.pdf-zoom-toggle {
  position: absolute;
  z-index: 3;
  left: 12px;
  bottom: 10px;
  min-width: 54px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(20, 24, 21, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
}@media (hover: hover) {

.pdf-zoom-toggle:hover,
.pdf-zoom-toggle:focus-visible {
  background: rgba(37, 107, 90, 0.82);
}}

.pdf-render-mode {
  position: absolute;
  z-index: 3;
  left: 76px;
  bottom: 10px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 24, 21, 0.58);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pdf-viewer-bar > .dialog-actions {
  grid-column: 2;
  align-self: center;
  flex-wrap: nowrap;
  margin-left: 0;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) > .dialog-actions {
  width: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  padding-right: 4px;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) > .dialog-actions > form {
  grid-column: 2;
  justify-self: end;
}

.pdf-viewer-bar #pdfAddToSetlistBtn {
  white-space: nowrap;
}

.pdf-live-tracker .pdf-progress-summary {
  display: grid;
  grid-template-columns: 128px minmax(104px, 0.42fr) max-content;
  grid-template-rows: auto;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  padding: 0;
  overflow: visible;
}

.pdf-live-tracker .pdf-progress-summary .live-progress-ring {
  width: 124px !important;
  height: 124px !important;
  margin: 0 0 -90px;
  transform: translate(5px, 0);
  z-index: 4;
  border: 1px solid rgba(128, 178, 205, 0.42);
  background:
    radial-gradient(circle at 48% 42%, rgba(22, 58, 78, 0.96), rgba(7, 20, 31, 0.99) 68%),
    rgba(22, 58, 78, 1);
  box-shadow:
    0 0 0 2px rgba(3, 12, 18, 0.86),
    0 0 7px rgba(83, 231, 110, 0.18),
    0 0 13px rgba(83, 231, 110, 0.13),
    0 12px 28px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(214, 241, 255, 0.08),
    inset 0 0 18px rgba(5, 14, 22, 0.52);
}

.pdf-live-tracker .pdf-progress-summary .live-progress-ring::before {
  inset: -3px;
  background:
    conic-gradient(
      from -90deg,
      var(--ring-color) calc(var(--progress) * 1turn),
      transparent 0
    );
  filter: blur(3px);
  opacity: 0.86;
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 62%, #000 67%, transparent 71%);
  mask: radial-gradient(circle, transparent 57%, #000 62%, #000 67%, transparent 71%);
  z-index: 0;
}

.pdf-live-tracker .pdf-progress-summary .live-progress-ring::after {
  inset: 10px;
  border: 0.5px solid rgba(128, 178, 205, 0.24);
  background:
    radial-gradient(circle at 48% 40%, rgba(25, 55, 72, 0.96), rgba(8, 22, 33, 0.98) 70%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.36),
    inset 0 0 20px rgba(0, 0, 0, 0.42);
}

.pdf-live-tracker .pdf-progress-summary.is-over-target-duration .live-progress-ring,
.pdf-live-tracker .pdf-progress-summary.is-duration-caution .live-progress-ring {
  background:
    radial-gradient(circle at 48% 42%, rgba(34, 42, 86, 0.98), rgba(10, 14, 39, 0.99) 70%),
    rgba(34, 42, 86, 1);
  box-shadow:
    0 0 0 2px rgba(3, 7, 20, 0.86),
    0 0 5px rgba(71, 64, 143, 0.14),
    0 0 10px rgba(71, 64, 143, 0.10),
    0 12px 28px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(214, 221, 255, 0.08),
    inset 0 0 18px rgba(5, 8, 22, 0.52);
}

.pdf-live-tracker.is-overtime-pulse-now .pdf-progress-summary.is-over-target-duration .live-progress-ring,
.pdf-live-tracker.is-overtime-pulse-now .pdf-progress-summary.is-duration-caution .live-progress-ring {
  animation: pdfTimerOvertimePulseBurst 1.8s ease-in-out 1;
}

@keyframes pdfTimerOvertimePulseBurst {
  0%, 24%, 48%, 72%, 100% {
    background:
      radial-gradient(circle at 48% 42%, rgba(34, 42, 86, 0.98), rgba(10, 14, 39, 0.99) 70%),
      rgba(34, 42, 86, 1);
    box-shadow:
      0 0 0 2px rgba(3, 7, 20, 0.86),
      0 0 5px rgba(71, 64, 143, 0.14),
      0 0 10px rgba(71, 64, 143, 0.10),
      0 12px 28px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px rgba(214, 221, 255, 0.08),
      inset 0 0 18px rgba(5, 8, 22, 0.52);
  }
  12%, 36%, 60% {
    background:
      radial-gradient(circle at 48% 42%, rgba(219, 222, 255, 0.98), rgba(75, 68, 154, 0.99) 56%, rgba(16, 13, 54, 0.99) 74%),
      rgba(75, 68, 154, 1);
    box-shadow:
      0 0 0 2px rgba(16, 13, 54, 0.90),
      0 0 12px rgba(208, 212, 255, 0.42),
      0 0 24px rgba(102, 88, 199, 0.30),
      0 12px 28px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px rgba(239, 241, 255, 0.18),
      inset 0 0 22px rgba(208, 212, 255, 0.20);
  }
}

.pdf-live-tracker .pdf-progress-summary .live-progress-ring span {
  display: block !important;
  align-self: center;
  margin-top: -8px;
  color: var(--ink);
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.34);
}

.pdf-live-tracker .pdf-progress-summary .live-progress-ring small {
  display: block !important;
  align-self: center;
  margin-top: 38px;
  color: rgba(167, 185, 199, 0.68);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.pdf-progress-played {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8fd9ad;
  box-shadow: none;
}

.pdf-progress-played small {
  color: rgba(167, 185, 199, 0.70);
  font-size: 9px;
  font-weight: 840;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  writing-mode: horizontal-tb;
  transform: none;
}

.pdf-progress-played strong {
  color: #8fd9ad;
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 0.92;
  text-shadow: 0 0 12px rgba(143, 217, 173, 0.18);
}

.pdf-progress-info {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-left: 3px;
  border-left: 1px solid rgba(122, 158, 183, 0.22);
  color: var(--ink);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.pdf-progress-info span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pdf-progress-info small {
  color: rgba(167, 185, 199, 0.70);
  font-size: 10px;
  font-weight: 840;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pdf-progress-info strong {
  overflow: hidden;
  color: #c6d8e4;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 880;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-collection-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-height: 30px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-list);
  background: var(--glass-field);
}

.pdf-collection-control span {
  white-space: nowrap;
}

#pdfCollectionToggleBtn.is-active {
  border-color: var(--line);
  color: var(--ink);
  background: var(--selected);
}

#pdfAddToCollectionBtn {
  min-height: 28px;
  padding: 0 7px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

#pdfAddToCollectionBtn::before {
  display: none;
}@media (hover: hover) {

#pdfAddToCollectionBtn:hover {
  border-color: transparent;
  background: var(--soft);
  box-shadow: none;
}}

.pdf-collection-control select {
  width: 132px;
  min-height: 28px;
  padding: 3px 7px;
}

.mini-close-button,
.dialog-close-button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}@media (hover: hover) {

.mini-close-button:hover,
.dialog-close-button:hover {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}}

#pdfAddToSetlistBtn {
  position: static;
  left: auto;
  transform: none;
  min-height: 38px;
  min-width: 260px;
  max-width: min(430px, 42vw);
  padding: 7px 14px;
  font-size: 14px;
  z-index: 2;
  text-transform: none;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn {
  grid-column: 1;
  justify-self: center;
  transform: translateX(-16px);
  border: 1.5px solid rgba(126, 196, 190, 0.42);
  border-radius: var(--radius-list);
  background:
    linear-gradient(180deg, rgba(20, 46, 58, 0.92), rgba(9, 25, 36, 0.92)),
    rgba(255, 255, 255, 0.055);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.20);
  font-weight: 760;
  letter-spacing: 0;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn > span {
  display: grid;
  min-width: 0;
  text-align: left;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-size: 14px;
  font-weight: 820;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn small {
  min-width: 0;
  overflow: hidden;
  color: rgba(167, 185, 199, 0.70);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.075em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn.is-current {
  border-color: rgba(143, 217, 173, 0.72);
  background:
    linear-gradient(90deg, rgba(143, 217, 173, 0.24), rgba(20, 46, 58, 0.88)),
    rgba(9, 25, 36, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 8px 18px rgba(0, 0, 0, 0.20),
    0 0 14px rgba(143, 217, 173, 0.16);
}

.pdf-viewer-bar:has(.pdf-live-tracker:not([hidden])) #pdfAddToSetlistBtn.is-current::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 2px;
  border-radius: 50%;
  background: #39ff14;
  box-shadow: 0 0 7px rgba(57, 255, 20, 0.92), 0 0 16px rgba(57, 255, 20, 0.54);
  flex: 0 0 auto;
}

dialog::backdrop {
  background: rgba(20, 24, 21, 0.32);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--glass-field);
  margin: 12px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

fieldset label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

fieldset input {
  width: auto;
}

.dialog-options {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.dialog-options button {
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
}

.dialog-options button.is-active {
  border-color: var(--line);
  background: var(--selected);
  box-shadow: none;
}

.dialog-options button small {
  color: var(--muted);
  white-space: normal;
}

menu {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
}

#deleteWorkBtn {
  color: #9f2b24;
}

@media (max-width: 860px) {
  .pause-playback-panel {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .live-panel.is-pause-player-open .pause-playback-panel {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .pause-player-playlist {
    grid-column: 2;
  }

  .pause-playback-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .live-panel.is-pause-player-open .pause-playback-actions {
    grid-column: 1 / -1;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    padding: 5px 8px;
    gap: 8px;
  }

  .tabs {
    width: 100%;
  }

  .tab {
    flex: 1;
    min-width: 0;
    padding-inline: 6px;
  }

  #workDialog,
  #eventSetupDialog {
    max-height: calc(100dvh - 18px);
    margin-top: 9px;
  }

  #eventSetupDialog {
    width: calc(100vw - 18px);
  }

  .concert-grid,
  .gema-layout {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  #workDialog .dialog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gema-view .form-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .compact-event-dialog .form-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .event-summary {
    grid-template-columns: 1fr;
  }

  .event-summary-list {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .view {
    padding: 6px;
  }

  #archiveView {
    min-height: 0;
  }

  #concertView.is-active,
  #concertGrid,
  .live-panel {
    height: calc(100vh - 50px);
    min-height: 0;
  }

  #concertGrid,
  .live-panel {
    height: 100%;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .live-browser {
    grid-template-columns: minmax(230px, var(--live-collection-width, 230px)) 4px minmax(0, 1fr);
    column-gap: 4px;
    /* iPad-Rahmen-Fix (Giotto 01.09., monatealter Bug): Die SAMMLUNGEN-
       Kopfzeile und die Liste darunter ueberlappen sich bewusst um 1px
       zu EINEM Rahmen — jeder Zeilenabstand reisst die Naht auf. Das
       frühere row-gap: 8px erzeugte genau den "ausgestanzten" Kopf. */
    row-gap: 0;
  }

  .live-work-row {
    grid-template-columns: minmax(0, 1fr) 52px 52px;
    column-gap: 8px;
    row-gap: 0;
  }

  .live-progress-tracker.is-large {
    grid-template-columns: minmax(0, 1.76fr) minmax(200px, 0.62fr);
    gap: 7px;
  }

  .live-progress-tracker.is-large .live-progress-status {
    left: 9px;
    top: 6px;
  }

  .live-progress-tracker.is-large .live-progress-main {
    grid-column: 1;
    gap: 7px;
  }

  .live-progress-tracker.is-large .live-progress-ring {
    width: 82px;
    height: 82px;
  }

  .live-progress-tracker.is-large .live-progress-ring span {
    font-size: 22px;
  }

  .live-progress-tracker.is-large .live-progress-piece > strong {
    font-size: 17px;
  }

  .live-progress-tracker.is-large .live-progress-meta {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
    grid-template-rows: minmax(44px, auto) minmax(72px, 1fr);
    justify-content: stretch;
    justify-items: stretch;
    gap: 0;
    padding-left: 8px;
    border-left: 1px solid rgba(122, 158, 183, 0.22);
  }

  .live-pdf-button {
    width: 52px;
  }

  .live-audio-button, .play-along-button {
    padding: 0;
  }

  .setlist li,
  .archive-item {
    padding: 7px;
  }

  .setlist li {
    grid-template-columns: 24px minmax(0, 1fr) 26px;
  }

  .setlist li > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2px;
  }

  .setlist .duration-button {
    margin-top: 0;
    white-space: nowrap;
    justify-self: start;
  }

  .setlist .unknown-complete-button {
    grid-column: 2 / -1;
    justify-self: start;
    margin-top: 3px;
  }

  .setlist-number {
    width: 24px;
    min-height: 24px;
    font-size: 12px;
  }
}

@media (max-width: 600px) {
  #concertView.is-active,
  #concertGrid,
  .live-panel {
    height: auto;
    min-height: calc(100dvh - 54px);
  }

  .live-overview-row {
    grid-template-columns: 1fr;
    gap: 6px;
    min-height: 0;
    margin: 2px 0 6px;
  }

  .live-tracker-shell {
    min-height: 116px;
  }

  .concert-status {
    min-height: 116px;
  }

  .live-progress-tracker.is-large {
    min-height: 116px;
    padding: 7px;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .live-progress-tracker.is-large .live-progress-main {
    grid-column: 1;
    gap: 8px;
    padding-top: 0;
  }

  .live-progress-tracker.is-large .live-progress-ring {
    width: 70px;
    height: 70px;
  }

  .live-progress-tracker.is-large .live-progress-ring span {
    font-size: 20px;
  }

  .live-progress-tracker.is-large .live-progress-ring small {
    font-size: 10px;
  }

  .live-progress-tracker.is-large .live-progress-piece > strong {
    font-size: 16px;
  }

  .live-progress-tracker.is-large .live-progress-meta {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    align-items: center;
    justify-content: start;
    justify-items: start;
    gap: 8px;
    padding: 3px 0 0 78px;
    border-left: 0;
    border-top: 1px solid rgba(122, 158, 183, 0.14);
  }

  .live-progress-tracker.is-large .live-progress-meta .live-meta-card {
    min-height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .live-progress-tracker.is-large .live-progress-meta small {
    font-size: 8px;
    letter-spacing: 0.055em;
  }

  .live-progress-tracker.is-large .live-progress-meta strong,
  .live-progress-tracker.is-large .live-recording-meta strong {
    font-size: 12px;
  }

  .live-progress-tracker.is-large .live-played-count {
    font-size: 18px !important;
  }

  .live-control-column {
    min-width: 0;
  }

  .live-toolbar {
    min-height: 72px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .live-toolbar button {
    min-height: 34px;
    padding: 5px 6px;
    font-size: 12px;
  }

  .live-browser {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .live-browser > .live-collections-header,
  .live-browser > .live-collections-header + .live-column,
  .live-browser > .live-works-column,
  .live-browser > .live-column:last-child {
    grid-column: 1;
  }

  .live-collections-header {
    min-height: 40px;
    padding: 6px 8px;
    border-radius: 14px;
  }

  .live-collections-header h3 {
    font-size: 11px;
  }

  .live-collections-header .live-column-toggle {
    width: auto;
    min-width: 108px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
  }

  .live-column-resizer {
    display: none;
  }

  .live-browser > .live-collections-header + .live-column {
    position: absolute;
    z-index: 20;
    top: 44px;
    right: 0;
    left: 0;
    max-height: min(54dvh, 360px);
    overflow: hidden;
    border: 1px solid rgba(122, 158, 183, 0.24);
    border-radius: 16px;
    background: rgba(8, 22, 33, 0.98);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  }

  .live-browser.is-collapsed .live-collections-header + .live-column {
    display: none;
  }

  .live-browser.is-collapsed > .live-collections-header {
    grid-column: 1;
  }

  .live-browser.is-collapsed > .live-column:last-child,
  .live-browser.is-collapsed > .live-works-column {
    grid-column: 1;
  }

  .live-collapsed-collection-context {
    min-height: 36px;
    margin-bottom: 6px;
    border-radius: 14px;
  }

  .live-collection-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    max-height: min(52dvh, 340px);
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .live-collection-list button {
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
  }

  .live-work-column-header {
    grid-template-columns: minmax(0, 1fr);
    min-height: 28px;
    margin-bottom: 6px;
    padding: 0 2px;
  }

  .live-work-column-header h3 {
    font-size: 11px;
  }

  .live-work-row {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 5px;
    width: 100%;
  }

  .live-work-row > button:first-child {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
  }

  .live-work-row > button:first-child strong {
    font-size: 14px;
  }

  .live-pdf-button,
  .live-audio-button, .play-along-button,
  .live-asset-folder-button,
  #liveAssignMediaBtn {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .live-overview-row {
    grid-template-columns: 1fr;
  }

  .live-toolbar {
    min-height: 96px;
  }

  #workDialog .dialog-grid {
    grid-template-columns: 1fr;
  }

  #libraryView.is-active,
  .split,
  .live-browser {
    grid-template-columns: 1fr;
  }

  .live-column-resizer {
    display: none;
  }

  .sidebar {
    order: 2;
  }

  .live-collection-list {
    display: flex;
    max-height: none;
    overflow-x: auto;
  }

  .live-collection-list button {
    width: auto;
    min-width: 92px;
  }

  .live-progress-tracker.is-large {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .live-progress-tracker.is-large .live-progress-main {
    grid-column: 1;
  }

  .live-progress-tracker.is-large .live-progress-status {
    position: static;
  }

  .live-progress-tracker.is-large .live-progress-main {
    padding-top: 0;
  }

  .live-progress-tracker.is-large .live-progress-meta {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
    justify-items: start;
    gap: 10px;
  }

  .compact-event-dialog .form-grid {
    grid-template-columns: 1fr;
  }

  .gema-view .form-grid {
    grid-template-columns: 1fr;
  }

  .event-summary-list {
    grid-template-columns: 1fr;
  }

  .live-browser > .live-collections-header + .live-column {
    position: absolute;
    top: 44px;
    right: 0;
    left: 0;
  }

  .live-collection-list {
    display: grid;
    grid-template-columns: 1fr;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@media (orientation: landscape) and (max-height: 900px) and (min-width: 900px) {
  .live-overview-row {
    grid-template-columns: minmax(0, 1.85fr) minmax(300px, 0.95fr);
    align-items: stretch;
    gap: 8px;
    min-height: 154px;
  }

  .live-tracker-shell,
  .live-control-column {
    height: 154px;
    min-height: 154px;
  }

  .live-overview-row .concert-status > .live-progress-tracker {
    min-height: 154px;
    height: 100%;
    padding: 10px;
  }

  .live-overview-row .live-progress-tracker.is-large {
    grid-template-columns: minmax(0, 1.62fr) minmax(178px, 0.62fr);
    gap: 7px;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring {
    width: 118px !important;
    height: 118px !important;
    transform: none;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring span {
    font-size: clamp(28px, 2.8vw, 38px) !important;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-ring small {
    margin-top: 32px;
  }

  .live-overview-row .live-progress-tracker.is-large .live-progress-piece > strong {
    font-size: clamp(18px, 2vw, 25px);
  }

  .live-progress-meta .live-played-count {
    font-size: clamp(48px, 6vw, 76px) !important;
  }
}

@media (min-width: 1180px) {
  .live-panel:not(:has(.live-browser.is-collapsed)) .live-overview-row {
    grid-template-columns:
      minmax(230px, var(--live-collection-width, 230px))
      4px
      minmax(0, 2fr)
      minmax(0, 1fr);
    column-gap: 5px;
    row-gap: 8px;
  }

  .live-panel:not(:has(.live-browser.is-collapsed)) .live-tracker-shell {
    grid-column: 3;
    min-width: 0;
  }

  .live-panel:not(:has(.live-browser.is-collapsed)) .live-control-column {
    grid-column: 4;
    min-width: 0;
  }

  .live-panel:not(:has(.live-browser.is-collapsed)) .live-tracker-shell .live-progress-tracker {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .topbar {
    gap: 5px;
    padding: 7px 7px;
    overflow: hidden;
  }

  .topbar h1 {
    flex: 0 0 auto;
    font-size: 17px;
    letter-spacing: -0.04em;
  }

  .topbar-brand-group {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    position: relative;
    z-index: 2;
  }

  .tabs {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    justify-content: space-between;
    position: relative;
    gap: 2px;
    padding: 3px;
    border-radius: 14px;
    overflow: visible;
  }

  #themeToggleBtn {
    flex: 0 0 42px;
    min-width: 42px;
    padding-inline: 5px;
    font-size: 12px;
  }

  .mobile-view-menu-button {
    display: inline-flex;
    flex: 1 1 0;
    max-width: 148px;
    min-width: 0;
    min-height: 32px;
    margin: 0 auto;
    border: 0;
    border-radius: 12px;
    background:
      radial-gradient(120% 180% at 50% 50%, var(--selected) 0%, rgba(122, 199, 167, 0.18) 56%, rgba(122, 199, 167, 0.07) 100%);
    color: var(--ink);
    justify-content: center;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      inset 0 0 18px rgba(255, 255, 255, 0.025);
    font-size: 13px;
    font-weight: 730;
  }

  .mobile-view-menu-button::after {
    content: "⌄";
    margin-left: 7px;
    color: var(--muted);
    font-size: 13px;
  }

  .tabs .tab {
    display: none;
    position: absolute;
    left: 50%;
    width: min(230px, 72vw);
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    padding-inline: 12px;
    border: 1px solid rgba(122, 158, 183, 0.26);
    border-radius: 13px;
    background: rgba(14, 31, 43, 0.98);
    color: var(--ink);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    font-size: 13px;
    transform: translateX(-50%);
    z-index: 130;
  }

  .tabs .tab[data-view="playlistModeView"] {
    display: none;
  }

  .tabs.is-mobile-menu-open .tab[data-view="libraryView"],
  .tabs.is-mobile-menu-open .tab[data-view="concertView"],
  .tabs.is-mobile-menu-open .tab[data-view="archiveView"] {
    display: inline-flex;
  }

  .tabs.is-mobile-menu-open .tab[data-view="libraryView"] {
    top: calc(100% + 8px);
  }

  .tabs.is-mobile-menu-open .tab[data-view="concertView"] {
    top: calc(100% + 51px);
  }

  .tabs.is-mobile-menu-open .tab[data-view="archiveView"] {
    top: calc(100% + 94px);
  }

  :root[data-theme="light"] .tabs .tab {
    border-color: rgba(118, 139, 145, 0.24);
    background: rgba(235, 241, 240, 0.98);
    color: #17242b;
    box-shadow: 0 14px 32px rgba(74, 92, 98, 0.14);
  }

  .access-lock-button {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding-inline: 0;
    overflow: hidden;
    text-indent: -999px;
    position: relative;
  }

  .access-lock-button::after {
    content: "👤";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-indent: 0;
    font-size: 18px;
  }

  #appSettingsBtn.access-lock-button::after {
    content: "⚙";
    font-size: 20px;
  }

  #accessLockBtn.access-lock-button::after {
    content: "👤";
    font-size: 18px;
  }

  #concertView.is-active {
    padding: 6px;
  }

  #concertView .live-overview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    margin: 0 0 8px;
  }

  #concertView .live-control-column {
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: 0;
  }

  #concertView .live-control-column .concert-event-line {
    display: none;
  }

  #concertView .live-tracker-shell,
  #concertView .concert-status {
    min-height: 0;
  }

  #concertView .live-progress-tracker.is-large {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(92px, 0.72fr);
    grid-template-rows: auto;
    align-items: stretch;
    min-height: 126px;
    padding: 8px;
    gap: 7px;
    overflow: hidden;
  }

  #concertView .live-progress-tracker.is-large .live-progress-status {
    display: inline-flex;
    position: static !important;
    inset: auto !important;
    gap: 5px;
    margin-bottom: 4px;
    padding: 0;
    color: var(--accent);
    font-size: 11px;
    line-height: 1;
  }

  #concertView .live-progress-tracker.is-large .live-progress-status .status-light {
    width: 10px;
    height: 10px;
  }

  #concertView .live-progress-tracker.is-large .live-progress-main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
  }

  #concertView .live-progress-tracker.is-large .live-progress-ring {
    width: 104px;
    height: 104px;
    transform: none !important;
  }

  #concertView .live-progress-tracker.is-large .live-progress-ring span {
    font-size: 28px;
  }

  #concertView .live-progress-tracker.is-large .live-progress-ring small {
    margin-top: 30px;
    font-size: 10.5px;
    letter-spacing: 0.035em;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: grid;
    align-content: center;
    grid-template-rows: 18px auto auto;
    gap: 2px;
    overflow: hidden;
    position: relative;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece-heading {
    display: flex;
    justify-content: flex-end;
    align-self: start;
    margin: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    line-height: 1;
    opacity: 0.92;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status .status-light {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 999px;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status:not(.is-paused):not(.is-ended):not(.is-idle) .status-light {
    background: #37ff24;
    box-shadow: 0 0 7px rgba(55, 255, 36, 0.95), 0 0 16px rgba(55, 255, 36, 0.55);
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status strong {
    display: inline-block !important;
    color: inherit;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece > strong {
    grid-row: 2;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.12;
    text-overflow: initial;
    white-space: normal;
    max-width: 100%;
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #concertView .live-progress-tracker.is-large .live-progress-piece > strong > span {
    display: inline;
    min-width: 0;
    padding-right: 0;
    animation: none;
  }

  #concertView .live-progress-tracker.is-large .live-current-set-button {
    grid-row: 3;
    margin-top: 0;
    font-size: 10px;
  }

  #concertView .live-progress-tracker.is-large .live-current-set-button em {
    font-size: 12px;
  }

  #concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
    grid-template-rows: auto auto;
    padding-left: clamp(10px, 2.2vw, 32px);
  }

  #concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading {
    position: static;
    justify-content: flex-start;
    align-self: center;
    width: 100%;
  }

  #concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading .live-progress-status strong {
    font-size: clamp(66px, 9.2vw, 126px) !important;
    letter-spacing: 0.04em;
    line-height: 0.84 !important;
  }

  #concertView .live-progress-tracker.is-large.is-plain-pause .live-current-set-button {
    grid-row: auto;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
  }

  #concertView .live-progress-tracker.is-large.is-plain-pause .live-current-set-button em {
    font-size: 15px;
  }

  #concertView .live-progress-tracker.is-large .live-progress-meta {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, auto));
    align-content: start;
    justify-content: stretch;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding: 0 0 0 7px;
    border-top: 0;
    border-left: 1px solid rgba(122, 158, 183, 0.18);
    overflow: visible;
  }

  #concertView .live-progress-tracker.is-large .live-meta-card,
  #concertView .live-progress-tracker.is-large .live-history-button.live-meta-card,
  #concertView .live-progress-tracker.is-large .live-recording-time-group.live-meta-card {
    display: grid;
    grid-column: auto;
    grid-row: auto;
    align-self: center;
    align-content: center;
    justify-items: start;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  #concertView .live-progress-tracker.is-large .live-recording-time-group.live-meta-card {
    justify-items: end;
    text-align: right;
    order: -1;
  }

  #concertView .live-progress-tracker.is-large .live-history-button.live-meta-card {
    justify-items: start;
    text-align: left;
  }

  #concertView .live-progress-tracker.is-large .live-meta-card small {
    margin: 0;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.045em;
  }

  #concertView .live-progress-tracker.is-large .live-meta-card > strong,
  #concertView .live-progress-tracker.is-large .live-recording-time-group .live-recording-meta strong {
    font-size: 11px;
    line-height: 1.05;
  }

  #concertView .live-progress-tracker.is-large .live-recording-dot {
    width: 9px;
    height: 9px;
  }

  #concertView .live-progress-tracker.is-large .live-played-count {
    font-size: 61px !important;
    line-height: 0.9;
  }

  #concertView .segmented.live-toolbar,
  #concertView .live-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    height: auto;
    gap: 7px;
    padding: 8px;
  }

  #concertView .live-toolbar button {
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 15px;
    justify-content: center;
  }

  #concertView #recordingPauseBtn {
    display: none;
  }

  .live-action-dialog,
  #eventSetupDialog.compact-event-dialog {
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100dvh - 28px);
    border: 1px solid rgba(139, 196, 218, 0.46);
    border-top: 2px solid rgba(125, 224, 190, 0.58);
    background:
      linear-gradient(180deg, rgba(18, 43, 59, 0.985), rgba(8, 24, 36, 0.985));
    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.56),
      0 0 0 1px rgba(255, 255, 255, 0.045) inset,
      0 0 34px rgba(93, 199, 183, 0.10);
  }

  .live-action-dialog::backdrop,
  #eventSetupDialog.compact-event-dialog::backdrop {
    background: rgba(1, 8, 14, 0.66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  .live-action-dialog form,
  #eventSetupDialog.compact-event-dialog form {
    padding: 16px;
  }

  #eventSetupDialog.compact-event-dialog h2 {
    margin-right: 34px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  #eventSetupDialog.compact-event-dialog .event-setup-dialog-lead {
    margin-bottom: 10px;
    font-size: 12px;
  }

  #eventSetupDialog.compact-event-dialog .event-setup-section {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
  }

  #eventSetupDialog.compact-event-dialog .event-setup-section-title {
    margin-bottom: 8px;
  }

  #eventSetupDialog.compact-event-dialog .form-grid,
  #eventSetupDialog.compact-event-dialog .event-setup-section-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  #eventSetupDialog.compact-event-dialog label {
    display: none;
  }

  #eventSetupDialog.compact-event-dialog label:has([name="name"]),
  #eventSetupDialog.compact-event-dialog label:has([name="venue"]),
  #eventSetupDialog.compact-event-dialog label:has([name="date"]),
  #eventSetupDialog.compact-event-dialog label:has([name="startTime"]),
  #eventSetupDialog.compact-event-dialog label.event-end-time-field,
  #eventSetupDialog.compact-event-dialog label:has([name="instruments"]) {
    display: grid;
  }

  #eventSetupDialog.compact-event-dialog.is-planning-mode [data-event-setup-section="gema"],
  #eventSetupDialog.compact-event-dialog.is-planning-mode [data-event-setup-section="performance"] {
    display: none;
  }

  #eventSetupDialog.compact-event-dialog.is-planning-mode label {
    display: none;
  }

  #eventSetupDialog.compact-event-dialog.is-planning-mode [data-event-setup-section="basics"] label,
  #eventSetupDialog.compact-event-dialog.is-planning-mode [data-event-setup-section="venue"] label,
  #eventSetupDialog.compact-event-dialog.is-planning-mode [data-event-setup-section="prep"] label {
    display: grid;
  }

  #eventSetupDialog.compact-event-dialog.is-planning-mode .event-setup-section[data-event-setup-section="basics"] .event-setup-section-grid {
    grid-template-columns: 1fr;
  }

  #eventSetupDialog.compact-event-dialog label input,
  #eventSetupDialog.compact-event-dialog label select,
  #eventSetupDialog.compact-event-dialog label textarea {
    min-height: 40px;
    border-color: rgba(122, 158, 183, 0.28);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--ink);
    font-size: 15px;
  }

  #eventSetupDialog.compact-event-dialog #setupLoadEventDataBtn {
    display: none;
  }

  #eventSetupDialog.compact-event-dialog menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
  }

  #eventSetupDialog.compact-event-dialog menu button {
    min-height: 42px;
  }

  #concertView .live-browser {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    position: relative;
    overflow: visible;
  }

  #concertView .live-collections-header {
    display: flex;
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    top: calc(78px + env(safe-area-inset-top));
    width: min(82vw, 304px);
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid rgba(139, 196, 218, 0.42);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(20, 45, 61, 0.985), rgba(12, 31, 45, 0.985));
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 255, 255, 0.035) inset;
    opacity: 1;
    transform: translateX(0);
    transition: transform 180ms ease, opacity 160ms ease;
    z-index: 90;
  }

  #concertView .live-browser.is-collapsed > .live-collections-header {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 18px));
  }

  #concertView .live-collections-header .live-column-toggle {
    display: inline-flex !important;
    width: auto;
    min-width: 82px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  #concertView .live-browser > .live-collections-header + .live-column {
    display: flex !important;
    position: fixed;
    left: max(10px, env(safe-area-inset-left));
    top: calc(121px + env(safe-area-inset-top));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(82vw, 304px);
    max-width: min(82vw, 304px);
    height: auto;
    margin: 0;
    padding: 10px;
    border-radius: 0 0 18px 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-100% - 18px));
    transition: transform 180ms ease, opacity 160ms ease;
    z-index: 89;
  }

  #concertView .live-collapsed-collection-context {
    display: flex;
    cursor: pointer;
  }

  #concertView .live-browser:not(.is-collapsed) > .live-collections-header + .live-column {
    border: 1px solid rgba(139, 196, 218, 0.42);
    border-top: 0;
    background:
      linear-gradient(180deg, rgba(20, 45, 61, 0.98), rgba(10, 27, 40, 0.98));
    box-shadow:
      0 16px 36px rgba(0, 0, 0, 0.44),
      0 0 0 1px rgba(255, 255, 255, 0.035) inset,
      0 0 28px rgba(93, 199, 183, 0.08);
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  :root[data-theme="light"] #concertView .live-collections-header {
    border-color: rgba(135, 153, 158, 0.34);
    background: linear-gradient(180deg, rgba(239, 244, 243, 0.99), rgba(228, 236, 235, 0.99));
    box-shadow:
      0 18px 38px rgba(89, 108, 114, 0.13),
      0 0 0 1px rgba(255, 255, 255, 0.48) inset;
  }

  :root[data-theme="light"] #concertView .live-browser:not(.is-collapsed) > .live-collections-header + .live-column {
    border-color: rgba(135, 153, 158, 0.34);
    background: linear-gradient(180deg, rgba(239, 244, 243, 0.985), rgba(226, 235, 234, 0.985));
    box-shadow:
      0 16px 34px rgba(89, 108, 114, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.45) inset;
  }

  #concertView .live-column:last-child,
  #concertView .live-list,
  #concertView .live-work-row,
  #concertView .live-work-row > button:first-child {
    width: 100%;
    max-width: none;
  }

  #concertView .live-work-column-header {
    padding: 0 2px;
    margin-bottom: 5px;
  }

  #concertView .live-work-column-header h3 {
    font-size: 10px;
  }

  #concertView .live-work-row {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 6px;
  }

  #concertView .live-work-row > button:first-child {
    min-height: 48px;
    padding: 8px 10px;
  }

  #concertView .live-work-row > button:first-child strong {
    font-size: 13px;
  }

  #concertView .live-work-row > button:first-child small {
    font-size: 10px;
  }

  #concertView .live-duration-notice {
    min-height: 16px;
    margin: 5px 0 6px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 620;
    letter-spacing: 0.01em;
    text-align: left;
    text-transform: none;
  }

  #concertView .live-pdf-button,
  #concertView .live-audio-button, #concertView .play-along-button,
  #concertView .live-asset-folder-button {
    display: none !important;
  }
}

.live-work-row .live-pdf-button,
.live-work-row .live-audio-button, .live-work-row .play-along-button {
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 12px !important;
}

.live-work-row .live-audio-button span, .live-work-row .play-along-button span {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px !important;
  line-height: 1;
  transform: translateY(-1px);
}

.archive-place-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass-field);
}

.archive-place-tools button {
  min-height: 34px;
}

.places-workspace {
  display: grid;
  gap: 18px;
}

.places-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-field);
}

.places-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
}

.places-section-title {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
}

.places-section-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.places-section-action {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 999px;
}

.places-empty-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 2px;
}

.performance-venue-tile-grid,
.recurring-event-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
}

.performance-venue-tile,
.recurring-event-tile {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 92px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, var(--glass-field));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}@media (hover: hover) {

.performance-venue-tile:hover,
.performance-venue-tile:focus-visible,
.recurring-event-tile:hover,
.recurring-event-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}}

.performance-venue-tile strong,
.recurring-event-tile strong {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.25;
}

.performance-venue-tile span,
.recurring-event-tile span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.performance-venue-card-address {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.performance-venue-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.performance-venue-card-actions button {
  min-height: 36px;
}

.recurring-event-dialog-lead {
  margin: 0;
}

.recurring-event-form-grid {
  margin-top: 4px;
}

.performance-venue-detail-dialog.is-recurring-event-card .performance-venue-card-actions {
  margin-top: 8px;
}

.performance-venue-item {
  cursor: default;
}

.performance-venue-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.performance-venue-detail-dialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 28px));
}

.performance-venue-detail-dialog [data-venue-detail-content] {
  display: grid;
  gap: 12px;
}

.performance-venue-detail-dialog h2 {
  margin: 0;
}

.performance-venue-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
}

.performance-venue-detail-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--glass-field);
}

.performance-venue-detail-list dt,
.performance-venue-detail-list dd {
  margin: 0;
}

.new-works-workspace,
.new-works-list {
  display: grid;
  gap: 12px;
}

.new-works-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 14px;
  padding: 4px 2px 2px;
}

.new-works-header-copy {
  min-width: 0;
}

.new-works-header h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
}

.new-works-header-copy span,
.new-work-card p {
  color: var(--muted);
}

.new-works-worklist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.new-works-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.new-works-status-row span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-field);
  color: var(--muted);
  font-size: 12px;
}

.new-works-status-row strong {
  color: var(--ink);
  font-size: 16px;
}

.new-works-export-btn {
  min-height: 36px;
  padding: 0 12px;
  border-color: rgba(122, 158, 183, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.new-works-export-btn.is-ready {
  border-color: rgba(122, 199, 167, 0.36);
  background: rgba(122, 199, 167, 0.14);
  color: var(--ink);
  font-weight: 800;
}

.new-works-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.new-works-settings-open-btn {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--glass-field);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}@media (hover: hover) {

.new-works-settings-open-btn:hover,
.new-works-settings-open-btn:focus-visible {
  background: var(--soft);
}}

.new-works-settings-card .improvisation-settings-lead,
.improvisation-settings-block > h4,
.improvisation-artists-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
}

.new-works-settings-card > header p,
.improvisation-settings-lead,
.improvisation-artists > .muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.improvisation-settings {
  display: grid;
  gap: 0;
  justify-items: start;
  width: 100%;
}

.improvisation-settings-block {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  justify-items: start;
}

.improvisation-settings-block:first-of-type {
  padding-top: 0;
}

.improvisation-settings-block:last-of-type {
  padding-bottom: 0;
}

.improvisation-settings-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: end;
  width: 100%;
}

.improvisation-settings-fields > label {
  width: max-content;
  max-width: 100%;
}

.improvisation-settings label input,
.improvisation-settings label select,
.app-settings-dialog .improvisation-settings label input,
.app-settings-dialog .improvisation-settings label select {
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.improvisation-settings select,
.app-settings-dialog .improvisation-settings select {
  -webkit-appearance: none;
  appearance: none;
  field-sizing: content;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 52%,
    calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.improvisation-field-prefix input {
  width: 12.5rem;
}

.improvisation-field-composer-custom input,
.improvisation-field-gattung input {
  width: 13.5rem;
}

.improvisation-field-ensemble {
  flex: 1 1 14rem;
  width: min(100%, 22rem);
}

.improvisation-field-ensemble input {
  width: 100%;
}

.improvisation-settings-rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(122, 158, 183, 0.22);
}

.improvisation-artists,
.improvisation-artist-list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.improvisation-artists-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.improvisation-artists-head button[data-improvisation-add-artist] {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass-field);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}@media (hover: hover) {

.improvisation-artists-head button[data-improvisation-add-artist]:hover,
.improvisation-artists-head button[data-improvisation-add-artist]:focus-visible {
  background: var(--soft);
}}

.improvisation-artist-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.improvisation-artist-row label {
  width: auto;
  min-width: 0;
}

.improvisation-artist-row label input {
  width: 100%;
}

.improvisation-artist-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  min-width: 92px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.improvisation-artist-remove-icon {
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
}

.improvisation-artist-remove-label {
  line-height: 1;
}@media (hover: hover) {

.improvisation-artist-remove:hover,
.improvisation-artist-remove:focus-visible {
  border-color: rgba(196, 84, 110, 0.38);
  background: rgba(196, 84, 110, 0.1);
  color: #f0c4cb;
}}

.improvisation-preview {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
}

.improvisation-preview p {
  width: max-content;
  max-width: min(100%, 36rem);
  white-space: pre-line;
}

@media (max-width: 720px) {
  .improvisation-settings-fields > label,
  .improvisation-field-ensemble {
    width: 100%;
    flex-basis: 100%;
  }

  .improvisation-settings label input,
  .improvisation-settings label select,
  .improvisation-field-prefix input,
  .improvisation-field-composer-custom input,
  .improvisation-field-gattung input,
  .improvisation-field-ensemble input {
    width: 100%;
  }

  .improvisation-artist-row {
    grid-template-columns: 1fr;
  }

  .improvisation-artist-remove {
    justify-self: start;
  }
}

.new-work-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}

.new-work-card-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.new-work-card h3,
.new-work-card p {
  margin: 0;
}

.new-work-card h3 {
  overflow: hidden;
  color: var(--ink);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-work-status {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(122,231,188,.11);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.new-work-status.is-submitted { color: #e8c66a; background: rgba(232,198,106,.1); }
.new-work-status.is-registered { color: var(--muted); background: rgba(151,169,184,.1); }

.new-work-card dl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 0;
}

.new-work-card dl div {
  display: flex;
  gap: 6px;
}

.new-work-card dt,
.new-work-card dd {
  margin: 0;
  font-size: 12px;
}

.new-work-card dt { color: var(--muted); }
.new-work-card dd { color: var(--ink); font-weight: 800; }

.new-work-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 7px;
}

.new-work-actions button {
  min-height: 36px;
}

@media (max-width: 780px) {
  .new-works-header {
    grid-template-columns: 1fr;
  }
  .new-works-settings-open-btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
  }
  .new-work-card { align-items: stretch; grid-template-columns: 1fr; }
  .new-works-worklist-head { flex-direction: column; align-items: stretch; }
  .new-works-export-btn { width: 100%; }
  .new-work-actions { grid-template-columns: 1fr 1fr; }
}

.performance-venue-detail-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.performance-venue-detail-list dd {
  overflow-wrap: anywhere;
  color: var(--ink);
}

@media (max-width: 620px) {
  .performance-venue-detail-list { grid-template-columns: 1fr; }
}

.admin-pianist-tools {
  align-items: center;
}

.admin-pianist-tools span {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-pianist-backoffice {
  display: grid;
  gap: 12px;
}

.admin-pianist-invites {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-pianist-invites h3,
.admin-pianist-card h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-pianist-invites div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-pianist-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(134, 180, 170, 0.22);
  border-radius: 999px;
  color: var(--text);
  background: rgba(134, 180, 170, 0.08);
  font-size: 0.82rem;
}

.admin-concert-conflicts {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(199, 168, 87, 0.26);
  border-radius: 18px;
  background: rgba(199, 168, 87, 0.055);
}

.admin-concert-conflicts-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-concert-conflicts-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.admin-concert-conflicts-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.admin-concert-conflicts-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #d0b36a;
  background: rgba(199, 168, 87, 0.12);
  font-weight: 850;
}

.admin-concert-conflict {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(199, 168, 87, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-concert-conflict-title strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.admin-concert-conflict-title small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.admin-concert-conflict-versions {
  display: grid;
  gap: 6px;
}

.admin-concert-conflict-versions div {
  display: grid;
  gap: 2px;
  padding: 7px 0;
  border-top: 1px solid rgba(134, 180, 170, 0.12);
}

.admin-concert-conflict-versions span {
  color: var(--text);
  font-weight: 720;
}

.admin-concert-conflict-versions small {
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-concert-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.admin-concert-conflict-actions button {
  min-height: 32px;
  padding-inline: 12px;
}

.admin-pianist-card {
  gap: 14px;
  padding: 16px;
}

.admin-pianist-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-pianist-card-head strong {
  display: block;
  color: var(--text);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}

.admin-pianist-card-head small {
  display: block;
  margin-top: 4px;
}

.admin-pianist-status {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(199, 168, 87, 0.28);
  border-radius: 999px;
  color: #d0b36a;
  background: rgba(199, 168, 87, 0.08);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-pianist-status.is-active {
  border-color: rgba(111, 220, 177, 0.34);
  color: var(--accent);
  background: rgba(111, 220, 177, 0.08);
}

.admin-pianist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 18px;
}

.admin-pianist-facts {
  display: grid;
  gap: 7px;
  margin: 0;
}

.admin-pianist-facts div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.admin-pianist-facts dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.admin-pianist-facts dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
}

.admin-pianist-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-pianist-stats span {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-pianist-stats strong {
  color: var(--text);
  font-size: 1rem;
}

.admin-pianist-stats small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pianist-concerts {
  padding-top: 12px;
  border-top: 1px solid rgba(134, 180, 170, 0.18);
}

.admin-pianist-concerts ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-pianist-concerts li {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(134, 180, 170, 0.12);
}

.admin-pianist-concerts li:last-child {
  border-bottom: 0;
}

.admin-pianist-concerts span {
  color: var(--text);
  font-weight: 720;
}

.admin-pianist-concerts small {
  color: var(--muted);
}

@media (max-width: 880px) {
  .admin-pianist-grid,
  .admin-pianist-concerts li {
    grid-template-columns: 1fr;
  }
  .admin-pianist-tools span {
    margin-left: 0;
    width: 100%;
  }
}

/* High-contrast light mode for outdoor/iPad use */
:root[data-theme="light"] {
  --bg: #eef2f3;
  --ink: #151b1f;
  --muted: #516168;
  --line: #a8b7bd;
  --panel: #f7faf9;
  --field: #eef4f5;
  --soft: #dfe8ea;
  --header: #e4ecef;
  --selected: #d2eadf;
  --glass-panel: rgba(247, 250, 249, 0.96);
  --glass-field: rgba(239, 246, 247, 0.98);
  --glass-soft: rgba(223, 232, 234, 0.96);
  --glass-shadow: 0 22px 48px rgba(45, 61, 68, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 20% 10%, rgba(210, 224, 229, 0.58), transparent 34%),
    linear-gradient(180deg, #f4f7f8, #e9eff1);
  color: var(--ink);
}

:root[data-theme="light"] dialog,
:root[data-theme="light"] .compact-dialog,
:root[data-theme="light"] .wide-dialog,
:root[data-theme="light"] .profile-onboarding-dialog,
:root[data-theme="light"] .venue-setup-dialog,
:root[data-theme="light"] .access-dialog,
:root[data-theme="light"] .import-dialog,
:root[data-theme="light"] .archive-audio-dialog,
:root[data-theme="light"] .live-action-dialog {
  border-color: #98aab1 !important;
  background: #f7faf9 !important;
  color: #151b1f !important;
  box-shadow: 0 26px 64px rgba(45, 61, 68, 0.22) !important;
}

:root[data-theme="light"] .account-login-panel {
  border-color: rgba(108, 131, 139, 0.24);
  background: rgba(229, 237, 237, 0.58);
}

:root[data-theme="light"][data-account-locked="true"] .access-dialog {
  border-color: rgba(111, 151, 157, 0.28) !important;
  background:
    radial-gradient(circle at 16% 4%, rgba(82, 132, 124, 0.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(45, 78, 92, 0.18), transparent 38%),
    linear-gradient(180deg, #0c2530 0%, #09202b 48%, #071923 100%) !important;
  color: rgba(221, 229, 228, 0.88) !important;
}

:root[data-theme="light"][data-account-locked="true"] .access-dialog h2 {
  color: rgba(221, 229, 228, 0.88) !important;
}

:root[data-theme="light"][data-account-locked="true"] .access-dialog .eyebrow {
  color: rgba(174, 196, 197, 0.72) !important;
}

:root[data-theme="light"][data-account-locked="true"] .account-login-panel {
  border-color: rgba(134, 164, 174, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(14, 45, 54, 0.84), rgba(9, 32, 42, 0.76)) !important;
}

:root[data-theme="light"] .account-login-head span.is-connected {
  color: #31715f;
}

:root[data-theme="light"] .event-form,
:root[data-theme="light"] .gema-view .event-form {
  background: #fbfdfc !important;
}

:root[data-theme="light"] dialog::backdrop,
:root[data-theme="light"] .live-action-dialog::backdrop,
:root[data-theme="light"] #eventSetupDialog.compact-event-dialog::backdrop {
  background: rgba(232, 240, 243, 0.72) !important;
}

:root[data-theme="light"] .work-context-menu {
  border-color: #98aab1 !important;
  background: #f7faf9 !important;
  color: #151b1f !important;
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.20) !important;
}

:root[data-theme="light"] .work-context-submenu-panel {
  border-color: #98aab1 !important;
  background: #f7faf9 !important;
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.20) !important;
}

:root[data-theme="light"] .work-context-menu button {
  border-color: transparent !important;
  background: transparent !important;
  color: #151b1f !important;
}@media (hover: hover) {

:root[data-theme="light"] .work-context-menu button:hover,
:root[data-theme="light"] .work-context-menu button:focus-visible {
  border-color: transparent !important;
  background: #e7f1f0 !important;
}}

:root[data-theme="light"] dialog h2,
:root[data-theme="light"] dialog h3,
:root[data-theme="light"] dialog label,
:root[data-theme="light"] .compact-dialog h2,
:root[data-theme="light"] .wide-dialog h2 {
  color: #151b1f !important;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .table-input,
:root[data-theme="light"] label input,
:root[data-theme="light"] label select,
:root[data-theme="light"] label textarea,
:root[data-theme="light"] #workDialog label input,
:root[data-theme="light"] #workDialog label textarea,
:root[data-theme="light"] #eventSetupDialog.compact-event-dialog label input,
:root[data-theme="light"] #eventSetupDialog.compact-event-dialog label select,
:root[data-theme="light"] #eventSetupDialog.compact-event-dialog label textarea,
:root[data-theme="light"] .timer-settings-dialog input,
:root[data-theme="light"] .timer-settings-dialog select,
:root[data-theme="light"] .setlist-import-dialog textarea {
  border-color: transparent !important;
  background: rgba(36, 52, 54, 0.12) !important;
  color: #151b1f !important;
  box-shadow: none !important;
}

dialog input,
dialog select,
dialog textarea,
.compact-dialog input,
.compact-dialog select,
.compact-dialog textarea,
.gema-view .event-form input,
.gema-view .event-form select,
.gema-view .event-form textarea {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.085) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] dialog input,
:root[data-theme="light"] dialog select,
:root[data-theme="light"] dialog textarea,
:root[data-theme="light"] .compact-dialog input,
:root[data-theme="light"] .compact-dialog select,
:root[data-theme="light"] .compact-dialog textarea,
:root[data-theme="light"] .gema-view .event-form input,
:root[data-theme="light"] .gema-view .event-form select,
:root[data-theme="light"] .gema-view .event-form textarea {
  border-color: transparent !important;
  background: rgba(36, 52, 54, 0.12) !important;
  box-shadow: none !important;
}

dialog input:focus,
dialog select:focus,
dialog textarea:focus,
.compact-dialog input:focus,
.compact-dialog select:focus,
.compact-dialog textarea:focus,
.gema-view .event-form input:focus,
.gema-view .event-form select:focus,
.gema-view .event-form textarea:focus {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(122, 199, 167, 0.18) !important;
}

:root[data-theme="light"] dialog input:focus,
:root[data-theme="light"] dialog select:focus,
:root[data-theme="light"] dialog textarea:focus,
:root[data-theme="light"] .compact-dialog input:focus,
:root[data-theme="light"] .compact-dialog select:focus,
:root[data-theme="light"] .compact-dialog textarea:focus,
:root[data-theme="light"] .gema-view .event-form input:focus,
:root[data-theme="light"] .gema-view .event-form select:focus,
:root[data-theme="light"] .gema-view .event-form textarea:focus {
  border-color: transparent !important;
  background: rgba(36, 52, 54, 0.18) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(47, 122, 97, 0.16) !important;
}

:root[data-theme="light"] #workDialog.is-info-mode .work-info-list input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-list textarea {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #151b1f !important;
}

:root[data-theme="light"] #gemaPreview .table-input {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] #gemaPreview .table-input:focus,
:root[data-theme="light"] #gemaPreview .table-input.is-editing {
  border-color: #98aab1 !important;
  background: #edf4f5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-work-number input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-version input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-composer-first input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-composer-last input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-duration input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-gattung input,
:root[data-theme="light"] #workDialog.is-info-mode .work-info-field-notes textarea {
  color: rgba(42, 55, 61, 0.74) !important;
}

:root[data-theme="light"] #workDialog .work-info-title {
  color: #151b1f;
}

:root[data-theme="light"] #workDialog .work-info-line,
:root[data-theme="light"] #workDialog .work-info-notes {
  color: rgba(42, 55, 61, 0.76);
}

:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] .table-input:focus {
  border-color: transparent !important;
  outline: 2px solid rgba(47, 122, 97, 0.16) !important;
  background: rgba(36, 52, 54, 0.18) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] button,
:root[data-theme="light"] .file-button,
:root[data-theme="light"] menu button,
:root[data-theme="light"] .toolbar button,
:root[data-theme="light"] .library-actions-panel button,
:root[data-theme="light"] .library-actions-panel .file-button {
  border-color: #98aab1;
}

:root[data-theme="light"] .concerts-main.is-archive-collection .archive-collection-chrome-row {
  background: var(--archive-tray-fill) !important;
}@media (hover: hover) {

:root[data-theme="light"] .concerts-main.is-archive-collection .archive-list,
:root[data-theme="light"] .concerts-main.is-archive-collection .archive-register-tab.is-active,
:root[data-theme="light"] .concerts-main.is-archive-collection .archive-register-tab.is-active:hover {
  background: var(--archive-folder-fill) !important;
}}

:root[data-theme="light"] .panel,
:root[data-theme="light"] .sidebar-panel,
:root[data-theme="light"] .work-area,
:root[data-theme="light"] .concerts-sidebar,
:root[data-theme="light"] .concerts-main,
:root[data-theme="light"] .table-wrap,
:root[data-theme="light"] .collection-list,
:root[data-theme="light"] .archive-list,
:root[data-theme="light"] .library-menu-bar,
:root[data-theme="light"] .library-actions-panel,
:root[data-theme="light"] .library-meta-bar,
:root[data-theme="light"] .archive-place-tools {
  border-color: #a8b7bd !important;
  background: rgba(247, 250, 249, 0.88) !important;
}@media (hover: hover) {

:root[data-theme="light"] .library-actions-menu summary:hover,
:root[data-theme="light"] .library-actions-menu[open] summary {
  border-color: rgba(74, 91, 99, 0.18);
  background: #e9f0f1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: rgba(21, 27, 31, 0.82);
}}

:root[data-theme="light"] .library-actions-menu summary {
  color: rgba(42, 55, 61, 0.66);
}

:root[data-theme="light"] .library-menu-action {
  border-color: rgba(36, 52, 54, 0.18);
  background: transparent;
  color: rgba(36, 52, 54, 0.62);
}@media (hover: hover) {

:root[data-theme="light"] .library-menu-action:hover,
:root[data-theme="light"] .library-menu-action:focus-visible {
  border-color: rgba(36, 52, 54, 0.28);
  background: rgba(36, 52, 54, 0.05);
  color: rgba(15, 31, 27, 0.88);
}}

:root[data-theme="light"] .library-actions-panel {
  border-color: #98aab1 !important;
  background: #edf4f5 !important;
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.18) !important;
}

:root[data-theme="light"] .library-actions-panel button,
:root[data-theme="light"] .library-actions-panel .file-button {
  border-color: transparent;
  color: rgba(21, 27, 31, 0.78);
  font-weight: 650;
}@media (hover: hover) {

:root[data-theme="light"] .library-actions-panel button:hover,
:root[data-theme="light"] .library-actions-panel .file-button:hover {
  border-color: #92a7af;
  background: #e7f1f0;
}}

:root[data-theme="light"] .library-export-format,
:root[data-theme="light"] .collection-share-dialog select,
:root[data-theme="light"] .backup-stack {
  border-color: #98aab1 !important;
  background: #edf4f5 !important;
}

:root[data-theme="light"] .library-export-format label,
:root[data-theme="light"] .collection-share-dialog label {
  color: #151b1f !important;
}

:root[data-theme="light"] .library-meta-bar {
  color: rgba(66, 82, 90, 0.72);
}

:root[data-theme="light"] .library-search {
  border-color: rgba(91, 109, 116, 0.22);
  background: rgba(222, 229, 228, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .library-search span {
  color: rgba(38, 52, 58, 0.78);
}

:root[data-theme="light"] .library-search input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(22, 31, 35, 0.88);
}

:root[data-theme="light"] .library-search input[type="search"]:focus {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .library-search input[type="search"]::placeholder {
  color: rgba(38, 52, 58, 0.62);
}

:root[data-theme="light"] .library-active-title {
  color: rgba(31, 42, 47, 0.84);
}

:root[data-theme="light"] [data-help]::after {
  border-color: rgba(74, 91, 99, 0.24);
  background: rgba(247, 250, 249, 0.98);
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.16);
  color: #151b1f;
}

:root[data-theme="light"] .help-tooltip {
  border-color: rgba(74, 91, 99, 0.24);
  background: rgba(247, 250, 249, 0.98);
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.16);
  color: #151b1f;
}

:root[data-theme="light"] .data-table th,
:root[data-theme="light"] .data-table td,
:root[data-theme="light"] #libraryView .data-table td {
  border-bottom-color: rgba(72, 92, 104, 0.15) !important;
}

:root[data-theme="light"] .live-work-row > button:first-child,
:root[data-theme="light"] .setlist li,
:root[data-theme="light"] .archive-item,
:root[data-theme="light"] .collection-list button,
:root[data-theme="light"] .live-collection-list button {
  border-color: #a8b7bd !important;
  background: #edf4f5 !important;
  box-shadow: 0 2px 7px rgba(45, 61, 68, 0.06) !important;
}@media (hover: hover) {

:root[data-theme="light"] #libraryView .data-table tbody tr:not(.is-selected),
:root[data-theme="light"] #libraryView .data-table tbody tr:not(.is-selected):hover {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}}@media (hover: hover) {

:root[data-theme="light"] .live-work-row > button:first-child:hover,
:root[data-theme="light"] .setlist li:hover,
:root[data-theme="light"] .collection-list button:hover,
:root[data-theme="light"] .archive-item:hover {
  border-color: #6f918b !important;
  background: #e7f1f0 !important;
}}

:root[data-theme="light"] .data-table tr.is-selected,
:root[data-theme="light"] .live-work-row.is-current > button:first-child,
:root[data-theme="light"] .setlist li.is-current,
:root[data-theme="light"] .collection-list button.is-active,
:root[data-theme="light"] .archive-mode-switch button.is-active {
  border-color: #2f7a61 !important;
  background: linear-gradient(90deg, rgba(157, 220, 184, 0.56), rgba(218, 240, 228, 0.92)) !important;
  box-shadow: 0 0 0 1px rgba(47, 122, 97, 0.18), 0 8px 18px rgba(47, 122, 97, 0.14) !important;
}

:root[data-theme="light"] .archive-item {
  border-color: #a2b2b8 !important;
  background: #f3f7f7 !important;
  box-shadow: none !important;
}@media (hover: hover) {

:root[data-theme="light"] .archive-item:hover,
:root[data-theme="light"] .archive-item:focus-within {
  border-color: #829a9d !important;
  background: #f7faf9 !important;
  box-shadow: none !important;
}}

:root[data-theme="light"] .collection-list {
  background: transparent !important;
}

:root[data-theme="light"] .collection-list button {
  border-color: transparent !important;
  color: #151b1f !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .live-collection-list button:not(.is-active) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}@media (hover: hover) {

:root[data-theme="light"] .live-collection-list button:not(.is-active):hover,
:root[data-theme="light"] .live-collection-list button:not(.is-active):focus-visible {
  border-color: #6f918b !important;
  background: #e7f1f0 !important;
  box-shadow: none !important;
}}

:root[data-theme="light"] .live-collection-list button.is-active {
  border-color: #2f7a61 !important;
  background: linear-gradient(90deg, rgba(157, 220, 184, 0.56), rgba(218, 240, 228, 0.92)) !important;
  box-shadow: 0 0 0 1px rgba(47, 122, 97, 0.18), 0 8px 18px rgba(47, 122, 97, 0.14) !important;
}

:root[data-theme="light"] .collection-list .collection-count {
  color: #516168 !important;
  font-weight: 720;
}

:root[data-theme="light"] .collection-list .collection-badge {
  border-color: #98aab1;
  background: #e7f1f0;
  color: #163f33;
}

:root[data-theme="light"] .collection-list button.is-active .collection-badge {
  border-color: #2f7a61;
  background: #cfe8dc;
  color: #102f27;
}

:root[data-theme="light"] .pdf-icon-button,
:root[data-theme="light"] .live-audio-button, :root[data-theme="light"] .play-along-button,
:root[data-theme="light"] #libraryView .live-pdf-button,
:root[data-theme="light"] #libraryView .live-audio-button, :root[data-theme="light"] #libraryView .play-along-button {
  border-color: #aebbc0 !important;
  background: #e6eef0 !important;
  color: #6a777d !important;
}

:root[data-theme="light"] .pdf-icon-button.has-asset,
:root[data-theme="light"] .live-audio-button.has-asset, :root[data-theme="light"] .play-along-button.has-asset,
:root[data-theme="light"] #libraryView .live-pdf-button.has-asset,
:root[data-theme="light"] #libraryView .live-audio-button.has-asset, :root[data-theme="light"] #libraryView .play-along-button.has-asset {
  border-color: #2f7a61 !important;
  background: #d8efe4 !important;
  color: #163f33 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 0 0 1px rgba(47, 122, 97, 0.10) !important;
}

:root[data-theme="light"] .pdf-icon-button.is-missing-asset,
:root[data-theme="light"] .live-audio-button.is-missing-asset, :root[data-theme="light"] .play-along-button.is-missing-asset,
:root[data-theme="light"] #libraryView .live-pdf-button.is-missing-asset,
:root[data-theme="light"] #libraryView .live-audio-button.is-missing-asset, :root[data-theme="light"] #libraryView .play-along-button.is-missing-asset {
  border-color: #bdc7cb !important;
  background: #e3ebed !important;
  color: #728087 !important;
  opacity: 0.72;
}

:root[data-theme="light"] #libraryView .data-table .work-number-cell,
:root[data-theme="light"] #libraryView .collection-text-list {
  color: #5d6b70 !important;
}

:root[data-theme="light"] #libraryView .data-table .work-number-cell {
  font-weight: 780;
}

:root[data-theme="light"] #libraryView .collection-text-list {
  font-weight: 650;
}

:root[data-theme="light"] .admin-pianist-invites,
:root[data-theme="light"] .admin-pianist-stats span {
  border-color: rgba(74, 91, 99, 0.12);
  background: rgba(229, 237, 239, 0.72);
}

:root[data-theme="light"] .admin-pianist-chip {
  border-color: rgba(60, 119, 101, 0.18);
  background: rgba(210, 234, 223, 0.5);
}

:root[data-theme="light"] .admin-concert-conflicts {
  border-color: rgba(138, 107, 32, 0.2);
  background: rgba(211, 190, 122, 0.12);
}

:root[data-theme="light"] .admin-concert-conflicts-head > span {
  color: #7b611f;
  background: rgba(199, 168, 87, 0.16);
}

:root[data-theme="light"] .admin-concert-conflict {
  border-color: rgba(138, 107, 32, 0.14);
  background: rgba(247, 250, 249, 0.7);
}

:root[data-theme="light"] .admin-concert-conflict-versions div {
  border-top-color: rgba(74, 91, 99, 0.12);
}

:root[data-theme="light"] .admin-pianist-status {
  color: #8a6b20;
  background: rgba(199, 168, 87, 0.12);
}

:root[data-theme="light"] .admin-pianist-status.is-active {
  color: #2e735e;
  background: rgba(72, 144, 118, 0.12);
}

:root[data-theme="light"] .admin-pianist-concerts {
  border-top-color: rgba(74, 91, 99, 0.15);
}

:root[data-theme="light"] .admin-pianist-concerts li {
  border-bottom-color: rgba(74, 91, 99, 0.12);
}
.missing-work-data-dialog {
  width: min(720px, calc(100vw - 28px));
}

.missing-work-data-list {
  display: grid;
  gap: 6px;
  max-height: min(52vh, 520px);
  margin: 12px 0;
  overflow: auto;
}

.missing-work-data-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
}

.missing-work-data-row small {
  color: var(--muted);
}

.missing-work-data-row.is-export-critical {
  border-color: rgba(180, 35, 24, 0.38);
}

.missing-work-data-row.is-optional-only {
  border-color: var(--line);
  background: var(--panel);
}

.missing-critical-label {
  color: #b42318 !important;
  font-weight: 650;
}

:root[data-theme="dark"] .missing-critical-label {
  color: #ff9f92 !important;
}

.library-actions-panel .media-folder-button {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
}

.gema-email-import-dialog {
  width: min(720px, calc(100vw - 28px));
}

.gema-email-import-dialog textarea {
  width: 100%;
  min-height: 180px;
  margin: 10px 0;
}

.gema-email-import-result {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.gema-email-extracted {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.gema-email-extracted span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.gema-email-extracted b {
  overflow: hidden;
  text-overflow: ellipsis;
}

:root[data-theme="light"] .library-search input[type="search"],
:root[data-theme="light"] .library-search input[type="search"]:focus,
:root[data-theme="light"] .library-search input[type="search"]:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .gema-verification-summary {
  border-top-color: rgba(91, 109, 116, 0.18);
}

:root[data-theme="light"] .gema-verification-summary span {
  color: rgba(42, 55, 61, 0.58);
}

:root[data-theme="light"] .gema-verification-summary strong {
  color: rgba(42, 55, 61, 0.78);
}

:root[data-theme="light"] .gema-verification-summary strong.is-confirmed {
  color: rgba(46, 111, 82, 0.90);
}

:root[data-theme="light"] .gema-verification-summary strong.is-missing {
  color: rgba(138, 103, 31, 0.88);
}

:root[data-theme="light"] .settings-section h3 {
  color: rgba(31, 42, 47, 0.78);
}

:root[data-theme="light"] .settings-category-list button,
:root[data-theme="light"] .settings-back-button {
  color: rgba(42, 55, 61, 0.62);
}@media (hover: hover) {

:root[data-theme="light"] .settings-category-list button:hover,
:root[data-theme="light"] .settings-category-list button:focus-visible,
:root[data-theme="light"] .settings-category-list button.is-active {
  color: rgba(21, 27, 31, 0.86);
}}

:root[data-theme="light"] .settings-category-list {
  border-bottom-color: rgba(91, 109, 116, 0.16);
}

:root[data-theme="light"] .settings-access-button {
  color: rgba(42, 55, 61, 0.58) !important;
}@media (hover: hover) {

:root[data-theme="light"] .settings-access-button:hover,
:root[data-theme="light"] .settings-access-button:focus-visible {
  color: rgba(21, 27, 31, 0.76) !important;
}}

:root[data-theme="light"] .app-settings-dialog select {
  border-color: rgba(91, 109, 116, 0.18) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(42, 55, 61, 0.70) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(42, 55, 61, 0.70) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    rgba(36, 52, 54, 0.10) !important;
  color: rgba(21, 27, 31, 0.88) !important;
}

:root[data-theme="light"] .app-settings-dialog select:focus {
  border-color: rgba(47, 122, 97, 0.26) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(47, 122, 97, 0.86) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(47, 122, 97, 0.86) 50%, transparent 50%) calc(100% - 13px) 52% / 6px 6px no-repeat,
    rgba(36, 52, 54, 0.18) !important;
}

:root[data-theme="light"] .app-settings-dialog select option {
  background: #edf4f5;
  color: #151b1f;
}

:root[data-theme="light"] .settings-dropdown > button {
  border-color: rgba(91, 109, 116, 0.18);
  background: rgba(36, 52, 54, 0.10);
  color: rgba(21, 27, 31, 0.88);
}

:root[data-theme="light"] .settings-dropdown.is-open > button,
:root[data-theme="light"] .settings-dropdown > button:focus-visible {
  border-color: rgba(47, 122, 97, 0.24);
  background: rgba(36, 52, 54, 0.16);
}

:root[data-theme="light"] .settings-dropdown-panel {
  border-color: #98aab1;
  background: #edf4f5;
  box-shadow: 0 18px 42px rgba(45, 61, 68, 0.18);
}

:root[data-theme="light"] .settings-dropdown-panel button {
  color: rgba(21, 27, 31, 0.78);
}@media (hover: hover) {

:root[data-theme="light"] .settings-dropdown-panel button:hover,
:root[data-theme="light"] .settings-dropdown-panel button:focus-visible,
:root[data-theme="light"] .settings-dropdown-panel button.is-selected {
  border-color: rgba(74, 91, 99, 0.18);
  background: #e7f1f0;
  color: rgba(21, 27, 31, 0.88);
}}

/* Final override: plain pause state in the large LiveLog timer block. */
#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-main {
  gap: clamp(16px, 2.4vw, 30px) !important;
  padding-left: 7px !important;
  padding-block: 5px !important;
  overflow: visible !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  max-width: clamp(220px, 31vw, 360px) !important;
  padding-left: clamp(8px, 1.4vw, 18px) !important;
  overflow: hidden !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading {
  position: static !important;
  inset: auto !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading .live-progress-status {
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  opacity: 1 !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading .live-progress-status .status-light {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  margin-right: 10px !important;
  background: #d99122 !important;
  box-shadow: 0 0 7px rgba(217, 145, 34, 0.85), 0 0 15px rgba(217, 145, 34, 0.42) !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading .live-progress-status strong {
  display: block !important;
  color: rgba(206, 172, 96, 0.88) !important;
  font-size: clamp(40px, 5.4vw, 72px) !important;
  font-weight: 920 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.035em !important;
}

:root[data-theme="light"] #concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-piece-heading .live-progress-status strong {
  color: rgba(128, 98, 39, 0.80) !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-ring {
  flex: 0 0 auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(206, 172, 96, 0.18),
    0 0 18px rgba(206, 172, 96, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

#concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-ring span {
  margin-top: 0 !important;
  transform: translateY(1px);
}

:root[data-theme="light"] #concertView .live-progress-tracker.is-large.is-plain-pause .live-progress-ring {
  background:
    conic-gradient(
      from -90deg,
      rgba(172, 132, 50, 0.70) 1turn,
      rgba(172, 132, 50, 0.70) 0
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0 0 1px rgba(155, 119, 46, 0.18),
    0 0 16px rgba(155, 119, 46, 0.22),
    0 6px 14px rgba(37, 65, 49, 0.10) !important;
}

@media (max-width: 700px) {
  :root[data-mobile-live-only="true"] .mobile-view-menu-button {
    display: none !important;
  }

  :root[data-mobile-live-only="true"] .tabs {
    align-items: center;
  }

  :root[data-mobile-live-only="true"] .tabs .tab[data-view] {
    display: none !important;
  }

  :root[data-mobile-live-only="true"] .tabs .tab[data-view="concertView"] {
    position: static !important;
    display: inline-flex !important;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding-inline: 12px;
    transform: none !important;
    border: 0;
    border-radius: 12px;
    background:
      radial-gradient(120% 180% at 50% 50%, var(--selected) 0%, rgba(122, 199, 167, 0.18) 56%, rgba(122, 199, 167, 0.07) 100%);
    color: var(--ink);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.055),
      inset 0 0 18px rgba(255, 255, 255, 0.025);
    font-size: 13px;
    font-weight: 730;
    z-index: auto;
  }

  :root[data-mobile-live-only="true"] #libraryView,
  :root[data-mobile-live-only="true"] #archiveView,
  :root[data-mobile-live-only="true"] #playlistModeView,
  :root[data-mobile-live-only="true"] #gemaView {
    display: none !important;
  }

  :root[data-mobile-live-only="true"] #concertView.is-active {
    display: flex;
    flex-direction: column;
  }
}
.archive-concert-import-dialog {
  width: min(720px, calc(100vw - 32px));
}

.archive-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.archive-duplicate-concert-dialog {
  width: min(760px, calc(100vw - 32px));
}

.archive-duplicate-concert-list {
  display: grid;
  gap: 12px;
  max-height: min(62vh, 620px);
  overflow: auto;
  margin-top: 18px;
}

.archive-duplicate-group {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.archive-duplicate-group > div {
  display: grid;
  gap: 3px;
}

.archive-duplicate-group small,
.archive-duplicate-group span {
  color: var(--muted);
}

.archive-duplicate-group ul {
  margin: 8px 0 0;
  padding-left: 22px;
}

@media (max-width: 700px) {
  .archive-collection-chrome-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding-right: 0;
  }
  .archive-collection-chrome .archive-header-actions {
    order: -1;
    align-self: stretch;
    margin-left: 0;
    width: 100%;
    padding: 10px 14px 0;
  }
  .archive-header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .archive-collection-tabs {
    padding-left: var(--archive-tab-inset);
  }
}

.archive-import-file-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
}

.archive-import-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.archive-concert-import-preview {
  max-height: min(56vh, 560px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.archive-import-summary h3,
.archive-import-summary p {
  margin: 0 0 8px;
}

.archive-import-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.archive-import-facts span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 10px;
  background: var(--soft);
}

.archive-import-summary details ol {
  margin: 12px 0 0;
  padding-left: 28px;
}

.archive-import-summary details li {
  padding: 6px 4px;
}

.archive-import-summary details li small {
  display: block;
  color: var(--muted);
}

.archive-import-warning,
.archive-concert-import-error {
  color: var(--warning-text, #d9b86c);
}

@media (max-width: 700px) {
  .archive-import-facts { grid-template-columns: 1fr; }
}

.settings-dialog-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.app-tour-blocker {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: transparent;
  pointer-events: auto;
  cursor: default;
}

.app-tour-scrim {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(6, 10, 14, 0.42);
  pointer-events: none;
}

.app-tour-spotlight {
  display: none !important;
}

.app-tour-offer-dialog {
  max-width: min(460px, calc(100vw - 32px));
}

.app-tour-offer-icon {
  border-color: rgba(148, 177, 239, 0.34);
  background: rgba(122, 158, 235, 0.14);
  color: #b7cbf5;
}

.app-tour-offer-lead {
  margin-bottom: 14px;
}

.app-tour-offer-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.app-tour-offer-benefits span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
}

.app-tour-offer-benefits b {
  color: #a8e5d0;
  font-size: 1.05rem;
}

.app-tour-offer-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.app-tour-offer-dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}

@media (max-width: 520px) {
  .home-screen-install-dialog form,
  .app-tour-offer-dialog form {
    padding: 22px 18px 18px;
  }

  .app-tour-offer-benefits {
    grid-template-columns: 1fr;
  }

  .app-tour-offer-benefits span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.app-tour-popover {
  position: fixed;
  z-index: 10001;
  width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.app-tour-popover.has-preview {
  width: min(480px, calc(100vw - 24px));
}

.app-tour-popover:not([hidden]) {
  pointer-events: auto;
}

.app-tour-popover-card {
  position: relative;
  max-height: min(72vh, 560px);
  overflow: auto;
  padding: 14px 14px 12px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  border-radius: 16px;
  background: var(--panel, #10181d);
  color: var(--text, #e8eef2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

.app-tour-popover-close {
  position: absolute;
  top: 8px;
  right: 8px;
}

.app-tour-popover-progress {
  margin: 0 28px 6px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-tour-popover-card h2 {
  margin: 0 0 8px;
  padding-right: 24px;
  font-size: 17px;
  line-height: 1.25;
}

.app-tour-popover-lead {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
}

.app-tour-popover-body p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-tour-popover-body p:last-child {
  margin-bottom: 0;
}

.app-tour-popover-tip {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(111, 196, 168, 0.28);
  background: rgba(111, 196, 168, 0.1);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

.app-tour-popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.app-tour-popover-actions button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.app-tour-popover-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--panel, #10181d);
  border: 1px solid rgba(122, 158, 183, 0.24);
  transform: rotate(45deg);
  pointer-events: none;
}

.app-tour-popover[data-placement="bottom"] .app-tour-popover-arrow {
  top: -7px;
  left: var(--app-tour-arrow-x, 50%);
  margin-left: -7px;
  border-right: 0;
  border-bottom: 0;
}

.app-tour-popover[data-placement="top"] .app-tour-popover-arrow {
  bottom: -7px;
  left: var(--app-tour-arrow-x, 50%);
  margin-left: -7px;
  border-left: 0;
  border-top: 0;
}

.app-tour-popover[data-placement="left"] .app-tour-popover-arrow {
  right: -7px;
  top: var(--app-tour-arrow-y, 50%);
  margin-top: -7px;
  border-left: 0;
  border-bottom: 0;
}

.app-tour-popover[data-placement="right"] .app-tour-popover-arrow {
  left: -7px;
  top: var(--app-tour-arrow-y, 50%);
  margin-top: -7px;
  border-right: 0;
  border-top: 0;
}

.app-tour-popover[data-placement="center"] .app-tour-popover-arrow {
  display: none;
}

.app-tour-popover.is-emphasis .app-tour-popover-lead {
  color: #ffd27a;
}

.app-tour-popover.is-emphasis .app-tour-popover-tip {
  border-color: rgba(255, 210, 122, 0.45);
  background: rgba(255, 210, 122, 0.12);
  font-weight: 600;
}

.app-tour-spotlight-target {
  position: relative;
  z-index: 9999 !important;
  pointer-events: none !important;
  outline: 2px solid rgba(186, 220, 255, 0.72);
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(186, 220, 255, 0.18);
  transition: outline-color 180ms ease, box-shadow 180ms ease;
}

.app-tour-step-preview {
  margin: 0 0 10px;
}

.app-tour-step-preview[hidden] {
  display: none !important;
}

.app-tour-preview-panel {
  padding: 12px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.app-tour-preview-panel strong {
  display: block;
  margin-bottom: 6px;
}

.app-tour-preview-panel .muted {
  margin: 0 0 8px;
  font-size: 12px;
}

.app-tour-preview-field {
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(122, 158, 183, 0.35);
  background: rgba(0, 0, 0, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.app-tour-preview-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.app-tour-preview-options.compact span {
  font-size: 12px;
  padding: 6px 8px;
}

.app-tour-preview-options span,
.app-tour-preview-actions span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
}

.app-tour-preview-options span.primary,
.app-tour-preview-actions span.primary {
  border-color: rgba(139, 224, 188, 0.45);
  background: rgba(139, 224, 188, 0.12);
}

.app-tour-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .app-tour-popover {
    width: min(340px, calc(100vw - 20px));
  }
}

:root[data-theme="light"] .app-tour-popover-card,
:root[data-theme="light"] .app-tour-popover-arrow {
  background: #f7faf9;
  color: #151b1f;
  border-color: rgba(74, 91, 99, 0.18);
}

:root[data-theme="light"] .app-tour-spotlight-target {
  outline-color: rgba(47, 122, 97, 0.55);
  box-shadow: 0 0 0 1px rgba(47, 122, 97, 0.15);
}

:root[data-theme="light"] .app-tour-preview-panel {
  background: rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .app-tour-scrim {
  background: rgba(8, 14, 18, 0.28);
}

#liveSuggestionPanel.is-tour-demo,
#liveWorkRatingPrompt.is-tour-demo {
  display: block !important;
}

.pdf-viewer-dialog.is-tour-demo #pdfAddToSetlistBtn,
.pdf-viewer-dialog.is-tour-demo #backingTrackPanel,
.pdf-viewer-dialog.is-tour-demo #pdfLiveTracker,
.pdf-viewer-dialog.is-tour-demo #pdfCollectionToggleBtn,
.pdf-viewer-dialog.is-tour-demo #pdfCollectionControl {
  display: none !important;
}

/* —— Setlist-Assistent / Vorbereitungs-Setlist —— */
.concert-grid.is-preparation-mode .live-suggestion-strip,
.concert-grid.is-preparation-mode #pauseBtn,
.concert-grid.is-preparation-mode #endConcertBtn,
.concert-grid.is-preparation-mode #unknownWorkMenuBtn,
.concert-grid.is-preparation-mode #improvisationLogBtn,
.concert-grid.is-preparation-mode #setlistImportBtn {
  display: none !important;
}

.concert-grid.is-preparation-mode .live-overview-row {
  align-items: flex-start;
}

.concert-grid.is-preparation-mode .concert-status {
  min-height: auto;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

.prep-setlist-host {
  display: grid;
  gap: 12px;
}

.prep-setlist-shell {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
}

.prep-setlist-shell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.prep-setlist-shell-title {
  display: grid;
  gap: 4px;
}

.prep-setlist-shell-title strong {
  color: var(--ink);
  font-size: 18px;
}

.prep-setlist-shell-title small {
  color: var(--muted);
  font-size: 13px;
}

.prep-setlist-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 18px 4px 6px;
}

.prep-setlist-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.prep-setlist-set {
  display: grid;
  gap: 8px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
}

.prep-setlist-items {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prep-setlist-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(122, 158, 183, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.prep-setlist-item.is-dragging {
  opacity: 0.45;
}

.prep-setlist-item.is-drop-target {
  border-color: rgba(122, 199, 167, 0.55);
  box-shadow: inset 0 0 0 1px rgba(122, 199, 167, 0.28);
}

.prep-setlist-item-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.prep-setlist-item-main strong {
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prep-setlist-item-main small {
  color: var(--muted);
  font-size: 11px;
}

.setlist-assistant-manual-shell,
.manual-setlist-editor-layout {
  min-height: 0;
  height: 100%;
}

.setlist-workspace-panel,
.manual-setlist-collection-group,
.manual-setlist-works-panel,
.manual-setlist-setlist-panel,
.setlist-assistant-magic-setlist {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--glass-shadow);
}

.manual-setlist-editor-layout {
  display: grid;
  grid-template-columns: minmax(168px, 200px) minmax(210px, 260px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 8px;
  align-items: stretch;
}

.manual-setlist-toolbar-host {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  padding: 0 4px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.16);
  background: rgba(255, 255, 255, 0.02);
}

.manual-setlist-library {
  grid-column: 1;
  grid-row: 2;
}

.manual-setlist-works-panel {
  grid-column: 2;
  grid-row: 2;
}

.manual-setlist-setlist-panel {
  grid-column: 3;
  grid-row: 2;
}

.manual-setlist-works-panel,
.manual-setlist-setlist-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: var(--glass-shadow);
}

.manual-setlist-library {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: transparent;
  border: 0;
}

.manual-setlist-collection-group {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow);
  overflow: visible;
}

.manual-setlist-collection-group.sidebar-panel {
  overflow: visible;
}

.manual-setlist-collection-group-head {
  margin: 0;
  padding-top: 3px;
  padding-bottom: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
  overflow: visible;
}

.manual-setlist-collection-empty {
  margin: 0;
  padding: 4px 2px;
  color: var(--muted);
  font-size: 11px;
}

.manual-setlist-collection-list {
  display: grid;
  gap: 1px;
}

.manual-setlist-collection-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 3px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.manual-setlist-collection-btn small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}@media (hover: hover) {

.manual-setlist-collection-btn.is-active,
.manual-setlist-collection-btn:hover,
.manual-setlist-collection-btn:focus-visible {
  background: rgba(122, 199, 167, 0.14);
}}

.manual-setlist-works-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 8px;
}

.manual-setlist-works-head {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.manual-setlist-works-head strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.manual-setlist-search {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.manual-setlist-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}

.manual-setlist-search input:focus {
  outline: none;
}

.manual-setlist-works-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: auto;
}

.manual-setlist-work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 6px 6px 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: grab;
}

.manual-setlist-work-title {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
}

.manual-setlist-work-rating {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.manual-setlist-work-rating .work-rating-star {
  font-size: 10px;
}

.manual-setlist-work-add {
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(168, 181, 192, 0.88);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}@media (hover: hover) {

.manual-setlist-work-add:hover,
.manual-setlist-work-add:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}}@media (hover: hover) {

.manual-setlist-work-row:hover {
  background: rgba(255, 255, 255, 0.05);
}}

.manual-setlist-work-row.is-dragging {
  opacity: 0.55;
}

.manual-setlist-work-row.is-added {
  opacity: 0.55;
  cursor: default;
}

.manual-setlist-work-add:disabled {
  visibility: hidden;
}

.manual-setlist-work-dur {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.manual-setlist-setlist-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 8px 10px 6px;
  min-height: 0;
}

.manual-setlist-setlist-panel .prep-setlist-shell-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.16);
}

.manual-setlist-setlist-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.manual-setlist-setlist-head-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.manual-setlist-setlist-head-tools [data-manual-setlist-overview] {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
}

.manual-setlist-setlist-panel .manual-setlist-quick-setlist-btn {
  justify-self: auto;
}

.manual-setlist-setlist-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(122, 158, 183, 0.14);
}

.manual-setlist-setlist-footer button {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.manual-setlist-setlist-footer .primary-action {
  min-height: 32px;
}

.manual-setlist-setlist-panel .prep-setlist-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.manual-setlist-setlist-panel .prep-setlist-set {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 10px 10px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(122, 158, 183, 0.16);
}

.manual-setlist-setlist-panel .prep-setlist-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.setlist-assistant-manual-toolbar {
  display: none;
}

.setlist-assistant-manual-toolbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.manual-setlist-filter-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.manual-setlist-filter-status:disabled {
  cursor: default;
  opacity: 1;
}

.manual-setlist-filter-status.is-active {
  color: var(--ink);
  background: rgba(122, 199, 167, 0.12);
  cursor: pointer;
}@media (hover: hover) {

.manual-setlist-filter-status.is-active:hover,
.manual-setlist-filter-status.is-active:focus-visible {
  background: rgba(122, 199, 167, 0.18);
}}

.manual-setlist-filter-led {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(168, 181, 192, 0.55);
  box-shadow: 0 0 0 1px rgba(122, 158, 183, 0.18);
}

.manual-setlist-filter-status.is-active .manual-setlist-filter-led {
  background: #6fd4a0;
  box-shadow: 0 0 0 1px rgba(111, 212, 160, 0.35), 0 0 6px rgba(111, 212, 160, 0.42);
}

.manual-setlist-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.manual-setlist-filter-sep {
  color: rgba(168, 181, 192, 0.55);
  font-size: 12px;
  line-height: 1;
}

.manual-setlist-filter-dropdown {
  position: relative;
}

.manual-setlist-filter-dropdown > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.manual-setlist-filter-chevron {
  font-size: 15px;
  line-height: 1;
  opacity: 0.9;
}

.manual-setlist-filter-dropdown.is-active > button,
.manual-setlist-filter-dropdown.is-open > button {
  color: var(--ink);
  background: rgba(122, 199, 167, 0.12);
}

.manual-setlist-filter-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 180px;
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 10px;
  background: rgba(18, 24, 30, 0.98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.manual-setlist-filter-menu button {
  justify-content: flex-start;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}@media (hover: hover) {

.manual-setlist-filter-menu button.is-selected,
.manual-setlist-filter-menu button:hover,
.manual-setlist-filter-menu button:focus-visible {
  background: rgba(122, 199, 167, 0.14);
}}

.manual-setlist-quick-setlist-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 7px 12px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.manual-setlist-quick-setlist-btn span {
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}@media (hover: hover) {

.manual-setlist-quick-setlist-btn:hover,
.manual-setlist-quick-setlist-btn:focus-visible {
  border-color: rgba(122, 199, 167, 0.42);
  background: linear-gradient(180deg, rgba(122, 199, 167, 0.16), rgba(122, 199, 167, 0.08));
}}

.manual-setlist-active-set {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.manual-setlist-setlist-panel .prep-setlist-shell-title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.manual-setlist-setlist-panel .prep-setlist-shell-title strong {
  font-size: 13px;
  font-weight: 850;
}

.manual-setlist-setlist-panel .prep-setlist-host,
.manual-setlist-setlist-panel .prep-setlist-items {
  align-content: start;
}

.manual-setlist-setlist-panel .prep-setlist-set {
  align-content: stretch;
  gap: 6px;
}

.manual-setlist-set-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.manual-setlist-set-switch > span {
  flex: 0 0 auto;
}

.manual-setlist-set-switch-track {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn {
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn.is-active,
.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn[aria-pressed="true"] {
  background: rgba(122, 199, 167, 0.2);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(122, 199, 167, 0.34);
}@media (hover: hover) {

.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn:hover,
.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}}@media (hover: hover) {

.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn.is-active:hover,
.manual-setlist-set-switch-track button.manual-setlist-set-switch-btn.is-active:focus-visible {
  background: rgba(122, 199, 167, 0.28);
  color: var(--accent-strong);
}}

.manual-setlist-set-switch-track button.manual-setlist-set-switch-action {
  min-width: 26px;
  font-weight: 800;
}

.manual-setlist-set-switch-track button.manual-setlist-set-switch-action-remove {
  color: rgba(255, 140, 140, 0.88);
}@media (hover: hover) {

.manual-setlist-set-switch-track button.manual-setlist-set-switch-action-remove:hover,
.manual-setlist-set-switch-track button.manual-setlist-set-switch-action-remove:focus-visible {
  background: rgba(255, 120, 120, 0.12);
  color: #ff9a9a;
}}

.manual-setlist-setlist-panel .prep-setlist-items {
  gap: 2px;
}

.manual-setlist-setlist-panel .prep-setlist-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 56px;
  padding: 8px 8px 8px 10px;
  border-radius: 10px;
}

.manual-setlist-setlist-panel .prep-setlist-item.is-dragging {
  opacity: 0.42;
  transform: scale(0.985);
}

.prep-setlist-drop-slot {
  min-height: 34px;
  margin: 2px 0;
  border: 2px dashed rgba(122, 199, 167, 0.55);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.1);
  list-style: none;
  pointer-events: none;
  transition: min-height 0.12s ease, margin 0.12s ease;
}

.manual-setlist-setlist-panel .prep-setlist-item-ord {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  cursor: grab;
  user-select: none;
}

.manual-setlist-setlist-panel .prep-setlist-item-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.manual-setlist-setlist-panel .prep-setlist-item-main strong {
  font-size: 13px;
}

.manual-setlist-setlist-panel .prep-setlist-item-main small {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.manual-setlist-setlist-panel .prep-setlist-item-remove {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 16px;
  opacity: 0.82;
  cursor: pointer;
}@media (hover: hover) {

.manual-setlist-setlist-panel .prep-setlist-item-remove:hover,
.manual-setlist-setlist-panel .prep-setlist-item-remove:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.1);
}}

.manual-setlist-setlist-panel .prep-setlist-empty-hint {
  padding: 8px 4px;
  font-size: 12px;
}

.prep-setlist-set.is-empty {
  min-height: 88px;
  border: 1px dashed rgba(122, 158, 183, 0.22);
}

.manual-setlist-setlist-panel .prep-setlist-set.is-empty {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  border: 1px solid rgba(122, 158, 183, 0.16);
}

.manual-setlist-setlist-panel .prep-setlist-set.is-drop-target {
  border-color: rgba(122, 158, 183, 0.16);
  background: rgba(0, 0, 0, 0.12);
}

.prep-setlist-set-drop-tail.is-drop-target {
  min-height: 28px;
  border: 1px dashed rgba(143, 217, 173, 0.45);
}

.prep-setlist-item.is-drop-target {
  border-color: rgba(122, 158, 183, 0.14);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.prep-setlist-empty-hint {
  list-style: none;
  padding: 10px 4px;
  color: var(--muted);
  font-size: 12px;
}

.manual-setlist-setlist-panel .prep-setlist-set-drop-tail {
  flex: 1 1 auto;
  min-height: 24px;
  margin-top: 4px;
  border-radius: 8px;
}

.prep-setlist-set-drop-tail {
  min-height: 10px;
  margin-top: 4px;
  border-radius: 8px;
}

.setlist-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.setlist-mode-switch-sparkle {
  margin-right: 2px;
}

.setlist-mode-switch-caption {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.setlist-mode-switch-caption.is-active {
  color: var(--ink);
}

.setlist-mode-switch-control {
  position: relative;
  flex: 0 0 auto;
  width: 51px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.32);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}@media (hover: hover) {

.setlist-mode-switch-control:hover {
  background: rgba(120, 120, 128, 0.38);
}}

.setlist-mode-switch-control.is-on,
.setlist-mode-switch-control[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent) 78%, #ffffff 22%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.setlist-mode-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.setlist-mode-switch-control.is-on .setlist-mode-switch-knob,
.setlist-mode-switch-control[aria-checked="true"] .setlist-mode-switch-knob {
  transform: translateX(20px);
}

#setlistAssistantView.is-manual-edit .setlist-assistant-screen-body {
  grid-template-columns: minmax(0, 1fr);
}

#setlistAssistantView.is-manual-edit .setlist-assistant-setup {
  display: none;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-results {
  padding: 4px 8px 6px;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-screen-header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "title switch close";
  align-items: center;
  gap: 8px 12px;
  padding: 8px 14px 6px;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title {
  gap: 2px;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title h1 {
  font-size: clamp(21px, 2.1vw, 24px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title .muted {
  font-size: 11px;
  line-height: 1.25;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-header-actions {
  display: none !important;
}

#setlistAssistantView.is-manual-edit .setlist-assistant-header-switch {
  align-self: center;
}

#setlistAssistantView.is-manual-edit .setlist-mode-switch-caption {
  font-size: 11px;
}

#setlistAssistantView.is-manual-edit .setlist-mode-switch-control {
  width: 44px;
  height: 27px;
  min-height: 27px;
}

#setlistAssistantView.is-manual-edit .setlist-mode-switch-knob {
  width: 23px;
  height: 23px;
}

#setlistAssistantView.is-manual-edit .setlist-mode-switch-control.is-on .setlist-mode-switch-knob,
#setlistAssistantView.is-manual-edit .setlist-mode-switch-control[aria-checked="true"] .setlist-mode-switch-knob {
  transform: translateX(17px);
}

@media (max-width: 900px) {
  .manual-setlist-editor-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .manual-setlist-toolbar-host,
  .manual-setlist-library,
  .manual-setlist-works-panel,
  .manual-setlist-setlist-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .manual-setlist-library,
  .manual-setlist-works-panel,
  .manual-setlist-setlist-panel {
    max-height: 42vh;
  }
}

.setlist-assistant-dialog .setlist-assistant-head,
.setlist-assistant-head {
  display: grid;
  gap: 6px;
}

.setlist-assistant-field {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.setlist-assistant-field input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}

.setlist-assistant-field-hint {
  margin: -4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.setlist-assistant-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.setlist-assistant-dramaturgy-btn {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}@media (hover: hover) {

.setlist-assistant-dramaturgy-btn:hover {
  border-color: rgba(122, 199, 167, 0.32);
  background: rgba(122, 199, 167, 0.08);
}}

.setlist-assistant-dynamic-curves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.setlist-assistant-dynamic-curve {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(122, 158, 183, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  text-align: left;
}

.setlist-assistant-dynamic-curve.is-active {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.14);
}

.setlist-assistant-curve-svg {
  width: 44px;
  height: 32px;
  color: rgba(168, 216, 196, 0.92);
}

.setlist-assistant-dynamic-curve-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.setlist-assistant-dynamic-curve-copy strong {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.setlist-assistant-dynamic-curve-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.setlist-assistant-set-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr));
  gap: 8px;
}

.setlist-assistant-dramaturgy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.is-setlist-assistant-open .topbar {
  display: none;
}


.setlist-assistant-screen-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title switch close"
    "actions actions actions";
  align-items: center;
  gap: 12px 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.18);
  background: var(--bg);
}

.setlist-assistant-screen-title {
  grid-area: title;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setlist-assistant-screen-title h1 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--ink);
}

.setlist-assistant-heading-icon {
  flex: 0 0 auto;
  font-size: 0.92em;
  line-height: 1;
}

.setlist-assistant-header-switch {
  grid-area: switch;
  justify-self: end;
  align-self: center;
  flex: 0 0 auto;
  z-index: 1;
}

.setlist-assistant-header-switch.is-visible {
  display: flex;
  align-items: center;
}

.setlist-assistant-header-actions {
  grid-area: actions;
}

.setlist-assistant-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

.setlist-assistant-plan-block {
  display: grid;
  gap: 10px;
}

.setlist-assistant-plan-mode {
  display: flex;
  width: 100%;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

.setlist-assistant-plan-mode button {
  flex: 1;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.setlist-assistant-plan-mode button.is-active {
  background: rgba(122, 199, 167, 0.18);
  color: var(--ink);
}

.setlist-assistant-timing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.setlist-assistant-form.is-plan-pieces .setlist-assistant-timing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setlist-assistant-compact-field {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.setlist-assistant-compact-field[hidden] {
  display: none;
}

.setlist-assistant-compact-field input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.setlist-assistant-set-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: 8px;
}

.setlist-assistant-set-tile {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.setlist-assistant-set-tile.is-concert {
  border-color: rgba(144, 171, 194, 0.38);
  background: rgba(26, 44, 60, 0.42);
}

:root[data-theme="light"] .setlist-assistant-set-tile.is-concert {
  background: rgba(42, 66, 84, 0.08);
}

.setlist-assistant-set-tile strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}

.setlist-assistant-set-tile small,
.setlist-assistant-set-tile span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.setlist-assistant-set-tile.is-focused {
  border-color: rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.14);
}

.setlist-assistant-set-tile.is-focused small,
.setlist-assistant-set-tile.is-focused span {
  color: rgba(168, 216, 196, 0.92);
}

.setlist-assistant-set-config {
  margin-top: 10px;
}

.setlist-assistant-set-config-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(122, 158, 183, 0.18);
  background: rgba(255, 255, 255, 0.03);
}

.setlist-assistant-dramaturgy-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.setlist-assistant-dramaturgy-btn.is-active {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.16);
}

.setlist-assistant-dynamic-curves-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.setlist-assistant-dynamic-curve-mini {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  min-height: 78px;
  padding: 10px 6px 8px;
  gap: 6px;
  overflow: visible;
}

.setlist-assistant-dynamic-curve-mini .setlist-assistant-curve-svg {
  width: 40px;
  height: 28px;
  max-width: none;
}

.setlist-assistant-dynamic-curve-mini .setlist-assistant-dynamic-curve-copy {
  min-width: 0;
  overflow: visible;
}

.setlist-assistant-dynamic-curve-mini .setlist-assistant-dynamic-curve-copy strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.setlist-assistant-dynamic-curve-mini .setlist-assistant-dynamic-curve-copy small {
  display: none;
}

.setlist-assistant-style-pref {
  display: grid;
  gap: 8px;
}

.setlist-assistant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.setlist-assistant-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #7ac7a7;
}

.setlist-assistant-style-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.setlist-assistant-style-group {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(122, 158, 183, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.setlist-assistant-style-group.is-active {
  border-color: rgba(122, 199, 167, 0.48);
  background: rgba(122, 199, 167, 0.16);
}

.setlist-assistant-screen-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setlist-assistant-screen-title h1 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--ink);
}

.setlist-assistant-screen-title .muted {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.setlist-assistant-screen-body {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 4px 8px 6px;
  box-sizing: border-box;
}

#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-screen-body {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
}

/* Paket 21 (31.08., Giottos Screenshot): display:contents loeste die
   linke Spalte auf — Elemente purzelten lose ins Raster (Stilistik
   schwebte rechts, Schaetzzeile lag auf dem Knopf) und Scrollen war
   unmoeglich. Jetzt: echte, scrollbare Spalte mit festgeheftetem Knopf. */
#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-setup {
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-form {
  display: grid;
  gap: 14px;
}

#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-create-btn {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* Festgeheftet = undurchsichtig, sonst scheinen die Optionen durch
     (Giotto 31.08.): deckender Grund unter dem Gruenton. */
  background:
    linear-gradient(rgba(122, 199, 167, 0.16), rgba(122, 199, 167, 0.16)),
    var(--panel, #101827);
  box-shadow: 0 -10px 16px -12px rgba(0, 0, 0, 0.65);
}

#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-results {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  justify-content: flex-start;
}

.setlist-assistant-setup {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 20px;
  border-right: 1px solid rgba(122, 158, 183, 0.16);
  background: rgba(255, 255, 255, 0.03);
  overflow: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
}

.setlist-assistant-form {
  display: grid;
  gap: 14px;
}

.setlist-assistant-create-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  border-color: rgba(143, 217, 173, 0.40);
  background: rgba(122, 199, 167, 0.16);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.setlist-assistant-results {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 24px clamp(16px, 3vw, 28px) 28px;
}

.setlist-assistant-results-empty {
  display: grid;
  gap: 12px;
  max-width: 460px;
  margin: 10vh auto 0;
  padding: 0 12px;
  text-align: center;
}

.setlist-assistant-results-empty p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}

body.is-setlist-assistant-open main {
  min-height: 100vh;
}

#setlistAssistantView.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "status"
    "header"
    "body";
  gap: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}

#setlistAssistantView.is-active.is-manual-edit > .setlist-assistant-manual-toolbar {
  display: none;
}

#setlistAssistantView.is-active > .app-status-host {
  grid-area: status;
  padding: 0 18px;
}

#setlistAssistantView.is-active > .setlist-assistant-screen-header {
  grid-area: header;
}

#setlistAssistantView.is-active > .setlist-assistant-screen-body {
  grid-area: body;
}

.setlist-assistant-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.setlist-assistant-header-actions[hidden] {
  display: none;
}

.setlist-assistant-header-actions button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.setlist-assistant-screen-body {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.setlist-assistant-setup {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 20px;
  border-right: 1px solid rgba(122, 158, 183, 0.16);
  background: rgba(255, 255, 255, 0.03);
  overflow: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.setlist-assistant-form {
  display: grid;
  gap: 18px;
}

.setlist-assistant-results {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 24px clamp(16px, 3vw, 28px) 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.setlist-assistant-setup::-webkit-scrollbar,
.setlist-assistant-results::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.setlist-assistant-results-shell {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto;
}

.setlist-assistant-results-head {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}

.setlist-assistant-results-head strong {
  color: var(--ink);
  font-size: 20px;
}

.setlist-assistant-results-head small {
  color: var(--muted);
  font-size: 13px;
}

.setlist-assistant-plan-hint {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

.setlist-assistant-set-splits {
  display: grid;
  gap: 6px;
}

.setlist-assistant-set-splits[hidden] {
  display: none;
}

.setlist-assistant-set-split {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.setlist-assistant-set-split.is-active {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.14);
}

.setlist-assistant-editor {
  display: grid;
  gap: 12px;
}

.setlist-assistant-editor-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.setlist-assistant-set-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 2px 6px;
  margin-top: 6px;
  border-top: 1px dashed rgba(122, 158, 183, 0.22);
  list-style: none;
}

.setlist-assistant-set-divider:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.setlist-assistant-set-divider-copy {
  display: grid;
  gap: 2px;
}

.setlist-assistant-set-divider-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.setlist-assistant-set-divider-copy small {
  color: var(--muted);
  font-size: 12px;
}

.setlist-assistant-set-divider-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.setlist-assistant-set-divider button {
  min-height: 34px;
  font-size: 12px;
}

.setlist-assistant-editor-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  list-style: none;
}

.setlist-assistant-editor-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.16);
  color: rgba(122, 199, 167, 0.98);
  font-size: 13px;
  font-weight: 800;
}

.setlist-assistant-editor-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.setlist-assistant-editor-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.setlist-assistant-editor-main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist-assistant-editor-rating {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.setlist-assistant-editor-meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.setlist-assistant-editor-actions {
  display: flex;
  gap: 4px;
}

.setlist-assistant-editor-actions button {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  font-size: 16px;
}

.setlist-assistant-set {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(122, 158, 183, 0.16);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.12);
}

#setlistAssistantCloseBtn {
  grid-area: close;
  justify-self: end;
  align-self: start;
  width: 32px;
  min-width: 32px;
  z-index: 2;
}

@media (max-width: 900px) {
  .setlist-assistant-screen-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title close"
      "switch switch"
      "actions actions";
    gap: 10px 12px;
    padding: 14px 16px;
  }

  .setlist-assistant-screen-title {
    grid-area: title;
  }

  .setlist-assistant-header-switch {
    justify-self: start;
  }

  .setlist-assistant-header-actions {
    grid-area: actions;
    justify-content: flex-start;
  }

  #setlistAssistantCloseBtn {
    grid-area: close;
    grid-column: auto;
  }

  .setlist-assistant-screen-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: 4px 8px 6px;
  }

  /* Paket 21 (31.08., iPad-Screenshot): Umbruch an die neue, echte
     Spalte angepasst — Einstellungen oben, Ergebnisse darunter, nichts
     ueberlappt mehr. */
  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-screen-body {
    /* Giottos iPad-Befund 04.09.: Ohne diese Zeile gewann die
       ID-Spezifitaet der Desktop-Zweispalter — alles klebte links. */
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow-y: auto;
  }

  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-setup {
    grid-column: 1;
    grid-row: 1;
    overflow-y: visible;
  }

  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-results {
    grid-column: 1;
    grid-row: 2;
    min-height: 46vh;
  }

  .setlist-assistant-setup {
    border-right: 0;
    border-bottom: 1px solid rgba(122, 158, 183, 0.16);
    padding: 16px;
    gap: 16px;
  }

  .setlist-assistant-results {
    padding: 16px;
  }

  .setlist-assistant-results-empty {
    margin-top: 32px;
  }
}

@media (max-width: 720px) {
  .setlist-assistant-dramaturgy {
    grid-template-columns: 1fr;
  }

  .setlist-assistant-dynamic-curves {
    grid-template-columns: 1fr;
  }

  .setlist-assistant-dynamic-curves-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .setlist-assistant-editor-item {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .setlist-assistant-editor-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .prep-setlist-item {
    grid-template-columns: auto 1fr;
  }
}


/* Profil-Badge: dezenter Punkt, wenn Kontaktdaten fehlen */
#accessLockBtn { position: relative; }
#accessLockBtn.has-attention::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0b429;
  box-shadow: 0 0 0 2px rgba(10, 20, 25, 0.85);
}

/* Dashboard: stille Kontaktdaten-Erinnerung */
.concert-dashboard-contact-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, #f0b429 8%, transparent);
  font-size: 13px;
}
.concert-dashboard-contact-hint-actions { display: inline-flex; gap: 10px; align-items: center; }
.concert-dashboard-contact-hint button { font-size: 12px; }


/* Automatische Listen: "Mehr"-Klappe */
/* V624 (Giotto 07.09.): "Mehr" rechts in der Zahlenspalte, ohne Pfeil, nicht ausgegraut */
.auto-list-more-toggle { opacity: 1; }
.auto-list-more-toggle .auto-list-more-label { color: inherit; font-variant-numeric: normal; }

/* Frisch angelegtes Werk kurz hervorheben */
#worksTable tr.is-just-added {
  animation: just-added-flash 2.6s ease-out;
}
@keyframes just-added-flash {
  0% { background: color-mix(in srgb, #f0b429 35%, transparent); }
  100% { background: transparent; }
}


/* Verpasster Termin: auffaelliger Sofort-Start im App-Gruen mit Verlauf */
.concert-dashboard-missed-actions .missed-start-now {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #6fc4a8 12%), #173c34);
  border: 1px solid rgba(111, 196, 168, 0.42);
  color: #fff;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  flex-basis: 100%;
  box-shadow: 0 6px 18px rgba(24, 69, 57, 0.28);
}@media (hover: hover) {
.concert-dashboard-missed-actions .missed-start-now:hover {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 70%, #6fc4a8 30%), #1c473d);
  border-color: rgba(111, 196, 168, 0.62);
}}


/* PDF laedt: altes Bild abdimmen + dezenter Hinweis statt schwarzer Buehne */
.pdf-stage.is-pdf-loading #pdfViewerCanvas {
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.pdf-stage.is-pdf-loading::after {
  content: "Noten werden geladen …";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(16, 24, 32, 0.82);
  border: 1px solid rgba(122, 158, 183, 0.25);
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  pointer-events: none;
}


/* Vom Admin zugestellte Sammlung: Dashboard-Karte */
.concert-dashboard-admin-delivery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 13px;
}
.concert-dashboard-admin-delivery button { font-size: 12px; }


/* Miniplayer: schlanke Erst-Ansicht der Aufnahme-Ausrichtung.
   Gleiche Maschinerie, nur reduzierte Oberflaeche. */
.archive-audio-mini-card { display: none; }
.archive-audio-dialog.is-mini-align { width: min(460px, 94vw); }
.archive-audio-dialog.is-mini-align form > *:not(.archive-audio-controls) { display: none !important; }
.archive-audio-dialog.is-mini-align .archive-audio-controls > *:not(.archive-audio-header):not(.archive-audio-mini-card) { display: none !important; }
.archive-audio-dialog.is-mini-align .archive-audio-header-tools { display: none; }
.archive-audio-dialog.is-mini-align .archive-audio-mini-card {
  display: grid;
  gap: 12px;
  padding: 14px 4px 4px;
  text-align: center;
}
.archive-audio-mini-lead { margin: 0; color: var(--muted); font-size: 13px; }
.archive-audio-mini-time {
  font-size: 2.4rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.archive-audio-mini-controls,
.archive-audio-mini-nudges,
.archive-audio-mini-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.archive-audio-mini-nudges button { min-width: 58px; }
#archiveAudioMiniApplyBtn {
  /* V318: LiveLog-Optik — transparent-gruen statt knalligem Verlauf. */
  background: rgba(122, 199, 167, 0.12);
  border: 1px solid rgba(122, 199, 167, 0.45);
  color: #bfe6d6;
  font-weight: 650;
  padding: 10px 18px;
  border-radius: 10px;
}
#archiveAudioMiniFullBtn { background: none; border: none; color: var(--muted); text-decoration: underline; }
.archive-audio-mini-hint { margin: 0; font-size: 12.5px; color: var(--accent); }


/* Paket 18: Admin-Backlog im Konzertbereich */
.admin-backlog-toolbar { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.admin-backlog-toolbar input { flex: 1; min-width: 200px; }
.admin-backlog-item { cursor: pointer; }
.admin-backlog-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.admin-backlog-pill {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
}
.admin-backlog-pill.is-verified {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.admin-backlog-setlist { padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.admin-backlog-setlist-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.admin-backlog-vault-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, 0.25); }
.admin-backlog-vault-actions button { font-size: 13px; padding: 6px 10px; }
.admin-backlog-vault-send { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-backlog-vault-send select { font-size: 13px; padding: 5px 8px; max-width: 220px; }
.admin-vault-delete { margin-left: auto; color: #f87171; font-size: 13px; }
.bo-daten-laden { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13.5px; color: var(--muted); }
.bo-daten-laden select { font-size: 14px; padding: 6px 8px; }
.collection-share-admin-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.collection-share-admin-send label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; font-size: 13.5px; }
.collection-share-admin-send select { font-size: 14px; padding: 6px 8px; }
.collection-share-admin-send button { padding: 8px 12px; }
.new-works-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }


/* Paket 18 Scheibe 2: KI-Einstufung + Master-Zulauf */
.ai-classify-dialog { width: min(560px, 94vw); }
.ai-classify-body .list-row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ai-classify-body .list-row span:first-child { color: var(--muted); flex-shrink: 0; }
.master-inflow-dialog { width: min(640px, 94vw); }
.master-inflow-list { max-height: min(50vh, 420px); overflow: auto; display: grid; gap: 6px; margin: 12px 0; }
.master-inflow-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.master-inflow-pick { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.master-inflow-row [data-inflow-dismiss] { font-size: 13px; }
.master-inflow-dismissed-info { margin-top: 8px; font-size: 13px; }
.master-inflow-row small { display: block; color: var(--muted); }
.master-inflow-tier { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--line); color: var(--muted); }
.master-inflow-tier.is-complete { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.admin-inflow-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 13px;
}

.ai-review-hint { margin: 6px 0 0; color: var(--warn); font-size: 13px; }

.ai-compare { display: block; margin-top: 2px; font-size: 12px; }
.ai-compare.is-match { color: var(--accent); }
.ai-compare.is-diff { color: var(--warn); }
#aiClassifyForceBtn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 12.5px; padding: 0; }


/* Backoffice: kompakte Listen + Akten */
.backoffice-list { display: grid; gap: 6px; margin-top: 10px; }
.backoffice-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); text-align: left; cursor: pointer;
}@media (hover: hover) {
.backoffice-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }}
.backoffice-row-main strong { display: block; }
.backoffice-row-main small, .backoffice-row-meta small { color: var(--muted); }
.backoffice-row-meta { display: flex; gap: 12px; }
.concert-dashboard-top-action { white-space: nowrap; }
.backoffice-akte-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.backoffice-akte-tabs button {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); font-weight: 600;
}
.backoffice-akte-tabs button.is-active { background: var(--selected); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.backoffice-akte-inhalt { display: grid; gap: 4px; }
.backoffice-detail-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); font-size: 14px; }
.backoffice-detail-row span:first-child { color: var(--muted); }
.backoffice-detail-row.is-sub span:first-child { color: var(--ink); padding-left: 12px; }
.backoffice-akte-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }

.backoffice-statuszeile { display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 14px; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 14px; color: var(--muted); }
.backoffice-statuszeile strong { color: var(--ink); font-size: 17px; margin-right: 4px; }
.backoffice-uebersicht-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.backoffice-spalte h3 { margin: 6px 0 8px; font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.backoffice-spalte { display: grid; gap: 6px; align-content: start; }
.backoffice-row.is-schmal { grid-template-columns: 1fr auto; padding: 8px 12px; }
.backoffice-row.is-warning strong { color: var(--warn); }
.backoffice-row-meta .is-verifiziert { color: var(--accent); }
.concert-dashboard-top-action-group { display: inline-flex; gap: 8px; }

.bo-form-dialog { width: min(680px, 94vw); }
.bo-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; margin: 10px 0; }
.bo-form-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.backoffice-abschnitt { margin-top: 18px; }
.backoffice-abschnitt h3 { margin: 0 0 8px; font-size: 0.82rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }

/* ===== Paket 8+9: Instant Set + Composer Scouter (aus e654ee2) ===== */
/* Instant Set and Composer Scouter */
.instant-set-entry-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.16);
  color: rgba(168, 226, 198, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.prep-setlist-item.is-instant-set .prep-setlist-item-main strong,
.setlist-assistant-editor-item.is-instant-set .setlist-assistant-editor-title-row strong,
.prep-setlist-preview-row.is-instant-set .prep-setlist-preview-title {
  color: rgba(186, 236, 210, 0.96);
}
.instant-set-panel {
  margin: 16px 0 20px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.instant-set-original-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: calc(100% - 180px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.instant-set-original-toggle-label {
  font-size: 16px;
  font-weight: 650;
}
.instant-set-original-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.16s ease;
}
.instant-set-panel.is-expanded .instant-set-original-chevron {
  transform: rotate(180deg);
}
.instant-set-original-body {
  margin-top: 12px;
}
.instant-set-original-note {
  margin: 0 0 10px;
  font-size: 12px;
}
.instant-set-original-row {
  padding: 7px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
.instant-set-original-row:first-child {
  border-top: 0;
}
.instant-set-original-body:not([hidden]) .instant-set-list {
  max-height: min(240px, 42vh);
  overflow: auto;
  padding-right: 4px;
}
.instant-set-panel-head,
.composer-scouter-header,
.composer-scouter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.composer-scouter-progress-row {
  display: grid;
  gap: 8px;
}
.composer-scouter-progress-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.instant-set-panel-head {
  align-items: flex-start;
}
.instant-set-panel-head h3,
.composer-scouter-header h2 {
  margin: 0 0 4px;
}
.instant-set-scouter-btn {
  white-space: nowrap;
}
.instant-set-status-line {
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.instant-set-list,
.composer-scouter-list {
  display: grid;
  gap: 8px;
}
.instant-set-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.instant-set-row:first-child {
  border-top: 0;
}
.instant-set-row small {
  color: var(--muted);
  white-space: nowrap;
}
.live-work-row.is-instant-set small {
  color: var(--accent);
}
.instant-set-live-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(37, 107, 90, 0.1);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  vertical-align: middle;
  line-height: 1.4;
}
.composer-scouter-dialog {
  width: min(2720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(92vh, 920px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}
.composer-scouter-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  max-height: min(92vh, 920px);
  padding: 20px 24px 16px;
  overflow: hidden;
}
.composer-scouter-header {
  flex: 0 0 auto;
}
.composer-scouter-header-copy h2 {
  margin: 0 0 6px;
}
.composer-scouter-progress-row {
  flex: 0 0 auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.composer-scouter-progress-row.is-running {
  border-color: rgba(122, 199, 167, 0.35);
}
.composer-scouter-progress-row.is-success {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.08);
}
.composer-scouter-progress-main strong {
  font-size: 15px;
  color: var(--text);
}
.composer-scouter-progress-main span,
.composer-scouter-success-note {
  color: var(--muted);
  font-size: 13px;
}
.composer-scouter-progress-row.is-success .composer-scouter-progress-main span {
  color: #7ac7a7;
}
.composer-scouter-success-note {
  margin: 0;
  color: #7ac7a7;
  font-size: 14px;
}
.composer-scouter-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(420px, 1.12fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}
.composer-scouter-list-panel,
.composer-scouter-detail {
  min-height: 0;
  overflow: hidden;
}
.composer-scouter-panel-label,
.composer-scouter-detail-label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.composer-scouter-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.composer-scouter-list {
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.composer-scouter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title status"
    "match match";
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.composer-scouter-row + .composer-scouter-row {
  margin-top: 8px;
}
.composer-scouter-row.is-active {
  border-color: var(--accent);
  background: rgba(122, 199, 167, 0.1);
  box-shadow: inset 0 0 0 1px rgba(122, 199, 167, 0.12);
}
.composer-scouter-row.is-resolved:not(.is-active) {
  border-color: rgba(122, 199, 167, 0.18);
}
.composer-scouter-row-original {
  grid-area: title;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.composer-scouter-row-match {
  grid-area: match;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.composer-scouter-row-match.is-empty {
  font-style: italic;
}
.composer-scouter-row-status {
  grid-area: status;
  justify-self: end;
  align-self: start;
  margin-top: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.composer-scouter-row-status.is-linked,
.composer-scouter-row-status.is-auto {
  color: #7ac7a7;
}
.composer-scouter-row-status.is-review,
.composer-scouter-row-status.is-pending {
  color: #e8b86d;
}
.composer-scouter-row-status.is-none {
  color: var(--muted);
}
.composer-scouter-detail {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  overflow: auto;
}
.composer-scouter-detail-card {
  display: grid;
  gap: 12px;
  min-height: 0;
}
.composer-scouter-detail-card.is-resolved {
  align-content: start;
}
.composer-scouter-detail-original {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.composer-scouter-resolved-match {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(122, 199, 167, 0.28);
  border-radius: 14px;
  background: rgba(122, 199, 167, 0.07);
}
.composer-scouter-resolved-match strong {
  font-size: 17px;
}
.composer-scouter-resolved-match span {
  color: var(--muted);
  font-size: 14px;
}
.composer-scouter-detail-status {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.composer-scouter-detail-status.is-auto,
.composer-scouter-detail-status.is-linked {
  color: #7ac7a7;
}
.composer-scouter-detail-status.is-review,
.composer-scouter-detail-status.is-pending {
  color: #e8b86d;
}
.composer-scouter-candidate-list {
  display: grid;
  gap: 10px;
}
.composer-scouter-candidate-card {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}@media (hover: hover) {
.composer-scouter-candidate-card:hover {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.08);
}}
.composer-scouter-candidate-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.composer-scouter-candidate-composer {
  color: var(--muted);
  font-size: 14px;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.composer-scouter-candidate-hint {
  margin-top: 4px;
  color: #7ac7a7;
  font-size: 12px;
  font-weight: 600;
}
.composer-scouter-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.composer-scouter-secondary-actions .ghost {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}@media (hover: hover) {
.composer-scouter-secondary-actions .ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}}
.composer-scouter-detail-empty,
.composer-scouter-detail-empty-inline {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.composer-scouter-detail-empty {
  display: grid;
  align-content: center;
  min-height: 240px;
  padding: 12px 8px;
}
.composer-scouter-detail-empty p:last-child,
.composer-scouter-detail-empty-inline p {
  margin: 0;
}
.composer-scouter-footer {
  align-items: flex-start;
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -10px 24px rgba(35, 42, 36, 0.06);
}
.composer-scouter-footer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}
.composer-scouter-footer-action {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.composer-scouter-footer-action.is-primary button,
.composer-scouter-footer-action.is-secondary button {
  width: 100%;
  max-width: 100%;
}
.composer-scouter-footer-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.composer-scouter-footer.is-library-mode .composer-scouter-footer-actions {
  display: none;
}
.composer-scouter-library-mode-hint {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.composer-scouter-list-empty {
  margin: 8px 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.composer-scouter-list-empty p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.setlist-import-scouter-row {
  display: grid;
  gap: 8px;
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.setlist-import-scouter-btn {
  justify-self: start;
}
.setlist-import-scouter-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 960px) {
  .composer-scouter-layout,
  .composer-scouter-footer-actions {
    grid-template-columns: 1fr;
  }

  .composer-scouter-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .composer-scouter-shell {
    max-height: calc(100vh - 16px);
  }

  .composer-scouter-list,
  .composer-scouter-detail {
    max-height: 34vh;
  }
}
@media (max-width: 760px) {
  .instant-set-panel-head {
    flex-direction: column;
  }

  .composer-scouter-shell {
    padding: 18px 16px 16px;
  }
}
.compact-dialog.composer-scouter-dialog {
  width: min(2720px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(92vh, 920px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}

/* ===== Paket 10: Smart Import (aus e654ee2) ===== */
/* Smart Import */
.smart-import-dialog {
  width: min(1440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(92vh, 980px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}
.smart-import-shell {
  display: grid;
  /* Kopf / Methodenleiste / Koerper / Fuss — die 1fr-Zeile gehoert dem
     Koerper (Giottos Fett-Kacheln-Befund 04.09.: vorher stretchte sie
     die Leiste). */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  height: 100%;
  max-height: min(92vh, 980px);
  padding: 0;
  overflow: hidden;
}
.smart-import-header,
.smart-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}
.smart-import-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.smart-import-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 -10px 24px rgba(35, 42, 36, 0.06);
}
.smart-import-stage {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px;
}
.smart-import-header h2 {
  margin: 0 0 4px;
}
.smart-import-input-label {
  display: grid;
  gap: 8px;
}
.smart-import-input-label textarea {
  min-height: 220px;
  resize: vertical;
  font-size: 1rem;
  line-height: 1.45;
}
.smart-import-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.smart-import-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--soft);
}
.smart-import-summary {
  margin: 0 0 10px;
  font-size: 0.95rem;
  flex: 0 0 auto;
}
.smart-import-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.smart-import-results-list {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.smart-import-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
  width: 100%;
}
.smart-import-row-original,
.smart-import-row-match,
.smart-import-row-classification {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
}
.smart-import-row.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(37, 107, 90, 0.18);
}
.smart-import-row.is-ready {
  border-color: rgba(37, 107, 90, 0.28);
}
.smart-import-row.is-review {
  border-color: rgba(181, 94, 0, 0.28);
}
.smart-import-row-original {
  font-weight: 600;
}
.smart-import-row-match,
.smart-import-row-classification {
  color: var(--muted);
  font-size: 0.88rem;
}
.smart-import-row-status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.smart-import-row-status.is-ready {
  background: rgba(37, 107, 90, 0.12);
  color: var(--accent);
}
.smart-import-row-status.is-review {
  background: rgba(181, 94, 0, 0.12);
  color: var(--warn);
}
.smart-import-row-status.is-linked {
  background: rgba(37, 107, 90, 0.1);
  color: var(--muted);
}
.smart-import-review-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--soft);
  min-height: 0;
  overflow: auto;
}
.smart-import-review-panel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.smart-import-review-panel label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.smart-import-review-panel input {
  width: 100%;
  max-width: 100%;
}
.smart-import-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.smart-import-classification-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.smart-import-classification-editor .classification-tag-section {
  gap: 8px;
}
.smart-import-classification-editor .classification-tag-heading h4 {
  margin: 0;
  font-size: 0.88rem;
}
.smart-import-classification-editor .classification-chips button {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
}
.smart-import-candidate-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.smart-import-candidate-list button {
  text-align: left;
}
@media (max-width: 980px) {
  .smart-import-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }

  .smart-import-shell {
    max-height: calc(100vh - 16px);
  }

  .smart-import-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .smart-import-results-list,
  .smart-import-review-panel {
    max-height: 38vh;
  }
}
.compact-dialog.smart-import-dialog {
  width: min(1440px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  height: min(92vh, 980px);
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
}
.gema-assistant-status-line { margin: 6px 0 0; font-size: 13px; }
.gema-assistant-status-line.is-online { color: #34d399; }


/* GEMA-Assistent als App-Fenster (V215) */
.gema-assistant-dialog {
  width: min(1200px, 96vw);
  max-width: 96vw;
  height: min(88vh, 920px);
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
}
.gema-assistant-dialog[open] { display: flex; flex-direction: column; }
.gema-assistant-dialog::backdrop { background: rgba(10, 12, 16, 0.55); }
.gema-assistant-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}
.gema-assistant-dialog-head h3 { margin: 0; }
.gema-assistant-dialog-tools { display: flex; align-items: center; gap: 10px; }
.gema-assistant-dialog-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#gemaAssistantFrame { flex: 1; width: 100%; border: 0; background: transparent; }
.gema-assistant-embed-hint { padding: 8px 18px; margin: 0; }


/* Vorschlags-Einstellungen (V219) */
.suggestion-composer-weights { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.suggestion-composer-weights label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.suggestion-composer-weights input { width: 72px; }


/* Paket 21 (31.08.): Archiv-Umschalter als Pillen mit Glow, Aktionen darueber */
.archive-collection-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 2px;
  background: var(--archive-tray-fill);
}
.archive-collection-chrome-row {
  grid-template-columns: minmax(0, 1fr);
  padding-right: 14px;
}
.archive-collection-chrome .archive-header-actions { padding: 0; }
/* V348 (Giotto 01.09.): Rubrik-Kacheln im LiveLog-Design — leicht
   angeeckt, gleichbleibend grauer Rahmen ohne Glanz; die Markierung
   traegt die Ueberschrift: leicht eingefaerbt mit dezentem Farbverlauf,
   wie die Dashboard-Markierungen, nur zurueckhaltender. */
.archive-register-tab {
  height: auto;
  margin: 0 6px 10px 0;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
}@media (hover: hover) {
.archive-register-tab:hover {
  border-color: var(--line);
}}@media (hover: hover) {
.archive-register-tab.is-active,
.archive-register-tab.is-active:hover {
  height: auto;
  padding: 9px 18px;
  border-color: var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(122, 199, 167, 0.16), rgba(122, 199, 167, 0.04));
  color: #cde8db;
  box-shadow: none;
  font-size: 15px;
}}
.archive-register-tab:not(.is-active) + .archive-register-tab:not(.is-active) {
  border-left-color: var(--line);
  border-top-left-radius: 10px;
}


/* Paket 21 (31.08., iPad 2): Manuell-Modus auf schmalen Bildschirmen —
   Sammlungen und Stueckliste rollen in eigenen Kaesten, statt die
   Setlist unerreichbar nach unten zu schieben. */
@media (max-width: 900px) {
  .manual-setlist-library {
    max-height: 30vh;
    overflow-y: auto;
  }
  .manual-setlist-works-list {
    max-height: 42vh;
    overflow-y: auto;
  }
}


/* Paket 22 (31.08.): Tour-Karten heller und freundlicher, mit Icon */
.app-tour-popover-card {
  background: linear-gradient(180deg, #24344a, #1c2939);
  border: 1px solid rgba(150, 180, 230, 0.32);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.app-tour-step-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 2px 0 6px;
  border-radius: 13px;
  background: rgba(122, 199, 167, 0.18);
  border: 1px solid rgba(122, 199, 167, 0.35);
  font-size: 22px;
  line-height: 1;
}
.app-tour-popover-card h2 { margin-top: 0; }


/* ✨ Style Radar (Paket 20, V230) */
.style-radar-dialog { width: min(680px, 94vw); }
.style-radar-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.style-radar-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.style-radar-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.style-radar-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 14px; }@media (hover: hover) {
.style-radar-row:hover { background: rgba(127, 127, 127, 0.12); }}
.style-radar-row strong { flex: 1 1 auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-radar-row small { color: var(--muted); white-space: nowrap; }
.style-radar-row .style-radar-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(122, 199, 167, 0.15); }
.style-radar-row .style-radar-badge.is-wissen { background: rgba(124, 147, 242, 0.18); }


/* 📚 PDF-Stapel-Import (Paket 27, V234) */
.pdf-batch-dialog { width: min(860px, 96vw); }
.pdf-batch-table { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.pdf-batch-row { display: grid; grid-template-columns: auto minmax(120px, 1.4fr) minmax(100px, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; }@media (hover: hover) {
.pdf-batch-row:hover { background: rgba(127, 127, 127, 0.10); }}
.pdf-batch-row input[type="text"] { width: 100%; box-sizing: border-box; }
.pdf-batch-row .pdf-batch-file { grid-column: 2 / 5; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-batch-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(122, 199, 167, 0.15); white-space: nowrap; }
.pdf-batch-badge.is-scan { background: rgba(124, 147, 242, 0.18); }
.pdf-batch-badge.is-unklar { background: rgba(226, 185, 59, 0.16); }
.pdf-batch-dupe { grid-column: 2 / 5; font-size: 12px; color: var(--warn, #e2b93b); }
@media (max-width: 700px) {
  .pdf-batch-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pdf-batch-row input[name="composer"] { grid-column: 2 / 4; }
}


/* Gleit-Markierung (V240): Im Auswahlmodus steuert der Finger die
   Markierung — das Scrollen der Liste ist gesperrt (Rollen uebernimmt
   der Rand-Autoscroll). */
#libraryView.is-library-selection-mode .table-wrap,
#libraryView.is-library-selection-mode tbody tr {
  touch-action: none;
}


/* Seitenleisten-Faltung (V246): Ueberschrift = Schalter, kein Pfeil. */
#libraryView .sidebar-panel h2 { cursor: pointer; user-select: none; -webkit-user-select: none; }
#libraryView .sidebar-panel.is-folded > *:not(.panel-header):not(h2) { display: none; }
#libraryView .sidebar-panel.is-folded .panel-header + * { display: none; }
#libraryView .sidebar-panel.is-folded h2 { opacity: 0.55; }
#libraryView .sidebar-panel.is-folded { padding-bottom: 8px; }


/* Scouter-Aktionsknoepfe (V248, Giottos Haptik-Wunsch): sichtbar tastbar —
   etwas groesser, runde Kante, feiner grauer Rand. */
.composer-scouter-detail button.ghost,
.composer-scouter-detail [data-scouter-action] {
  padding: 10px 16px;
  border: 1px solid rgba(140, 155, 175, 0.45);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  cursor: pointer;
}@media (hover: hover) {
.composer-scouter-detail [data-scouter-action]:hover:not([disabled]) {
  border-color: rgba(170, 190, 215, 0.7);
  background: rgba(255, 255, 255, 0.08);
}}
.composer-scouter-detail [data-scouter-action][disabled] {
  opacity: 0.38;
  cursor: default;
}


/* iPad-Feinschliff (V250): Langdruck soll markieren — nicht iOS-Textwahl
   ("Kopieren/Nachschlagen") ausloesen. Eingabefelder bleiben waehlbar. */
#libraryView .table-wrap,
#libraryView .table-wrap td,
#libraryView .table-wrap .inline-work-text {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#libraryView .table-wrap input,
#libraryView .table-wrap textarea {
  -webkit-user-select: text;
  user-select: text;
}


/* Faltung V251: Sofort-Reaktion beim Tippen — touch-action: manipulation
   schaltet Safaris Doppel-Tipp-Wartezeit (~350 ms) ab; groessere
   Tippflaeche + sichtbares Druck-Feedback. */
#libraryView .sidebar-panel h2 {
  touch-action: manipulation;
  padding: 8px 6px;
  margin: -6px -6px -4px;
  border-radius: 8px;
  min-height: 30px;
  display: flex;
  align-items: center;
  transition: opacity 80ms ease, background 80ms ease;
}
#libraryView .sidebar-panel h2:active {
  background: rgba(127, 150, 180, 0.14);
}
#libraryView .sidebar-panel .panel-header {
  align-items: center;
}


/* Instant Set: Zettel-Foto (V253) */
.setlist-import-photo-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; flex-wrap: wrap; }
.setlist-import-photo-row .muted { font-size: 12px; flex: 1 1 240px; }


/* 🔄 Werk tauschen (V254) */
.swap-work-dialog { width: min(520px, 94vw); }
.swap-work-results { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.swap-work-results button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: none; border-radius: 10px; background: none; color: inherit; cursor: pointer; font-size: 14px; }@media (hover: hover) {
.swap-work-results button:hover { background: rgba(127, 150, 180, 0.14); }}
.swap-work-results button small { color: var(--muted); white-space: nowrap; }
.played-history-swap { border: none; background: none; cursor: pointer; font-size: 15px; opacity: 0.75; padding: 4px 6px; }@media (hover: hover) {
.played-history-swap:hover { opacity: 1; }}
.played-history-mixup-mark { font-size: 12px; }


/* Bewertungs-Frage: Konzert-Stummschalter (V255) */
.live-rating-snooze {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 6px;
}


/* Scouter-Feinschliff (V263, Giottos Regel): Kacheln flach, weil Titel und
   Komponist NEBENEINANDER stehen — die Schrift bleibt gross. */
#composerScouterDialog { width: min(1040px, 96vw); }
.composer-scouter-candidate-card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 14px;
  text-align: left;
}
.composer-scouter-candidate-card .composer-scouter-candidate-title { font-size: 16px; }
.composer-scouter-candidate-card .composer-scouter-candidate-composer { font-size: 14px; }
.composer-scouter-candidate-card .composer-scouter-candidate-hint {
  flex-basis: 100%;
  margin-top: 0;
  font-size: 12px;
}

/* Infotext im Bibliotheks-Modus: nur ein leiser Hinweis — kein Schatten-
   Kasten, der nach kaputtem Element aussieht (Giottos Rueckmeldung). */
.composer-scouter-footer.is-library-mode {
  box-shadow: none;
  background: transparent;
  border-top: 0;
  padding-top: 8px;
}
.composer-scouter-footer.is-library-mode .composer-scouter-library-mode-hint {
  color: var(--muted);
  opacity: 0.65;
  font-size: 12px;
}


/* ===== Werktimer-Feinschliff (V259, Giottos 5 Punkte) ================= */

/* 1) (V268: Ruecksetzung nach Giottos Kritik) Position und Optik der
   Anzeigen bleiben wie im urspruenglichen, guten Stand. Einzige
   Angleichung: die Bereit-/Live-Anzeige traegt dieselbe Schrift- und
   Punktgroesse wie die REC-Anzeige. */
.live-overview-row .live-progress-tracker.is-large .live-progress-piece-heading .live-progress-status strong {
  font-size: clamp(15px, 1.5vw, 20px) !important;
  font-weight: 820;
  letter-spacing: 0.04em;
}
.live-progress-piece-heading .live-progress-status .status-light {
  width: 12px;
  height: 12px;
}

/* 2) "Werke gespielt" exakt mittig ueber der Zahl (auch einstellig) */
.live-history-button.live-meta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.live-history-button.live-meta-card small { width: 100%; text-align: center; }
.live-played-sets { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; text-transform: none; }

/* 3) Set-Knopf: keine abgeschnittenen Ecken/Buchstaben */
.live-current-set-button {
  overflow: visible;
  line-height: 1.25;
  padding-top: 3px;
  padding-bottom: 3px;
}
.live-current-set-button span,
.live-current-set-button em { overflow: visible; }

/* 4) (V268) Glow-Experimente vollstaendig zurueckgenommen — der Ring
   nutzt wieder exakt seine urspruengliche Optik aus der Basisdefinition. */


/* Dashboard-Feinschliff (V260) */
/* 2) "Dashboard" als echte Ueberschrift: gross, ohne Kachel-Optik */
.concert-dashboard-top-copy > strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: none;
  border: none;
  padding: 0;
}
.concert-dashboard-top-copy > span { font-size: 13px; color: var(--muted); }

/* 3) App-Stand: kein eingefaerbter Grund, nur grauer Rahmen */
.concert-dashboard-build-tile {
  --dashboard-build-fill: transparent;
  --dashboard-build-border: rgba(140, 155, 175, 0.35);
  --dashboard-build-ink: var(--muted);
  --dashboard-build-muted: var(--muted);
  background: transparent;
}


/* Konzert-Navigation mit Icons (V271, Giottos Regie): technische,
   flache Linien-Icons in Grau — feste Spalte, kein Farbspiel. Die
   aktive Zeile hellt das Icon leicht auf.
   Rollback: .concert-nav-icon { display: none; } */
.concert-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  margin-right: 2px;
  color: rgba(150, 165, 182, 0.72);
  vertical-align: -2px;
}
.concert-nav-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}
.archive-mode-switch button.is-active .concert-nav-icon {
  color: rgba(214, 226, 238, 0.95);
}


/* V262: Groessere Seitenleisten-Ueberschriften duerfen NICHT umbrechen
   (Giotto: "Live-Sammlungen" brach auf dem iPad um). Eine Zeile, notfalls
   sanft abgeschnitten — nie zweizeilig. */
#libraryView .sidebar-panel h2 {
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2px;
  padding-right: 2px;
  margin-left: -2px;
  margin-right: -2px;
}


/* ===== Instant Set aufgeraeumt (V264, Giottos Regie) ==================
   Nichts schwebt mehr ueber der Setlist: Foto-Knopf, Composer Scouter,
   Abbrechen und Setlist erstellen sitzen ALLE unten in einer Leiste,
   die immer im Sichtfeld bleibt. Die Titel-Vorschau scrollt innen. */
#setlistImportDialog {
  width: min(720px, 96vw);
}
#setlistImportDialog form {
  display: flex;
  flex-direction: column;
  max-height: min(84vh, 780px);
}
#setlistImportDialog textarea {
  flex: 0 1 auto;
  min-height: 120px;
}
#setlistImportDialog .setlist-import-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.setlist-import-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.setlist-import-actions .setlist-import-photo-btn {
  margin: 0;
}
.setlist-import-actions-spacer {
  flex: 1 1 auto;
}


/* V265: Dashboard-Kopf ohne eigenen Rahmen — "Dashboard" ist eine echte
   Ueberschrift im Gesamtrahmen; die kleinen Elemente (App-Stand) sitzen
   oben rechts daneben. Backoffice-Koepfe behalten ihre Kachel. */
.concert-dashboard > .concert-dashboard-top {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 4px 2px;
}
.concert-dashboard > .concert-dashboard-top .concert-dashboard-top-head {
  align-items: flex-start;
}


/* V266: Magic-Werkzeuge in der Vorbereitung als zwei kompakte ✨-Knoepfe.
   Die grossen Erklaer-Karten erscheinen erst auf Tipp — die geplanten
   Konzerte behalten die Aufmerksamkeit. */
.concert-prep-magic-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.concert-prep-magic-toggle {
  padding: 9px 16px;
  border: 1px solid rgba(122, 199, 167, 0.35);
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.07);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.concert-prep-magic-toggle.is-style {
  border-color: rgba(222, 179, 92, 0.4);
  background: rgba(222, 179, 92, 0.07);
}
.concert-prep-magic-toggle.is-open {
  background: rgba(122, 199, 167, 0.16);
}
.concert-prep-magic-toggle.is-style.is-open {
  background: rgba(222, 179, 92, 0.16);
}


/* V272: Vorbereitung geordnet — Neues Konzert und die Magic-Knoepfe in
   EINER Zeile, Trennlinie grenzt die Konzertliste klar ab. */
.concert-prep-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.concert-prep-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 14px 0 4px;
}


/* V273: Konzertformular aufgeraeumt — auf Touch-Geraeten uebernimmt das
   native Raedchen Datum und Uhrzeit, die +/- Knoepfe verschwinden dort.
   Am Rechner bleiben sie, aber dezent. */
@media (pointer: coarse) {
  .event-datetime-step-btn { display: none; }
}
.event-datetime-step-btn {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}@media (hover: hover) {
.event-datetime-step-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}}


/* ===== Setlist von heute (V274, Giottos Regie) ========================
   Breiterer Dialog, flache Zeilen, Zeit direkt am Titel, und zwei echte
   Aktions-Knoepfe (Tauschen + X) mittig rechts — nichts haengt mehr
   unter dem Stuecknamen. */
#playedHistoryDialog {
  width: min(620px, 94vw);
}
.played-history-lead {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.played-history-list li {
  grid-template-columns: 24px minmax(0, 1fr) 34px 34px;
  gap: 8px;
  min-height: 30px;
  padding: 4px 0;
}
.played-history-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
}
.played-history-swap,
.played-history-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  opacity: 1;
  font-size: 18px;
  line-height: 1;
  box-shadow: none;
}
.played-history-swap svg {
  width: 16px;
  height: 16px;
}
.played-history-delete {
  color: rgba(255, 111, 111, 0.85);
}@media (hover: hover) {
.played-history-swap:hover,
.played-history-swap:focus-visible {
  border-color: rgba(122, 199, 167, 0.5);
  color: var(--text);
  background: rgba(122, 199, 167, 0.08);
}}@media (hover: hover) {
.played-history-delete:hover,
.played-history-delete:focus-visible {
  border-color: rgba(255, 111, 111, 0.5);
  color: #ff8a8a;
  background: rgba(255, 111, 111, 0.08);
}}
.played-history-swap-placeholder {
  width: 32px;
}

/* Bewertungs-Streifen ohne Sterne-Frage: eine schmale Zeile (V274). */
.live-work-rating-prompt.is-quiet {
  padding: 3px 10px;
}
.live-work-rating-prompt.is-quiet .live-rating-layout,
.live-work-rating-prompt.is-quiet .live-rating-head {
  flex-wrap: nowrap;
}
.live-work-rating-prompt.is-quiet .live-rating-head {
  overflow: hidden;
}
.live-work-rating-prompt.is-quiet .live-rating-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-work-rating-prompt.is-quiet .live-rating-skip-only {
  min-height: 26px;
  padding: 2px 10px;
  font-size: 12px;
}
.live-work-rating-prompt.is-quiet .live-good-version-hint {
  display: none;
}
.live-work-rating-prompt.is-quiet .live-good-version-heart-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}

/* Herz-Knopf: garantiert rund (nie oval), gefuelltes klares Herz. */
.live-good-version-heart-btn {
  aspect-ratio: 1;
  max-width: 30px;
  flex: 0 0 auto;
}
.live-good-version-heart-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}
.live-good-version-heart-btn:not(.is-marked) {
  color: rgba(196, 84, 110, 0.45);
}


/* ===== Admin-Zustellung mit Aufmerksamkeit (V276, Giottos Regie) ======
   Volle Spaltenbreite, gelb-gruener Farbverlauf wie die Konzert-Karten,
   Schrift auf Karten-Niveau — eine Zustellung soll ins Auge springen. */
.concert-dashboard-admin-delivery {
  grid-column: 1 / -1;
  margin: 10px 0 6px;
  padding: 16px 18px;
  border: 1px solid rgba(222, 200, 90, 0.55);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(222, 200, 90, 0.24), rgba(150, 205, 120, 0.16));
  box-shadow: 0 10px 26px rgba(222, 200, 90, 0.1);
  font-size: 15px;
  line-height: 1.4;
}
.concert-dashboard-admin-delivery strong {
  font-size: 17px;
  color: var(--ink);
}
.concert-dashboard-admin-delivery button {
  font-size: 14px;
  min-height: 36px;
}

/* Postfach in der Bibliotheks-Menueleiste: nur sichtbar bei wartender
   Zustellung; drei sanfte Puls-Wellen beim Eintreffen, dann ruhig. */
.library-inbox-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-left: auto;
  min-width: 38px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(222, 200, 90, 0.55);
  border-radius: 10px;
  background: rgba(222, 200, 90, 0.12);
  color: #e8d48a;
}
.library-inbox-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.library-inbox-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #decb5a;
  color: #171d12;
  font-size: 11px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}
@keyframes libraryInboxPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(222, 200, 90, 0); }
  50% { box-shadow: 0 0 0 7px rgba(222, 200, 90, 0.28); }
}
.library-inbox-btn.is-new {
  animation: libraryInboxPulse 1.5s ease 3;
}


/* V278: Uebernahme-Fenster entzerrt (Giotto) — vertikal mittig statt
   oben angeklebt, mehr Luft in der Stueckliste. */
.collection-import-dialog {
  width: min(560px, 94vw);
  margin: auto;
}
.collection-import-dialog h2 {
  margin-bottom: 4px;
}
#collectionImportSummary {
  margin: 6px 0 12px;
  line-height: 1.5;
}
.collection-import-preview {
  max-height: min(52vh, 460px);
}
.collection-import-preview li {
  padding: 13px 16px;
  gap: 4px;
}
.collection-import-preview strong {
  font-size: 15px;
}
.collection-import-preview small {
  font-size: 13px;
  color: var(--muted);
}
.collection-import-dialog menu {
  margin-top: 14px;
  gap: 10px;
}


/* ===== Sammlung teilen entzerrt (V289, Giottos Regie) ================= */
#shareCollectionDialog {
  width: min(540px, 94vw);
}
#shareCollectionDialog form {
  display: grid;
  gap: 14px;
}
#shareCollectionDialog label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
#shareCollectionDialog select {
  width: 100%;
  max-width: 380px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(10, 18, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}
#shareCollectionDialog .collection-share-admin-send {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Noten-Lade-Anzeige (V305): zentrierte Timer-Kachel — grosser Prozent-
   wert, Ring laeuft herum, Restzeit darunter. Schliessbar. */
.noten-lade-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9000;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  width: min(320px, 86vw);
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
}
.noten-lade-titel {
  font-size: 15px;
  color: var(--ink);
  padding: 0 18px;
}
.noten-lade-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background: conic-gradient(
    from -90deg,
    #7ac7a7 calc(var(--progress) * 1turn),
    rgba(122, 158, 183, 0.16) 0
  );
  transition: background 250ms ease;
}
.noten-lade-ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--panel);
  z-index: 1;
}
.noten-lade-prozent {
  position: relative;
  z-index: 2;
  color: var(--ink);
  font-size: 46px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Die Zahl sitzt EXAKT mittig — das %-Zeichen haengt rechts an, ohne
   die Zentrierung zu verschieben (Giottos Pedanterie, zu Recht). */
.noten-lade-prozent small {
  position: absolute;
  left: 100%;
  bottom: 4px;
  margin-left: 3px;
  font-size: 19px;
  font-weight: 750;
  color: var(--muted);
}
.noten-lade-status {
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.noten-lade-zeit {
  color: #7ac7a7;
  font-size: 14px;
  font-weight: 700;
  min-height: 17px;
}
.noten-lade-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  max-width: 240px;
}
.noten-lade-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}


/* V290: Auch im Bibliotheks-PDF steht oben der Stueckname — und die
   Sterne, falls das Werk schon bewertet ist (Giottos Wunsch). */
.pdf-viewer-dialog.is-library-pdf .pdf-title-group {
  display: grid !important;
  gap: 2px;
  min-width: 0;
}
.pdf-viewer-dialog.is-library-pdf #pdfViewerTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-viewer-rating .work-rating-star {
  font-size: 13px;
  color: rgba(222, 200, 90, 0.4);
}
.pdf-viewer-rating .work-rating-star.is-filled {
  color: #decb5a;
}


/* V291: "Werke einordnen"-Kopf ohne Rahmen, nichts rutscht mehr aus
   dem Bild (iPad); Brillen-Knopf und ♪-Audio-Chip am Bibliotheks-PDF. */
.work-classification-hero {
  flex-wrap: wrap;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 4px 2px;
}
.work-classification-hero > div:first-child {
  min-width: 0;
  flex: 1 1 260px;
}
.classification-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.classification-progress {
  min-width: 0;
}

.pdf-viewer-dialog.is-library-pdf #pdfLibraryReviewMarkBtn,
.pdf-viewer-dialog.is-library-pdf #pdfAudioChipBtn {
  display: inline-flex;
}
#pdfAudioChipBtn {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}
#pdfAudioChipBtn.is-active {
  color: #7ac7a7;
  border-color: rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.1);
}


/* V292: Finder-Gefuehl — Werke auf Sammlungen ziehen (nur Zeiger-Geraete)
   + ruhige, schmale Scrollbalken statt klobiger System-Balken. */
@media (pointer: fine) {
  #libraryView .table-wrap tr[data-work-id] {
    cursor: grab;
  }
  #libraryView .table-wrap tr[data-work-id]:active {
    cursor: grabbing;
  }
}
.collection-list button.is-drop-target {
  border-color: rgba(122, 199, 167, 0.65) !important;
  background: rgba(122, 199, 167, 0.14) !important;
  box-shadow: 0 0 0 2px rgba(122, 199, 167, 0.25);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 158, 183, 0.3) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(122, 158, 183, 0.28);
  border-radius: 999px;
}@media (hover: hover) {
*::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 158, 183, 0.5);
}}
*::-webkit-scrollbar-corner {
  background: transparent;
}


/* V293: Pruef-Aufgaben als echte Konzertkacheln mit gelbem Chip. */
.backoffice-pruef-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(222, 200, 90, 0.5);
  background: rgba(222, 200, 90, 0.14);
  color: #e8d48a;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.backoffice-pruef-chip.is-critical {
  border-color: rgba(255, 130, 120, 0.5);
  background: rgba(255, 130, 120, 0.12);
  color: #ffb0a6;
}


/* V294: ALLE Backoffice- und Backlog-Ueberschriften kleben auf dem
   Hintergrund — keine Einzel-Kacheln mehr (Giottos Regel, wie Dashboard). */
#backofficeContent .concert-dashboard-top,
#archiveList > .concert-dashboard-top {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 4px 2px;
}


/* V295: Zaehl-Schild am Mauszeiger beim Ziehen einer Mehrfachauswahl. */
.work-drag-ghost {
  position: absolute;
  top: -1000px;
  left: -1000px;
  padding: 8px 14px;
  border: 1px solid rgba(122, 199, 167, 0.6);
  border-radius: 999px;
  background: #12202e;
  color: #d6e2ee;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}


/* V297: App-Stand im Backoffice-Kopf — klein, grau, rechts oben. */
.backoffice-build-hint {
  flex: 0 0 auto;
  align-self: flex-start;
  color: var(--muted);
  opacity: 0.7;
  font-size: 11px;
  white-space: nowrap;
}


/* ===== V300: Einladungs-Kachel-Karte im In-App-Backoffice ============= */
.bo-invite-card {
  display: grid;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(122, 199, 167, 0.4);
  border-radius: 14px;
  background: rgba(122, 199, 167, 0.06);
  animation: boInviteAuf 240ms ease;
}
@keyframes boInviteAuf {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bo-invite-card.is-frisch {
  animation: inviteKartePuls 1.3s ease 2;
}
@keyframes inviteKartePuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 199, 167, 0); }
  50% { box-shadow: 0 0 0 5px rgba(122, 199, 167, 0.28); }
}
.bo-invite-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bo-invite-card-head strong {
  font-size: 16px;
  color: var(--ink);
}
.bo-invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.bo-invite-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}
.bo-invite-form input {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(10, 18, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}
@media (max-width: 700px) {
  .bo-invite-form { grid-template-columns: 1fr; align-items: stretch; }
}
.bo-invite-notice {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(226, 184, 79, 0.5);
  border-radius: 10px;
  background: rgba(226, 184, 79, 0.1);
  color: #e8ce8a;
  font-size: 13px;
}
.bo-invite-result {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(122, 199, 167, 0.25);
}
.bo-invite-result > label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.bo-invite-link-row {
  display: flex;
  gap: 8px;
}
.bo-invite-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  background: rgba(10, 18, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.bo-invite-hint {
  margin: 0;
  font-size: 12px;
}
.bo-invite-revoke {
  justify-self: start;
  color: rgba(255, 111, 111, 0.85);
}


/* ===== V301: Backoffice-Uebersicht als Dashboard ====================== */
.bo-dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.bo-dash-tile {
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(122, 158, 183, 0.12), rgba(122, 199, 167, 0.06));
  color: inherit;
  text-align: left;
}
.bo-dash-tile strong {
  font-size: 26px;
  color: var(--ink);
  line-height: 1.1;
}
.bo-dash-tile span {
  color: var(--muted);
  font-size: 12px;
}@media (hover: hover) {
.bo-dash-tile:not([disabled]):hover {
  border-color: rgba(122, 199, 167, 0.5);
}}
.bo-dash-tile[disabled] {
  opacity: 1;
  cursor: default;
}
.bo-dash-warn-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.bo-dash-warn-tile {
  display: grid;
  gap: 3px;
  justify-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(222, 200, 90, 0.5);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(222, 200, 90, 0.2), rgba(150, 205, 120, 0.1));
  color: inherit;
  text-align: left;
}
.bo-dash-warn-tile strong {
  color: var(--ink);
  font-size: 15px;
}
.bo-dash-warn-tile span {
  color: #e8d48a;
  font-size: 13px;
  font-weight: 700;
}
.bo-dash-warn-tile.is-critical {
  border-color: rgba(255, 130, 120, 0.55);
  background: linear-gradient(120deg, rgba(255, 130, 120, 0.18), rgba(222, 200, 90, 0.1));
}
.bo-dash-warn-tile.is-critical span {
  color: #ffb0a6;
}
.bo-dash-gruen {
  margin: 4px 0 14px;
}
.bo-dash-kommend h3 {
  margin: 4px 0 8px;
}


/* ===== V307: Bibliotheks-PDF als Fenster, stille Knoepfe ==============
   Giottos Regel: Aus der Bibliothek geoeffnete Noten brauchen kein
   Vollbild — ein grosszuegiges Fenster mit sichtbarer Kopfzeile reicht.
   Der Live-Modus bleibt unangetastet (dort zaehlt maximale Groesse). */
.pdf-viewer-dialog.is-library-pdf {
  inset: 0;
  width: min(960px, 94vw);
  height: min(93vh, 1180px);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* Brille und ♪ fuegen sich in den Hintergrund: transparente Flaeche,
   graue Umrandung, graues Symbol — aktiv wird dezent gruen/rosa. */
.pdf-viewer-dialog.is-library-pdf #pdfLibraryReviewMarkBtn,
.pdf-viewer-dialog.is-library-pdf #pdfAudioChipBtn {
  background: transparent;
  border: 1px solid rgba(122, 158, 183, 0.28);
  color: rgba(150, 165, 182, 0.8);
  box-shadow: none;
}@media (hover: hover) {
.pdf-viewer-dialog.is-library-pdf #pdfLibraryReviewMarkBtn:hover,
.pdf-viewer-dialog.is-library-pdf #pdfAudioChipBtn:hover {
  color: var(--ink);
  border-color: rgba(122, 158, 183, 0.5);
  background: rgba(255, 255, 255, 0.04);
}}
.pdf-viewer-dialog.is-library-pdf #pdfLibraryReviewMarkBtn.is-active {
  color: #7ac7a7;
  border-color: rgba(122, 199, 167, 0.5);
}


/* V309: Beim Scrollen der Seitenleiste wird oben mit der Panel-Rundung
   beschnitten statt hart abgesaebelt (Giottos Wunsch). */
#libraryView .sidebar {
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}


/* ===== V313: Konto-Schimmer statt Punkt + Rundungs-Rahmen ============= */
/* Fehlende Profildaten: kein gelber Punkt mehr — das ganze Feld traegt
   einen leichten orangenen Schimmer (Giottos Regel). */
#accessLockBtn.has-attention::after {
  display: none;
}
#accessLockBtn.has-attention {
  border-color: rgba(235, 165, 95, 0.55);
  background: rgba(235, 165, 95, 0.1);
  box-shadow: 0 0 14px rgba(235, 165, 95, 0.22);
}

/* Die runde Scroll-Kante der Seitenleiste traegt denselben weiss
   schimmernden Rahmen wie die Panels — als feststehende Kappe, unter
   der die Zeilen hindurchscrollen. */
#libraryView .sidebar::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  display: block;
  height: 16px;
  margin-bottom: -16px;
  pointer-events: none;
  border: 1px solid rgba(214, 226, 238, 0.16);
  border-bottom: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  /* V314: nur sichtbar, wenn wirklich gescrollt ist — beim elastischen
     Ziehen und ganz oben verschwindet die Kappe (Giottos Detail). */
  opacity: 0;
  transition: opacity 160ms ease;
}
#libraryView .sidebar.is-scrolled::before {
  opacity: 1;
}


/* ===== V315: Tonanfang-Player, Flaeche-1-Fluss (Paket 23 Teil 1) ====== */
.archive-audio-mini-marke {
  margin: 2px 0 0;
  color: #7ac7a7;
  font-size: 13px;
  font-weight: 700;
}
.archive-audio-mini-fertig {
  min-height: 38px;
}
.archive-audio-fine-tune-position {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#archiveAudioBackToMiniBtn {
  border: 1px solid rgba(122, 158, 183, 0.3);
  background: transparent;
  color: var(--muted);
}


/* V316: Flaeche 1 als Standard-Eingang — Zuweisen-Fokus ohne Audio. */
.archive-audio-mini-assign {
  justify-self: center;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(122, 199, 167, 0.12);
  border: 1px solid rgba(122, 199, 167, 0.45);
  color: #bfe6d6;
  border-radius: 12px;
}


/* V319: Knopf-Hierarchie im kleinen Player (Giottos Regel) —
   "✨ Ersten Ton finden" ist der Magic-Knopf; "Musikbeginn übernehmen"
   ist ein normaler Aktionsknopf, der aufleuchtet, sobald ein Ton
   gefunden wurde. */
#archiveAudioMiniAutoBtn {
  background: rgba(122, 199, 167, 0.16);
  border: 1px solid rgba(122, 199, 167, 0.55);
  color: #d3efe2;
  font-weight: 750;
}
#archiveAudioMiniApplyBtn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
#archiveAudioMiniApplyBtn.is-ready {
  background: rgba(122, 199, 167, 0.14) !important;
  border-color: rgba(122, 199, 167, 0.55) !important;
  color: #bfe6d6 !important;
  animation: miniApplyBereit 1.2s ease 2;
}
@keyframes miniApplyBereit {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 199, 167, 0); }
  50% { box-shadow: 0 0 0 5px rgba(122, 199, 167, 0.25); }
}


/* V320: Mini-Player — Lade-Leiste und 20-Minuten-Zeitstrahl. */
.archive-audio-mini-lade {
  height: 5px;
  border-radius: 999px;
  background: rgba(122, 158, 183, 0.16);
  overflow: hidden;
}
.archive-audio-mini-lade span {
  display: block;
  height: 100%;
  width: 34%;
  border-radius: 999px;
  background: #7ac7a7;
  animation: miniLadeLauf 1.2s ease-in-out infinite;
}
@keyframes miniLadeLauf {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}
.archive-audio-mini-strahl {
  width: 100%;
  accent-color: #7ac7a7;
}


/* V321: Notfall-Werkzeuge nur bei Bedarf — die Karte bleibt im
   Normalfall minimal (gestaffelte Einfachheit). */
.archive-audio-mini-card:not(.is-manuell) .archive-audio-mini-strahl,
.archive-audio-mini-card:not(.is-manuell) [data-mini-nudge="-10"],
.archive-audio-mini-card:not(.is-manuell) [data-mini-nudge="10"] {
  display: none;
}


/* ===== V323: Anhoer-Karte — verbundene Aufnahme als Stueckliste ======= */
.archive-audio-mini-card.is-anhoeren .archive-audio-mini-controls,
.archive-audio-mini-card.is-anhoeren .archive-audio-mini-nudges,
.archive-audio-mini-card.is-anhoeren .archive-audio-mini-strahl,
.archive-audio-mini-card.is-anhoeren #archiveAudioMiniApplyBtn,
.archive-audio-mini-card.is-anhoeren #archiveAudioMiniMarke,
.archive-audio-mini-card.is-anhoeren .archive-audio-mini-time {
  display: none !important;
}
.archive-audio-mini-stueckliste {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: min(46vh, 420px);
  overflow-y: auto;
  text-align: left;
}
.archive-audio-mini-stueckliste button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}@media (hover: hover) {
.archive-audio-mini-stueckliste button:hover:not([disabled]) {
  background: rgba(122, 199, 167, 0.08);
}}
.archive-audio-mini-stueckliste button.is-aktiv {
  background: rgba(122, 199, 167, 0.14);
}
.archive-audio-mini-stueckliste button[disabled] {
  opacity: 0.45;
}
.mini-stueck-nummer {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mini-stueck-titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.archive-audio-mini-stueckliste time {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mini-stueck-leer {
  color: var(--muted);
  padding: 8px;
}


/* V326: Verwaltungs-Zeile der Anhoer-Karte — still, nur dort sichtbar. */
.archive-audio-mini-card:not(.is-anhoeren) .archive-audio-mini-verwaltung {
  display: none;
}
.archive-audio-mini-verwaltung {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 6px;
  border-top: 1px solid rgba(122, 158, 183, 0.16);
}
.archive-audio-mini-verwaltung .text-button {
  color: var(--muted);
  font-size: 12px;
}@media (hover: hover) {
.archive-audio-mini-verwaltung .text-button:hover {
  color: var(--ink);
}}


/* ===== Paket 29 Stufe A: Nachhoer-Player (V327) ======================= */
.nachhoer-dialog {
  width: min(700px, 94vw);
}
.nachhoer-dialog form {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 900px);
  gap: 12px;
}
.nachhoer-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 26px 10px 4px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.18);
}
.nachhoer-kopf-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.nachhoer-kopf-copy small {
  color: var(--muted);
  font-size: 12px;
}
.nachhoer-kopf-copy strong {
  color: var(--ink);
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nachhoer-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
#nachhoerPlayBtn {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  border: 1px solid rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.12);
  color: #d3efe2;
  font-size: 20px;
}
#nachhoerZeit {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.nachhoer-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.nachhoer-liste button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}@media (hover: hover) {
.nachhoer-liste button:hover:not([disabled]) {
  background: rgba(122, 199, 167, 0.07);
}}
.nachhoer-liste button.is-aktiv {
  background: rgba(122, 199, 167, 0.14);
}
.nachhoer-liste button.is-aktiv .nachhoer-nummer {
  color: #7ac7a7;
}
.nachhoer-liste button[disabled] {
  opacity: 0.45;
}
.nachhoer-nummer {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.nachhoer-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.nachhoer-copy strong {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nachhoer-copy small {
  color: var(--muted);
  font-size: 12px;
}
.nachhoer-zeiten {
  display: grid;
  gap: 1px;
  justify-items: end;
}
.nachhoer-zeiten time {
  color: var(--ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.nachhoer-zeiten small {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.nachhoer-leer {
  color: var(--muted);
  padding: 10px;
}
.nachhoer-verwaltung {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 158, 183, 0.16);
}
.nachhoer-verwaltung .text-button {
  color: var(--muted);
  font-size: 12px;
}@media (hover: hover) {
.nachhoer-verwaltung .text-button:hover {
  color: var(--ink);
}}


/* ===== Paket 29 Stufe B: 🧹 Aufraeumen (V329) ========================= */
.nachhoer-modi {
  display: flex;
  gap: 8px;
}
#nachhoerAufraeumenBtn {
  padding: 7px 14px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
#nachhoerAufraeumenBtn.is-aktiv {
  border-color: rgba(222, 200, 90, 0.55);
  background: rgba(222, 200, 90, 0.12);
  color: #e8d48a;
}
.nachhoer-liste li.hat-befund {
  border: 1px solid rgba(222, 200, 90, 0.4);
  border-radius: 12px;
  background: rgba(222, 200, 90, 0.05);
  padding-bottom: 6px;
}
.nachhoer-befund {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 4px 12px 4px 50px;
}
.nachhoer-befund-text,
.nachhoer-befund-hoeren {
  color: #e8d48a;
  font-size: 13px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}@media (hover: hover) {
.nachhoer-befund-hoeren:hover {
  text-decoration: underline;
}}
.nachhoer-befund-aktionen {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nachhoer-befund-aktionen button:not(.text-button) {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid rgba(122, 199, 167, 0.45);
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.1);
  color: #bfe6d6;
}
.nachhoer-befund-aktionen .text-button {
  color: var(--muted);
  font-size: 12px;
}


/* V330: Hand-Knopf — still, grau, oeffnet den Werkzeugkasten jederzeit. */
#archiveAudioMiniHandBtn {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: transparent;
  color: rgba(150, 165, 182, 0.8);
}
#archiveAudioMiniHandBtn svg {
  width: 30px;
  height: 30px;
}@media (hover: hover) {
#archiveAudioMiniHandBtn:hover {
  color: var(--ink);
  border-color: rgba(122, 158, 183, 0.5);
}}
.archive-audio-mini-card.is-manuell #archiveAudioMiniHandBtn {
  color: #e8d48a;
  border-color: rgba(222, 200, 90, 0.5);
}


/* ===== V332: Nachhoer-Player kompakt (Giottos Redesign) =============== */
.nachhoer-strahl {
  width: 100%;
  accent-color: #7ac7a7;
  margin: 2px 0;
}
.nachhoer-zeile {
  display: grid;
  grid-template-columns: 24px minmax(0, 2fr) minmax(110px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 10px;
}
.nachhoer-liste li {
  border-radius: 10px;
}@media (hover: hover) {
.nachhoer-liste li:hover .nachhoer-zeile {
  background: rgba(122, 199, 167, 0.06);
}}
.nachhoer-liste li.is-aktiv .nachhoer-zeile,
[data-nachhoer-zeile].is-aktiv .nachhoer-zeile {
  background: rgba(122, 199, 167, 0.12);
}
.nachhoer-titel {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.nachhoer-aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.nachhoer-aktionen time {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.nachhoer-zeilen-play {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid rgba(122, 199, 167, 0.4);
  border-radius: 50%;
  background: rgba(122, 199, 167, 0.08);
  color: #bfe6d6;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Alte grosse Zeilen-Stile neutralisieren */
.nachhoer-liste > li > button[data-nachhoer-entry] { all: revert; }

/* Verwaltung mit Umrandung */
.nachhoer-verwaltung .text-button {
  border: 1px solid rgba(122, 158, 183, 0.32);
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
}


/* V333: Herz + Brille in der Kachel — still bis aktiv (iTunes-Logik). */
.nachhoer-herz,
.nachhoer-brille {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(150, 165, 182, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nachhoer-herz svg {
  width: 15px;
  height: 15px;
}
.nachhoer-brille .nachhoer-brille-icon {
  width: 18px;
  height: 18px;
}@media (hover: hover) {
.nachhoer-herz:hover,
.nachhoer-brille:hover {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}}
.nachhoer-herz.is-aktiv {
  color: #e08aa0;
}
.nachhoer-brille.is-aktiv {
  color: #7ac7a7;
}


/* ===== V334: Nachhoeren als volle Arbeitsflaeche (Giottos Redesign) === */
.nachhoer-dialog {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.nachhoer-dialog form {
  max-height: none;
  height: 100%;
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 18px 20px 14px;
  box-sizing: border-box;
  gap: 10px;
}
.nachhoer-kopf {
  display: grid;
  gap: 2px;
  padding: 0 26px 0 2px;
  border-bottom: 0;
}
.nachhoer-kopf h2 {
  margin: 0;
  font-size: 22px;
  color: var(--ink);
}
.nachhoer-kopf small {
  color: var(--muted);
  font-size: 13px;
}
.nachhoer-buehne {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 14px 0 10px;
  border-bottom: 1px solid rgba(122, 158, 183, 0.14);
}
.nachhoer-buehne > strong {
  font-size: 18px;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nachhoer-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
#nachhoerZurueckBtn,
#nachhoerVorBtn {
  min-width: 52px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#nachhoerPlayBtn {
  width: 64px;
  height: 64px;
  min-width: 64px;
  font-size: 24px;
}
.nachhoer-strahl-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.nachhoer-strahl-zeile .nachhoer-strahl {
  flex: 1 1 auto;
}
#nachhoerZeit {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* iTunes-Liste: klein, dicht, feine Linien */
.nachhoer-liste {
  gap: 0;
}
.nachhoer-liste li {
  border-radius: 0;
}
.nachhoer-liste li:not(.hat-befund):not(.nachhoer-setpause) {
  border-bottom: 1px solid rgba(214, 226, 238, 0.07);
}
.nachhoer-zeile {
  grid-template-columns: 26px minmax(0, 1fr) 74px auto;
  gap: 8px 14px;
  padding: 3px 8px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}
.nachhoer-titel {
  font-size: 13px;
  font-weight: 600;
}
.nachhoer-nummer {
  font-size: 12px;
}
.nachhoer-aktionen time {
  font-size: 11px;
}
.nachhoer-zeilen-play {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  font-size: 11px;
}
.nachhoer-herz,
.nachhoer-brille {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.nachhoer-setpause {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(214, 226, 238, 0.07);
}
.nachhoer-setpause span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* V336: Strahl-Modus-Umschalter */
#nachhoerStrahlModusBtn {
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* ===== V337: Modi ⇄ Vertauscht? und ✏️ Benennen mit Inline-Karten ===== */
.nachhoer-modi button {
  padding: 7px 14px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.nachhoer-modi button.is-aktiv {
  border-color: rgba(222, 200, 90, 0.55);
  background: rgba(222, 200, 90, 0.12);
  color: #e8d48a;
}
.nachhoer-modus-aktion {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(122, 199, 167, 0.35);
  border-radius: 9px;
  background: rgba(122, 199, 167, 0.07);
  color: #bfe6d6;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.nachhoer-getauscht {
  color: var(--muted);
  font-size: 11px;
}
.nachhoer-karte {
  display: grid;
  gap: 10px;
  margin: 4px 8px 8px 34px;
  padding: 12px 14px;
  border: 1px solid rgba(122, 199, 167, 0.35);
  border-radius: 12px;
  background: rgba(122, 199, 167, 0.05);
}
.nachhoer-karte input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ink);
  background: rgba(10, 18, 28, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nachhoer-treffer-liste {
  display: grid;
  gap: 2px;
}
.nachhoer-treffer {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}@media (hover: hover) {
.nachhoer-treffer:hover {
  background: rgba(122, 199, 167, 0.1);
}}
.nachhoer-treffer strong {
  font-size: 13px;
}
.nachhoer-treffer small {
  color: var(--muted);
  font-size: 11px;
}
.nachhoer-karte-leer {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.nachhoer-karte-neu {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 158, 183, 0.16);
}
.nachhoer-karte-neu button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid rgba(122, 199, 167, 0.45);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.1);
  color: #bfe6d6;
  font-size: 13px;
}
.nachhoer-impro-knopf {
  justify-self: start;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}@media (hover: hover) {
.nachhoer-impro-knopf:hover {
  color: var(--ink);
  border-color: rgba(122, 199, 167, 0.5);
}}
.nachhoer-karte-zu {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 640px) {
  .nachhoer-karte-neu { grid-template-columns: 1fr; }
}


/* V338: Export-Pfeil — still wie Herz und Brille. */
.nachhoer-export {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(150, 165, 182, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nachhoer-export svg {
  width: 15px;
  height: 15px;
}@media (hover: hover) {
.nachhoer-export:hover:not([disabled]) {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
}}
.nachhoer-export[disabled] {
  opacity: 0.3;
}


/* V340: Debug-Protokoll der Tonerkennung — sichtbar, monospaced, scrollbar. */
.archive-audio-mini-debug {
  margin: 8px 0 0;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(214, 226, 238, 0.12);
  background: rgba(8, 12, 18, 0.6);
  color: rgba(190, 205, 220, 0.85);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
}


/* V341: Vermerk & Anmerkungen prominenter (Giotto 01.09.). */
.archive-row-vermerk {
  display: inline-block;
  max-width: 100%;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(240, 195, 80, 0.14);
  border: 1px solid rgba(240, 195, 80, 0.35);
  color: rgba(243, 208, 122, 0.95);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gema-notes-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 226, 238, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  cursor: pointer;
}@media (hover: hover) {
.gema-notes-tile:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.06);
}}
.gema-notes-tile[disabled] {
  cursor: default;
  opacity: 0.7;
}
.gema-notes-tile-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.gema-notes-tile-vermerk {
  padding: 1px 10px;
  border-radius: 999px;
  background: rgba(240, 195, 80, 0.14);
  border: 1px solid rgba(240, 195, 80, 0.35);
  color: rgba(243, 208, 122, 0.95);
  font-size: 12px;
  font-weight: 600;
}
.gema-notes-tile-text {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(214, 226, 238, 0.85);
  white-space: pre-line;
}
.gema-notes-tile-leer {
  font-size: 13px;
  color: var(--muted);
}
.gema-vermerk-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}
.gema-vermerk-label small {
  font-weight: 400;
  color: var(--muted);
}


/* ===== V343: Nachhoer-Player aufgeraeumt (Giottos 2-9-Feedback) ====== */
.nachhoer-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.nachhoer-kopf-titel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nachhoer-kopf-aktionen {
  display: flex;
  gap: 8px;
  padding-right: 34px;
}
.nachhoer-kopf-aktionen button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}@media (hover: hover) {
.nachhoer-kopf-aktionen button:hover {
  color: var(--ink);
  border-color: rgba(122, 158, 183, 0.5);
}}
.nachhoer-strahl-huelle {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nachhoer-strahl-band {
  position: relative;
  height: 3px;
  margin-top: 1px;
  border-radius: 2px;
  background: rgba(214, 226, 238, 0.08);
  overflow: hidden;
}
.nachhoer-strahl-band span {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: rgba(78, 138, 109, 0.85);
}
.nachhoer-strahl {
  accent-color: #4e8a6d;
}
.nachhoer-regler {
  display: inline-flex;
  padding: 2px;
  border: 1px solid rgba(122, 158, 183, 0.25);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.4);
}
.nachhoer-regler button {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.nachhoer-regler button.is-aktiv {
  background: rgba(58, 112, 87, 0.4);
  color: #cfe6da;
}
.nachhoer-bearbeiten-zeile {
  display: flex;
  justify-content: flex-end;
}
#nachhoerBearbeitenBtn {
  height: 30px;
  padding: 0 16px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
#nachhoerBearbeitenBtn.is-aktiv {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.1);
  color: #bfe6d6;
}
.nachhoer-werkzeuge {
  border: 1px solid rgba(214, 226, 238, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 14px 12px;
  display: grid;
  gap: 8px;
}
.nachhoer-werkzeuge h3 {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.nachhoer-werkzeuge-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nachhoer-werkzeuge-knoepfe button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.nachhoer-werkzeuge-knoepfe button.is-aktiv {
  border-color: rgba(222, 200, 90, 0.55);
  background: rgba(222, 200, 90, 0.12);
  color: #e8d48a;
}


/* V347: Skip-Knoepfe neben dem Play-Zeichen. */
.nachhoer-skip {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}@media (hover: hover) {
.nachhoer-skip:hover {
  color: var(--ink);
  border-color: rgba(122, 158, 183, 0.5);
}}


/* V349: Player-Kopf = Veranstaltungsname + grosses Datum, darunter Ort. */
.nachhoer-titelzeile {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  min-width: 0;
}
.nachhoer-titeldatum {
  color: var(--muted);
  font-size: 0.92em;
  font-weight: 650;
  white-space: nowrap;
}


/* ===== V351: Feinschliff nach Giottos Screenshot (01.09.) =========== */
/* Strahl: Gruen laeuft nahtlos hinter dem weissen Knopf her. */
.nachhoer-strahl {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  margin: 0;
  background: transparent;
}
.nachhoer-strahl::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #4e8a6d 0, #4e8a6d var(--nachhoer-fill, 0%), rgba(214, 226, 238, 0.14) var(--nachhoer-fill, 0%));
}
.nachhoer-strahl::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #f2f6f4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.nachhoer-strahl::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: rgba(214, 226, 238, 0.14);
}
.nachhoer-strahl::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: #4e8a6d;
}
.nachhoer-strahl::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #f2f6f4;
}
/* Liste: Aktionen ruecken an die Titel, nichts laeuft mehr ueber. */
.nachhoer-dialog form {
  overflow-x: hidden;
}
.nachhoer-aktionen {
  gap: 6px;
}@media (hover: hover) {
/* Kein Hover-Effekt auf Herz, Brille, Export. */
.nachhoer-herz:hover,
.nachhoer-brille:hover {
  color: rgba(150, 165, 182, 0.45);
  background: transparent;
}}@media (hover: hover) {
.nachhoer-herz.is-aktiv:hover {
  color: #e08aa0;
}}@media (hover: hover) {
.nachhoer-brille.is-aktiv:hover {
  color: #7ac7a7;
}}@media (hover: hover) {
.nachhoer-export:hover:not([disabled]) {
  color: rgba(150, 165, 182, 0.45);
  background: transparent;
}}
/* Set-Pause: kein Symbol, so kraeftig wie die Stuecktitel. */
.nachhoer-setpause span {
  font-weight: 650;
}
/* Werkzeuge klappen im Knopf-Kasten auf statt eine Spalte zu belegen. */
.nachhoer-werkzeuge-box {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.nachhoer-werkzeuge-box.is-offen {
  border: 1px solid rgba(214, 226, 238, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  width: 100%;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.nachhoer-werkzeuge-box.is-offen #nachhoerBearbeitenBtn {
  order: 2;
  flex: 0 0 auto;
}
.nachhoer-werkzeuge-box.is-offen .nachhoer-werkzeuge-knoepfe {
  order: 1;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}
.nachhoer-werkzeuge-box.is-offen .nachhoer-werkzeuge-knoepfe button {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}


/* V353: Zeitanzeige unter dem Balken statt daneben. */
.nachhoer-strahl-huelle #nachhoerZeit {
  align-self: flex-end;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}


/* V358: Anfaenge-Werkzeug — Stueck-Anfang fein verschieben. */
.nachhoer-anfang-zeile {
  margin: 0;
  font-size: 13px;
  color: rgba(214, 226, 238, 0.85);
}
.nachhoer-anfang-zeile strong {
  font-variant-numeric: tabular-nums;
}
.nachhoer-anfang-zeile small {
  color: var(--muted);
}
.nachhoer-anfang-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nachhoer-anfang-knoepfe button,
.nachhoer-anfang-aktionen button:not(.text-button) {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.nachhoer-anfang-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nachhoer-anfang-aktionen [data-anfang-uebernehmen] {
  border-color: rgba(122, 199, 167, 0.45);
  color: #bfe6d6;
}


/* ===== V362: Korrigieren-Modus — editierbare Setlist ================= */
.nachhoer-korr-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 6px 50px;
  font-size: 12px;
  color: var(--muted);
}
.nachhoer-korr-zeile label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}
.nachhoer-korr-zeile input {
  width: 84px;
  padding: 4px 8px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.5);
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nachhoer-korr-zeile button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.nachhoer-korr-fueller {
  flex: 1 1 auto;
}
.nachhoer-korr-vorschlag {
  border-style: dashed !important;
  color: rgba(190, 205, 220, 0.6) !important;
  font-variant-numeric: tabular-nums;
}
.nachhoer-korr-gefahr {
  color: rgba(224, 138, 160, 0.8) !important;
  border-color: rgba(224, 138, 160, 0.3) !important;
}


/* ===== V363: Korrekturmodus nach Spez — Timeline, Griffe, Pruefleiste = */
.nachhoer-warn {
  color: #e8d48a;
  font-size: 12px;
}
.nachhoer-segmente {
  position: relative;
  height: 30px;
  margin-top: 8px;
  border-radius: 8px;
  background: rgba(214, 226, 238, 0.05);
  overflow: hidden;
}
.nachhoer-segment {
  position: absolute;
  top: 3px;
  bottom: 3px;
  padding: 0 6px;
  border: 0;
  border-left: 1px solid rgba(8, 12, 18, 0.9);
  border-radius: 0;
  background: rgba(78, 138, 109, 0.28);
  color: rgba(214, 226, 238, 0.75);
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  cursor: pointer;
}
.nachhoer-segment span {
  pointer-events: none;
}
.nachhoer-segment.is-auswahl {
  background: rgba(122, 199, 167, 0.45);
  color: #eaf6f0;
}
.nachhoer-segment-warn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  margin-left: -9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e8d48a;
  font-size: 12px;
  cursor: pointer;
  z-index: 2;
}
.nachhoer-pruef-leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(222, 200, 90, 0.3);
  border-radius: 12px;
  background: rgba(222, 200, 90, 0.06);
  font-size: 13px;
  color: rgba(214, 226, 238, 0.9);
}
.nachhoer-pruef-leiste button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.nachhoer-pruef-passt {
  border-color: rgba(122, 199, 167, 0.5) !important;
  color: #bfe6d6 !important;
}
.nachhoer-pruef-text {
  min-width: 0;
}
.nachhoer-werk-tools {
  display: grid;
  gap: 8px;
  padding: 6px 12px 10px 50px;
}
.nachhoer-grenzbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nachhoer-grenzzeit {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 52px;
}
.nachhoer-grenzzeit.rechts {
  text-align: right;
}
.nachhoer-grenztrack {
  position: relative;
  flex: 1;
  height: 20px;
  border-radius: 10px;
  background: rgba(214, 226, 238, 0.07);
}
.nachhoer-grenzspanne {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 4px;
  background: rgba(122, 199, 167, 0.35);
  pointer-events: none;
}
.nachhoer-griff {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 14px;
  margin-left: -7px;
  padding: 0;
  border: 1px solid rgba(122, 199, 167, 0.7);
  border-radius: 7px;
  background: #cfe6da;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.nachhoer-menue-knopf {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.nachhoer-menue {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nachhoer-menue button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}


/* V364: Player-Zugang aus der Setlist-Qualitaet. */
.setlist-quality-player-btn {
  border-color: rgba(122, 199, 167, 0.5) !important;
  background: rgba(122, 199, 167, 0.1) !important;
  color: #bfe6d6 !important;
  font-weight: 700;
}


/* V365: ziehbare Grenz-Stege direkt auf der Timeline. */
.nachhoer-timeline-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
.nachhoer-timeline-griff::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #cfe6da;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.nachhoer-timeline-zeit {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.95);
  border: 1px solid rgba(122, 199, 167, 0.4);
  color: #cfe6da;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 4;
}
.nachhoer-segmente {
  overflow: visible;
}


/* ===== V366: Konzert-Timeline nach Giottos Skizze ==================== */
.nachhoer-segmente {
  height: 38px;
  margin-top: 22px;
  border-radius: 6px;
  background: rgba(214, 226, 238, 0.05);
}
.nachhoer-skala {
  position: absolute;
  top: -18px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nachhoer-skala.links { left: 0; }
.nachhoer-skala.rechts { right: 0; }
.nachhoer-segment {
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 11px;
  border-left: 1px solid rgba(8, 12, 18, 0.9);
  background: rgba(78, 138, 109, 0.24);
}
.nachhoer-segment:first-of-type {
  border-left: 0;
}
.nachhoer-playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: #f2f6f4;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 4;
}


/* V367: Timeline kollabierte in der zentrierenden Buehne — volle Breite
   erzwingen (absolute Kinder geben einem Block keine Breite). */
.nachhoer-segmente {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  position: relative;
}


/* V368: Grenz-Zeiten unter der Timeline. */
.nachhoer-segmente {
  margin-bottom: 20px;
}
.nachhoer-grenz-label {
  position: absolute;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}


/* ===== V369: Korrektur-Fenster mit 3/5/7 Stuecken ==================== */
.nachhoer-korrektur-fenster {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px 26px;
  border: 1px solid rgba(214, 226, 238, 0.14);
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.55);
}
.nachhoer-kf-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.nachhoer-kf-kopf strong {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nachhoer-kf-zu {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.nachhoer-kf-timeline {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border-radius: 6px;
  background: rgba(214, 226, 238, 0.05);
}


/* ===== V371: Detail-Player — eigenes Fenster fuer Grenz-Chirurgie ==== */
.detail-player-dialog {
  width: min(860px, 94vw);
}
.detail-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-right: 30px;
}
.detail-kopf h2 {
  margin: 0;
  font-size: 17px;
}
.detail-kopf small {
  color: var(--muted);
}
.detail-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 26px;
}
#detailPlayBtn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.12);
  color: #d3efe2;
  font-size: 17px;
}
#detailZeit {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-size: 14px;
}
.detail-transport [data-detail-aktion="vorschlagen"] {
  margin-left: auto;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(122, 199, 167, 0.4);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.08);
  color: #bfe6d6;
  font-size: 12px;
  font-weight: 700;
}
.detail-timeline {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  border-radius: 6px;
  background: rgba(214, 226, 238, 0.05);
  margin-bottom: 24px;
}
.detail-timeline .nachhoer-segment.is-pause {
  background: rgba(150, 165, 182, 0.16);
  color: rgba(190, 205, 220, 0.6);
  font-style: italic;
}
.nachhoer-timeline-griff.is-gewaehlt::before {
  background: #7ac7a7;
  width: 4px;
}
.nachhoer-timeline-griff.is-geaendert::before {
  background: #e8d48a;
}
.detail-punkt {
  position: absolute;
  top: -9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  padding: 0;
  border: 2px solid rgba(8, 12, 18, 0.9);
  border-radius: 50%;
  background: #e8d48a;
  cursor: pointer;
  z-index: 5;
}
.detail-fein {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 226, 238, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.detail-fein-label {
  font-size: 13px;
  color: var(--muted);
}
.detail-fein-label strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.detail-fein-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-fein-knoepfe button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#detailPunktBtn {
  border-color: rgba(232, 212, 138, 0.5) !important;
  color: #e8d48a !important;
}
.detail-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.detail-aktionen button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.detail-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
}
#detailUebernehmenBtn {
  border: 1px solid rgba(122, 199, 167, 0.55);
  background: rgba(122, 199, 167, 0.14);
  color: #d3efe2;
  font-weight: 750;
}


/* V372: grobe Wellenform hinter der Detail-Timeline. */
.detail-welle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.detail-timeline .nachhoer-segment {
  background: rgba(78, 138, 109, 0.18);
}
.detail-timeline .nachhoer-segment.is-auswahl {
  background: rgba(122, 199, 167, 0.3);
}


/* V374: klare Trennung — Anhoer-Player ruhig, Chirurg vollstaendig. */
.nachhoer-verdacht {
  display: block;
  padding: 0 12px 5px 50px;
  color: #e8d48a;
  font-size: 11px;
}
.detail-karte-host {
  margin: 4px 0 8px;
}
.detail-karte-host .nachhoer-karte {
  margin: 0;
}


/* V375: Werkzeug-Symbol + Detailplayer-Knopf. */
.nachhoer-werkzeug-symbol {
  width: 54px;
  height: 54px;
  min-width: 54px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nachhoer-werkzeug-symbol svg {
  width: 28px;
  height: 28px;
}
.nachhoer-werkzeug-symbol.is-aktiv {
  border-color: rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.1);
  color: #bfe6d6;
}
.nachhoer-knopf-icon {
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
}
#nachhoerDetailBtn {
  display: inline-flex;
  align-items: center;
}


/* V376: Dauer-Spalte neben den Titeln, Markierung volle Breite,
   Hover an Herz/Brille/Download endgueltig aus. */
.nachhoer-dauer {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nachhoer-liste li {
  width: 100%;
  box-sizing: border-box;
}@media (hover: hover) {
.nachhoer-herz:hover,
.nachhoer-brille:hover,
.nachhoer-export:hover,
.nachhoer-export:hover:not([disabled]) {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(150, 165, 182, 0.45) !important;
  transform: none !important;
}}@media (hover: hover) {
.nachhoer-herz.is-aktiv:hover {
  color: #e08aa0 !important;
}}@media (hover: hover) {
.nachhoer-brille.is-aktiv:hover {
  color: #7ac7a7 !important;
}}


/* V378: Rueckgaengig/Wiederherstellen + Neues-Stueck-Menue. */
.detail-verlauf-knopf {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}
.detail-verlauf-knopf[disabled] {
  opacity: 0.3;
}
.detail-neustueck {
  position: relative;
  display: inline-block;
}
.detail-neu-menue {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 6;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 170px;
}
.detail-neu-menue button {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border-color: transparent;
}


/* V379: Verlauf-Pfeile kraeftiger, Status im Fenster, Skip im Detail. */
.detail-verlauf-knopf {
  color: var(--ink);
  border-color: rgba(214, 226, 238, 0.4);
  font-size: 18px;
}
.detail-verlauf-knopf[disabled] {
  opacity: 0.35;
}
.detail-status {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(222, 200, 90, 0.3);
  background: rgba(222, 200, 90, 0.07);
  color: rgba(232, 220, 170, 0.95);
  font-size: 13px;
}
.detail-transport .nachhoer-skip {
  width: 38px;
  height: 38px;
  min-width: 38px;
  font-size: 14px;
}


/* V381: klassische Undo/Redo-Pfeile rechts in der Bibliotheks-Werkzeug-
   zeile + Live-Timer streckt sich ueber die volle Breite. */
.library-verlauf-gruppe {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.library-verlauf-knopf {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid rgba(214, 226, 238, 0.28);
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.library-verlauf-knopf svg {
  width: 17px;
  height: 17px;
}
.library-verlauf-knopf[disabled] {
  opacity: 0.32;
}
.live-overview-row {
  width: 100%;
}
.live-tracker-shell,
.live-tracker-shell .live-progress-tracker,
.live-tracker-shell .live-progress-tracker.is-large {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
}


/* V383: aktive Brille ohne Kasten — nur das gruene Symbol; ebenso kein
   Fokus-Feld auf Herz/Brille/Export. */
.nachhoer-brille.is-aktiv,
.nachhoer-herz.is-aktiv,
.nachhoer-herz:focus,
.nachhoer-brille:focus,
.nachhoer-export:focus,
.nachhoer-herz:focus-visible,
.nachhoer-brille:focus-visible,
.nachhoer-export:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: transparent !important;
}


/* V385: Neues-Stueck-Karte im Detail-Player. */
.detail-neu-karte input[type="search"],
.detail-neu-karte input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.5);
  color: var(--ink);
}
.detail-neu-karte .nachhoer-karte-neu {
  display: flex;
  gap: 8px;
  align-items: center;
}
.detail-neu-karte .nachhoer-karte-neu input {
  flex: 1;
}


/* ===== V386: Detail-Player groesser, mittig, Trennlinien statt Kaesten */
.detail-player-dialog {
  width: min(920px, 94vw);
}
.detail-player-dialog form {
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 680px);
}
.detail-transport {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 10px 0 32px;
  gap: 12px;
}
.detail-transport #detailZeit {
  justify-self: start;
}
.detail-transport-mitte {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: center;
}
.detail-transport [data-detail-aktion="vorschlagen"] {
  margin-left: 0;
  justify-self: end;
}
.detail-timeline {
  height: 56px;
  margin-bottom: 30px;
}
.detail-fein {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(214, 226, 238, 0.1);
  padding: 14px 2px 12px;
  margin-bottom: 0;
}
.detail-aktionen {
  border-top: 1px solid rgba(214, 226, 238, 0.1);
  padding: 14px 2px 12px;
  margin-bottom: 0;
}
.detail-status {
  border: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(222, 200, 90, 0.25);
  padding: 12px 2px;
  margin: 0;
}
.detail-fuss {
  border-top: 1px solid rgba(214, 226, 238, 0.1);
  padding-top: 14px;
  margin-top: auto;
}
.detail-verlauf-knopf {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-color: transparent;
}
.detail-verlauf-knopf svg,
.library-verlauf-knopf svg {
  width: 20px;
  height: 20px;
}


/* V390: Vorlauf-Warnband — sofort sichtbar, ohne Schalter. */
.nachhoer-vorlauf-hinweis {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(222, 200, 90, 0.4);
  border-radius: 12px;
  background: rgba(222, 200, 90, 0.09);
  color: #ecd9a0;
  font-size: 13px;
}
.nachhoer-vorlauf-hinweis button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(222, 200, 90, 0.5);
  border-radius: 9px;
  background: transparent;
  color: #ecd9a0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}


/* V391: Timeline scrubbt — Zeiger zeigen, dass man ziehen kann. */
.detail-timeline,
.detail-timeline .nachhoer-segment {
  cursor: ew-resize;
}


/* ===== V394: Scan-Modus — Bestandsaufnahme der ganzen Aufnahme ====== */
.nachhoer-scan-bericht {
  display: grid;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid rgba(122, 199, 167, 0.3);
  border-radius: 12px;
  background: rgba(122, 199, 167, 0.05);
  font-size: 13px;
}
.nachhoer-scan-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.nachhoer-scan-abschnitt {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nachhoer-scan-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(214, 226, 238, 0.07);
}
.nachhoer-scan-bericht button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}


/* V397: Werkzeugzeile bricht um statt Knopftexte abzuschneiden. */
.nachhoer-werkzeuge-box.is-offen .nachhoer-werkzeuge-knoepfe {
  flex-wrap: wrap;
}
.nachhoer-werkzeuge-box.is-offen .nachhoer-werkzeuge-knoepfe button {
  flex: 1 1 auto;
  min-width: fit-content;
}


/* V398: Stueckgrenzen kraeftiger markiert. */
.nachhoer-timeline-griff::before {
  width: 5px;
  margin-left: -2.5px;
  background: #f4f8f6;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}
.nachhoer-timeline-griff.is-gewaehlt::before {
  width: 6px;
  margin-left: -3px;
  background: #7ac7a7;
  box-shadow: 0 0 8px rgba(122, 199, 167, 0.6);
}
.nachhoer-timeline-griff.is-geaendert::before {
  width: 6px;
  margin-left: -3px;
}


/* V400: Scan-Diagnosezeile. */
.nachhoer-scan-diagnose span {
  color: var(--muted);
  font-size: 12px;
}


/* V404: Eindeutigkeits-Angabe im Scan-Bericht. */
.nachhoer-scan-score {
  color: #bfe6d6;
  font-style: normal;
  font-size: 11px;
  margin-left: 6px;
}


/* V407: Rauschfilter-Schalter. */
.nachhoer-filter-knopf {
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.nachhoer-filter-knopf.is-aktiv {
  border-color: rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.12);
  color: #bfe6d6;
}


/* ===== V411: Detail-Timeline zweizeilig — Bloecke oben, Welle darunter,
   Stege und Playhead laufen durch beide Zeilen. Gruene Linie entfernt. */
.detail-timeline {
  height: 92px;
}
.detail-timeline .nachhoer-segment {
  top: 2px;
  bottom: auto;
  height: 28px;
}
.detail-timeline .detail-welle {
  top: 34px;
  height: calc(100% - 36px);
  border-top: 1px solid rgba(214, 226, 238, 0.08);
}
.detail-timeline .nachhoer-segment.is-pause {
  font-style: italic;
}


/* ===== V415: Detail-Timeline dreispurig — Setlist / Aufnahme /
   Klavier (gerechnet), gleich hoch, mit Luft und Beschriftung. */
.detail-timeline {
  height: 208px;
  background: transparent;
}
.detail-timeline .nachhoer-segment {
  top: 16px;
  bottom: auto;
  height: 44px;
  font-size: 13px;
  font-weight: 650;
  border-radius: 6px;
  border-left: 2px solid rgba(8, 12, 18, 0.9);
  background: rgba(78, 138, 109, 0.22);
}
.detail-timeline .detail-welle {
  top: 82px;
  height: 44px;
  border-top: 0;
  border-radius: 6px;
  background: rgba(214, 226, 238, 0.05);
}
.detail-instrument {
  position: absolute;
  left: 0;
  width: 100%;
  top: 148px;
  height: 44px;
  border-radius: 6px;
  background: rgba(214, 226, 238, 0.05);
  pointer-events: none;
}
.detail-spur-label {
  position: absolute;
  left: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
}
.detail-spur-1 { top: 3px; }
.detail-spur-2 { top: 69px; }
.detail-spur-3 { top: 135px; }

/* ===== V416: Paket 31 "Klingt wie" — Klang-Vergleich in der Karte ==== */
.detail-klingt-wie {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.detail-klingt-wie > button[data-detail-klingt-wie] {
  justify-self: start;
  background: rgba(122, 199, 167, 0.1);
  border: 1px solid rgba(122, 199, 167, 0.4);
  color: #bfe6d6;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 650;
}
#detailKlingtWieHost {
  display: grid;
  gap: 6px;
}

/* ===== V417: Klavier-Ohr-Testknopf im Detailplayer ==================== */
#detailOhrBtn.is-aktiv {
  background: rgba(122, 199, 167, 0.16);
  border-color: rgba(122, 199, 167, 0.55);
  color: #bfe6d6;
}

/* ===== V418: Sichtungs-Einspielung (Paket 31 — Kanal) ================ */
.review-record-btn.has-asset {
  color: #7ac7a7;
  border-color: rgba(122, 199, 167, 0.55);
}
.review-record-btn.is-recording {
  color: #e08a8a;
  border-color: rgba(224, 138, 138, 0.65);
  animation: einspielPuls 1.2s ease infinite;
}
@keyframes einspielPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 138, 138, 0); }
  50% { box-shadow: 0 0 0 5px rgba(224, 138, 138, 0.25); }
}
.review-einspiel-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  color: #bfe6d6;
  font-size: 14px;
}
.review-einspiel-zeile button {
  background: rgba(122, 199, 167, 0.1);
  border: 1px solid rgba(122, 199, 167, 0.4);
  color: #bfe6d6;
  border-radius: 8px;
  padding: 4px 12px;
}

/* ===== V419: Player-Feinschliff (Giotto 03.09.) ====================== */
/* Stueck/Konzert-Regler UEBER dem Zeitstrahl, Werkzeug direkt daneben. */
.nachhoer-regler-zeile {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  align-self: stretch;
}
/* Werkzeugsymbol: kein Rahmen, gefuellt, technischer grauer Schatten. */
.nachhoer-werkzeug-symbol {
  border: none !important;
  background: transparent !important;
  border-radius: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  color: rgba(150, 165, 182, 0.7);
}
.nachhoer-werkzeug-symbol svg {
  width: 30px;
  height: 30px;
}@media (hover: hover) {
.nachhoer-werkzeug-symbol:hover {
  color: rgba(214, 226, 238, 0.9);
}}
.nachhoer-werkzeug-symbol.is-aktiv {
  color: #7ac7a7;
}

/* ===== V420: Scan-Bericht scrollbar + PDF-Kacheln in der Werksuche === */
/* 700-Funde-Berichte sprengten das Fenster — der Bericht scrollt jetzt
   in sich, die Stückliste darunter bleibt erreichbar. */
.nachhoer-scan-bericht {
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nachhoer-treffer {
  position: relative;
}
.nachhoer-treffer .nachhoer-treffer-pdf {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: #bfe6d6;
  border: 1px solid rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ===== V421: Detail-Feinschliffe ===================================== */
/* Setlist-Nummer vor dem Stuecknamen in der Timeline-Kachel. */
.nachhoer-segment .nachhoer-segment-nr {
  font-weight: 800;
  opacity: 0.75;
  margin-right: 5px;
}
/* Verlaufs-Pfeile: duenn, technisch, Bogen nach oben. */
.detail-verlauf-knopf svg {
  width: 22px;
  height: 22px;
}

/* ===== V422: End-Griff + Pause-Knopf ================================= */
.nachhoer-timeline-griff.is-ende::before {
  background: rgba(222, 200, 90, 0.75);
}
.detail-neu-pause {
  justify-self: start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 10px;
  padding: 7px 14px;
}

/* ===== V423: Paket 32 — drei Schutzebenen + Feinschliffe ============= */
/* Regler + Werkzeug in der Transport-Zeile, rechtsbuendig. */
.nachhoer-transport {
  position: relative;
}
.nachhoer-transport-rechts {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}
.nachhoer-transport-rechts .nachhoer-regler button {
  font-size: 11px;
  padding: 4px 10px;
}
@media (max-width: 640px) {
  .nachhoer-transport-rechts {
    position: static;
    transform: none;
    margin-left: auto;
  }
}
/* Werkzeugschluessel: deutlich groesser, runder leichter grauer Rahmen. */
.nachhoer-werkzeug-symbol {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border: 1px solid rgba(150, 165, 182, 0.35) !important;
  border-radius: 50%;
  background: transparent !important;
}
.nachhoer-werkzeug-symbol svg {
  width: 40px;
  height: 40px;
}
/* Kopf-Aktionen: vier Knoepfe duerfen umbrechen. */
.nachhoer-kopf-aktionen {
  flex-wrap: wrap;
  justify-content: flex-end;
}
#nachhoerUebernehmenBtn.is-bereit {
  background: rgba(122, 199, 167, 0.16);
  border-color: rgba(122, 199, 167, 0.6);
  color: #bfe6d6;
  font-weight: 700;
}
#nachhoerUebernehmenBtn:disabled {
  opacity: 0.45;
}
#nachhoerPruefungBtn.is-geprueft {
  background: rgba(122, 199, 167, 0.12);
  border-color: rgba(122, 199, 167, 0.5);
  color: #7ac7a7;
}
/* Gruene Pruef-Pille auf der Konzertkachel (Vermerk-Vorbild). */
.archive-row-geprueft {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 650;
  color: #7ac7a7;
  border: 1px solid rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.1);
  white-space: nowrap;
}
:root[data-theme="dark"] .archive-row-geprueft {
  color: #8fd7b7;
  border-color: rgba(122, 199, 167, 0.5);
}

/* ===== V424: Fussleiste + Kollisionsfix rechts (Giotto 03.09.) ======= */
/* Transport auf volle Breite — die rechte Gruppe (Regler + Werkzeug)
   richtet sich am Dialograand aus, nicht mehr am Knopf-Cluster. */
.nachhoer-buehne .nachhoer-transport {
  width: 100%;
  justify-self: stretch;
}
/* Feste Aktions-Fussleiste unter der Setlist — immer sichtbar, gerahmt. */
.nachhoer-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 10px;
  margin-top: 4px;
}
.nachhoer-fuss button {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== V445: Einspiel-Player v2 (roter Punkt, Panel, PDF-tauglich) === */
.einspiel-punkt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(214, 75, 75, 0.7);
  background: transparent;
  display: inline-block;
}
.einspiel-punkt.voll {
  background: #d64b4b;
  border-color: #d64b4b;
}
.einspiel-punkt.gross {
  width: 20px;
  height: 20px;
  background: #d64b4b;
  border-color: #d64b4b;
  box-shadow: 0 0 0 3px rgba(214, 75, 75, 0.22);
}
.einspiel-punkt.pulsierend {
  animation: einspielPuls 1.2s ease infinite;
}
.einspiel-haken {
  color: #7ac7a7;
  font-weight: 800;
  font-size: 11px;
  margin-left: 2px;
}
.review-record-btn {
  gap: 1px;
}
.review-record-btn.is-recording {
  border-color: rgba(214, 75, 75, 0.65) !important;
}
/* Panel: schwebt oben-mittig — liegt damit auch ueber dem Noten-PDF. */
.einspiel-panel {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  width: min(480px, calc(100vw - 24px));
}
.einspiel-karte {
  background: #142631;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 10px;
}
.einspiel-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.einspiel-fueller { flex: 1; }
.einspiel-erklaerung {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.einspiel-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  color: #eaa;
}
.einspiel-knopf {
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 10px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 13px;
}
.einspiel-knopf.rot {
  background: rgba(214, 75, 75, 0.12);
  border-color: rgba(214, 75, 75, 0.5);
  color: #f0b1b1;
}
.einspiel-knopf.gruen {
  background: rgba(122, 199, 167, 0.14);
  border-color: rgba(122, 199, 167, 0.55);
  color: #bfe6d6;
  font-weight: 700;
}
.einspiel-audio {
  width: 100%;
  height: 36px;
}

/* ===== V446: Einspiel-Player Feinschliff ============================== */
.einspiel-punkt.leer {
  background: transparent;
  border-color: rgba(150, 165, 182, 0.55);
  box-shadow: none;
}
.einspiel-punkt.klein {
  width: 12px;
  height: 12px;
}
.einspiel-karte {
  padding: 18px 20px;
  gap: 12px;
}
.einspiel-symbolknopf {
  width: 42px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(180, 195, 210, 0.85);
}
.einspiel-symbolknopf svg {
  width: 20px;
  height: 20px;
}
.einspiel-stopp-symbol {
  width: 12px;
  height: 12px;
  background: currentColor;
  border-radius: 2px;
  display: inline-block;
}
.einspiel-player {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.einspiel-play {
  width: 46px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.einspiel-play svg {
  width: 20px;
  height: 20px;
}
.einspiel-strahl {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(150, 165, 182, 0.25);
  cursor: pointer;
  overflow: hidden;
}
.einspiel-strahl-fuellung {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: #7ac7a7;
}

/* ===== V447: Einspiel-Streifen im PDF (Tesafilm) ===================== */
.einspiel-streifen {
  background: rgba(16, 30, 41, 0.96);
  border-bottom: 1px solid rgba(122, 158, 183, 0.25);
  padding: 6px 12px;
}
.einspiel-streifen-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.einspiel-knopf.klein {
  padding: 5px 10px;
  font-size: 12px;
  height: 32px;
}
.einspiel-knopf.klein.einspiel-play,
.einspiel-knopf.klein.einspiel-symbolknopf {
  width: 36px;
  padding: 0;
}
.einspiel-knopf.klein svg {
  width: 16px;
  height: 16px;
}
.einspiel-streifen .einspiel-strahl {
  max-width: 260px;
}
.einspiel-streifen-zu {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  padding: 0 4px;
  cursor: pointer;
}
.einspiel-streifen-info {
  font-size: 12px;
  color: #7ac7a7;
}

/* ===== V449: Tesafilm-Streifen ultrakompakt ========================== */
.einspiel-streifen {
  background: rgba(8, 14, 20, 0.94);
  border-bottom: none;
  border-radius: 8px;
  margin: 4px 12px 0;
  padding: 3px 8px;
  width: fit-content;
}
.einspiel-streifen-zeile {
  gap: 6px;
  flex-wrap: nowrap;
}
.einspiel-mini {
  background: none;
  border: none;
  color: rgba(200, 214, 228, 0.85);
  width: 28px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.einspiel-mini svg {
  width: 15px;
  height: 15px;
}
.einspiel-mini.gruen {
  color: #7ac7a7;
  font-weight: 800;
  font-size: 15px;
}
.einspiel-mini.zu {
  color: rgba(150, 165, 182, 0.7);
  font-size: 16px;
}
.einspiel-timer.mini {
  font-size: 12px;
}
.einspiel-streifen .einspiel-punkt.klein {
  width: 10px;
  height: 10px;
}
.einspiel-streifen .einspiel-stopp-symbol {
  width: 10px;
  height: 10px;
}

/* ===== V450: Aufklapp-Stern in der PDF-Leiste ======================== */
.pdf-sterne-knopf {
  background: none;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 9px;
  color: rgba(200, 214, 228, 0.85);
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.pdf-sterne-knopf.hat-wert {
  color: #e8d48a;
  border-color: rgba(222, 200, 90, 0.4);
}
.pdf-sterne-offen .classification-rating-row button {
  padding: 4px 7px;
  font-size: 12px;
}

/* ===== V451: Einspiel-Chip wird zum Inline-Streifen (eine Zeile) ===== */
.pdf-einspiel-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(8, 14, 20, 0.94);
  border: 1px solid rgba(122, 158, 183, 0.25);
  border-radius: 9px;
  padding: 6px 11px;
  color: rgba(200, 214, 228, 0.85);
}
.einspiel-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(8, 14, 20, 0.94);
  border: 1px solid rgba(122, 158, 183, 0.25);
  border-radius: 9px;
  padding: 2px 6px;
  white-space: nowrap;
}
.einspiel-inline .einspiel-mini {
  width: 26px;
  height: 24px;
}

/* ===== V452: PDF-Kopf einzeilig, randlos, Werk-Pfeile am Rand ======== */
/* Im Sichtungs-Modus ersetzt die Werkzeugzeile den Dialog-Kopf. */
.pdf-viewer-dialog.is-review-kopf .pdf-viewer-bar {
  display: none;
}
.pdf-review-toolbar-inner {
  align-items: center;
  gap: 10px;
}
.pdf-review-fueller { flex: 1; }
.pdf-review-x {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  padding: 2px 8px;
  cursor: pointer;
}
/* Randlos: alle Chips in der PDF-Zeile ohne Umrandung. */
.pdf-review-toolbar .review-media-btn,
.pdf-review-toolbar .pdf-sterne-knopf,
.pdf-review-toolbar .pdf-einspiel-chip,
.pdf-review-toolbar .einspiel-inline {
  border: none !important;
  background: none !important;
}
.pdf-review-toolbar .einspiel-inline {
  background: rgba(8, 14, 20, 0.6) !important;
  border-radius: 9px;
}
/* Werk-Pfeile seitlich, vertikal mittig auf dem PDF. */
.pdf-viewer-shell { position: relative; }
.pdf-werk-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  background: rgba(16, 30, 41, 0.55);
  border: none;
  color: rgba(214, 226, 238, 0.7);
  font-size: 30px;
  line-height: 1;
  padding: 14px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.pdf-werk-pfeil.links { left: 6px; }
.pdf-werk-pfeil.rechts { right: 6px; }
.pdf-werk-pfeil:disabled { opacity: 0.25; }

/* ===== V453: Spielqualitaets-Kacheln kompakt (iPad) ================== */
.review-list-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 10px 14px;
}
.review-list-kopfzeile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-list-kopfzeile .review-list-open {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.review-list-kopfzeile .review-media-actions {
  flex-wrap: nowrap;
}
/* Sterne immer in EINER Linie. */
.review-list-quality-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.review-list-quality-row .classification-rating-row {
  flex-wrap: nowrap;
}
.review-list-quality-row .classification-rating-row button {
  padding: 3px 6px;
  font-size: 11px;
  white-space: nowrap;
}
/* Play-Chip mit Datum, wenn eine Einspielung existiert. */
.review-einspiel-play {
  gap: 4px;
  color: #7ac7a7;
}
.review-einspiel-play svg {
  width: 14px;
  height: 14px;
}
.review-einspiel-play small {
  font-size: 10.5px;
  color: var(--muted);
}

/* ===== V457: Einspiel-Verlauf (frühere Versionen) ==================== */
.einspiel-verlauf {
  border-top: 1px solid rgba(122, 158, 183, 0.18);
  padding-top: 8px;
  display: grid;
  gap: 6px;
}
.einspiel-verlauf-knopf {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12.5px;
  text-align: left;
  padding: 2px 0;
  cursor: pointer;
}
.einspiel-verlauf-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ===== V471: PDF-Aufnahmestreifen — groesser, gerahmt, mittig ========= */
/* Giottos Feedback 03.09.: Symbole doppelt so gross (Kacheln fehlen im
   PDF als Anker), der Streifen bekommt Abstand + feinen grauen Rahmen
   und sitzt mittig ueber dem PDF. */
.pdf-review-toolbar-inner { position: relative; }
.pdf-review-toolbar .einspiel-inline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: rgba(8, 14, 20, 0.96) !important;
  border: 1px solid rgba(150, 165, 182, 0.4) !important;
  border-radius: 12px;
  padding: 4px 12px;
  gap: 10px;
}
.einspiel-inline .einspiel-mini { width: 44px; height: 40px; }
.einspiel-inline .einspiel-mini svg { width: 26px; height: 26px; }
.einspiel-inline .einspiel-mini.gruen { font-size: 24px; }
.einspiel-inline .einspiel-mini.zu { font-size: 26px; }
.einspiel-inline .einspiel-punkt.klein { width: 20px; height: 20px; }
.einspiel-inline .einspiel-stopp-symbol { width: 18px; height: 18px; }
.einspiel-inline .einspiel-timer.mini { font-size: 16px; }
.einspiel-inline .einspiel-streifen-info { font-size: 18px; }
.pdf-einspiel-chip .einspiel-punkt.klein { width: 20px; height: 20px; }
.pdf-einspiel-chip svg { width: 24px; height: 24px; }
/* Aufnahme laeuft: Farben invertiert — Kachel rot, Inhalt weiss. */
.einspiel-inline.einspiel-inline-aufnahme {
  background: #c9403f !important;
  border-color: #c9403f !important;
}
.einspiel-inline.einspiel-inline-aufnahme .einspiel-punkt {
  background: #fff;
  border-color: #fff;
}
.einspiel-inline.einspiel-inline-aufnahme .einspiel-timer,
.einspiel-inline.einspiel-inline-aufnahme .einspiel-mini { color: #fff; }

/* ===== V473: Style Radar — Auswahl wie im Finder, Auswahl-Spalte ===== */
.style-radar-dialog { width: min(880px, 96vw); }
.style-radar-warum { margin: 6px 0 4px; }
.style-radar-wie { font-size: 12.5px; margin: 0 0 10px; }
.style-radar-controls input[type="search"] { flex: 1 1 220px; min-width: 150px; }
.style-radar-spalten {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  align-items: start;
}
.style-radar-seite {
  border-left: 1px solid rgba(127, 127, 127, 0.2);
  padding-left: 12px;
  max-height: 46vh;
  overflow-y: auto;
}
.style-radar-seite h3 {
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
#styleRadarAnzahl {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(124, 147, 242, 0.22);
  color: inherit;
}
.style-radar-row { cursor: pointer; user-select: none; -webkit-user-select: none; }
.style-radar-row.is-selected { background: rgba(124, 147, 242, 0.24); }@media (hover: hover) {
.style-radar-row.is-selected:hover { background: rgba(124, 147, 242, 0.3); }}
/* Haekchen nur auf Touch-Geraeten (iPad) — am Rechner waehlt die Maus. */
.style-radar-haken { display: none; }
@media (pointer: coarse) {
  .style-radar-haken { display: inline-block; }
  .style-radar-hinweis { display: none; }
}
.style-radar-hinweis { font-size: 12px; margin: 4px 0 0; }
.style-radar-auswahl { display: flex; flex-direction: column; gap: 2px; font-size: 13px; margin-bottom: 8px; }
.style-radar-auswahl-zeile { display: flex; align-items: center; gap: 6px; }
.style-radar-auswahl-zeile span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-radar-auswahl-zeile button { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 0 4px; }
.style-radar-pool { margin-bottom: 12px; }
.style-radar-pool-chip {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.18);
}
@media (max-width: 740px) {
  .style-radar-spalten { grid-template-columns: 1fr; }
  .style-radar-seite { border-left: none; padding-left: 0; max-height: none; }
}

/* ===== V474: Rundumschlag B+C+D2 ==================================== */
/* B: Werke-einordnen-Kopf — Knopf auf Titelhoehe, Zaehler darunter,
   grosszuegigere Luft. */
.work-classification-hero { padding: 22px 24px; gap: 18px; }
.classification-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* C1: „Setlist erstellen" — deckender Ring um den Sticky-Knopf, damit
   beim Scrollen keine Schrift an den Raendern durchhuscht (iPad). */
#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-create-btn {
  border: 1px solid rgba(143, 217, 173, 0.45);
  box-shadow:
    0 0 0 16px var(--panel),
    0 -22px 18px -8px var(--panel);
}
@media (max-width: 900px) {
  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-results {
    padding-bottom: 96px;
  }
}

/* C2: Manueller Modus im iPad-Hochformat — Sammlungen und „Alle
   Stuecke" nebeneinander (Stuecke deutlich breiter), Setlist-Kasten
   darunter in voller Breite. Telefone behalten die Stapelung. */
@media (min-width: 700px) and (max-width: 900px) {
  .manual-setlist-editor-layout {
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 44vh) minmax(0, 1fr);
    height: auto;
    gap: 14px 12px;
    padding: 4px 6px 10px;
  }
  .manual-setlist-setlist-panel {
    margin-top: 4px;
    border-top: 3px solid rgba(122, 158, 183, 0.35);
  }
  .manual-setlist-toolbar-host { grid-column: 1 / -1; grid-row: 1; }
  .manual-setlist-library { grid-column: 1; grid-row: 2; max-height: 44vh; overflow-y: auto; }
  .manual-setlist-works-panel { grid-column: 2; grid-row: 2; max-height: 44vh; }
  .manual-setlist-setlist-panel { grid-column: 1 / -1; grid-row: 3; max-height: none; min-height: 40vh; }
}

/* C3: „Alle Stuecke"-Zeilen so kompakt wie die Sammlungszeilen, lange
   Titel einzeilig mit Auslassung. */
.manual-setlist-work-row { min-height: 30px; padding: 2px 6px 2px 8px; }
.manual-setlist-work-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* C4: Vorbereitungs-Knoepfe leicht eckig statt Pille. */
.concert-prep-magic-toggle { border-radius: 10px; }

/* D2: Magic Sammlung als KI-Werkzeug — Bernstein-Schimmer + Kopfstapel. */
.style-collection-builder-hero {
  background:
    radial-gradient(130% 160% at 18% 0%, rgba(222, 179, 92, 0.16), rgba(222, 179, 92, 0.04) 55%, transparent 80%);
  border: 1px solid rgba(222, 179, 92, 0.28);
  border-radius: var(--radius-panel);
}
.style-collection-magic-titel { margin: 0; }
.style-collection-magic-unter {
  display: block;
  margin: 2px 0 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

/* Detail-Player-Zugang hervorheben: gruener Schimmer; Werkzeug-Kreis
   wirklich rund. */
.nachhoer-werkzeug-symbol { border-radius: 50%; }
#nachhoerDetailBtn {
  border: 1px solid rgba(122, 199, 167, 0.5);
  background: linear-gradient(rgba(122, 199, 167, 0.14), rgba(122, 199, 167, 0.08));
  box-shadow: 0 0 14px rgba(122, 199, 167, 0.22);
}

/* ===== V477: Smart-Import-Player A1 — Methodenleiste ================= */
.smart-import-methoden {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 24px 0;
}
.smart-import-methoden button {
  padding: 8px 14px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.smart-import-methoden button.is-active {
  border-color: rgba(122, 199, 167, 0.55);
  background: rgba(122, 199, 167, 0.14);
  color: var(--ink);
}
.smart-import-erklaerung {
  margin: 8px 0 0;
  padding: 0 24px;
  font-size: 12.5px;
}
/* Methoden-Umschaltung: Panels zeigen nur zur aktiven Methode; das
   eigene hidden-Attribut der Titellisten-Stufen (Eingabe/Ergebnis)
   behaelt Vorrang. */
.smart-import-shell [data-smart-import-panel] { display: none; }
.smart-import-shell[data-methode="titelliste"] [data-smart-import-panel="titelliste"],
.smart-import-shell[data-methode="liste"] [data-smart-import-panel="liste"],
.smart-import-shell[data-methode="zettel"] [data-smart-import-panel="zettel"],
.smart-import-shell[data-methode="foto"] [data-smart-import-panel="foto"],
.smart-import-shell[data-methode="pdf"] [data-smart-import-panel="pdf"] {
  display: flex;
  flex-direction: column;
}
.smart-import-shell [data-smart-import-panel][hidden] { display: none !important; }
.smart-import-startflaeche {
  align-items: flex-start;
  gap: 10px;
  padding-top: 20px;
}
.smart-import-start-btn {
  font-size: 15px;
  padding: 12px 20px;
}

/* ===== V478: Smart List Import (A2) — Vorschau-Tabelle =============== */
.smart-list-vorschau { overflow: auto; min-height: 0; margin-top: 10px; }
.smart-list-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.smart-list-tabelle th {
  text-align: left;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(122, 158, 183, 0.25);
}
.smart-list-tabelle td { padding: 3px 4px; border-bottom: 1px solid rgba(122, 158, 183, 0.1); }
.smart-list-tabelle input[type="text"] {
  width: 100%;
  min-width: 70px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 13px;
}
.smart-list-tabelle input[type="text"]:focus { border-color: rgba(122, 199, 167, 0.5); outline: none; }
.smart-list-tabelle input.is-unsicher {
  border-color: rgba(222, 179, 92, 0.6);
  background: rgba(222, 179, 92, 0.08);
}
.smart-list-tabelle td.smart-list-nummer input { max-width: 110px; font-variant-numeric: tabular-nums; }
.smart-list-tabelle tr.is-duplikat input { opacity: 0.55; }
.smart-list-trotzdem { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.smart-list-erweitert { margin-left: auto; font-size: 12px; }

/* ===== V480 (A3): Noten-Foto-Pruefform im Smart-Import-Player ======== */
.photo-work-einbettung { display: grid; gap: 10px; max-width: 480px; }

/* ===== V481: Intelligente Sammlungen — Regel-Dialog ================== */
.smart-collection-dialog { width: min(720px, 94vw); max-height: 85vh; }
.smart-collection-shell { display: flex; flex-direction: column; min-height: 0; max-height: 82vh; }
.smart-collection-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
}
.smart-collection-inhalt { overflow-y: auto; min-height: 0; display: grid; gap: 14px; padding: 4px 2px; }
.smart-collection-regeln-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.smart-collection-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.smart-collection-modus { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.smart-collection-regeln { display: grid; gap: 8px; }
.smart-collection-regel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid rgba(122, 158, 183, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}
.smart-collection-feld { min-width: 110px; font-weight: 700; font-size: 13.5px; }
.smart-collection-regel select, .smart-collection-regel input[type="number"], .smart-collection-regel input[type="text"] { min-height: 34px; }
.smart-collection-regel input[type="number"] { width: 84px; }
.smart-collection-entfernen { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 17px; cursor: pointer; padding: 2px 6px; }
.smart-collection-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smart-collection-chip {
  border: 1px solid rgba(122, 199, 167, 0.45);
  background: rgba(122, 199, 167, 0.12);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}
.smart-collection-tage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.smart-collection-hinzufuegen { position: relative; }
.smart-collection-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 220px;
  padding: 10px 12px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 2px;
}
.smart-collection-popover-kategorie { margin: 6px 0 2px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.smart-collection-popover button { text-align: left; background: none; border: none; color: var(--ink); padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }@media (hover: hover) {
.smart-collection-popover button:hover { background: rgba(122, 199, 167, 0.12); }}
.smart-collection-vorschau {
  border: 1px solid rgba(122, 158, 183, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
}
.smart-collection-fuss {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(122, 158, 183, 0.16);
}

/* ===== V487: Smart-Import-Feinschliff (Giotto 04.09.) ================ */
.smart-import-koerper {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.smart-import-methoden {
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.smart-import-dialog .smart-import-methoden button {
  flex: 0 0 auto;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  line-height: 1;
}
/* Erklaerfeld mit Trennstrich zum Arbeitsbereich darunter. */
.smart-import-erklaerung {
  margin: 0;
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.smart-import-erklaerung.is-neutral {
  font-size: 14px;
  padding: 22px 24px;
  border-bottom: none;
}
.smart-import-stage { flex: 0 0 auto; overflow: visible; }
.smart-import-stage#smartImportResultsStage { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* ===== V490: Intelligente Sammlungen — Struktur (Giotto 04.09.) ====== */
.smart-collection-name input {
  min-height: 46px;
  font-size: 15px;
}
.smart-collection-trenner {
  border: none;
  border-top: 1px solid rgba(122, 158, 183, 0.22);
  margin: 6px 0 10px;
}
.smart-collection-label {
  font-size: 15px;
  letter-spacing: 0.04em;
}
.smart-collection-modus-block {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.smart-collection-modus-label {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 700;
}
.smart-collection-modus-block select {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  font-weight: 650;
}
.smart-collection-add-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(122, 199, 167, 0.45);
  border-radius: 10px;
  background: rgba(122, 199, 167, 0.1);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
/* Regel-Zeile: Entfernen-x fest oben rechts, rutscht beim Umbruch nicht. */
.smart-collection-regel { position: relative; padding-right: 36px; }
.smart-collection-entfernen {
  position: absolute;
  top: 6px;
  right: 6px;
  margin-left: 0;
}

/* ===== V492: Einordnen-Feinschliff (Giotto 04.09.) =================== */
/* Zaehler "57 von 714 vollstaendig" als abgegrenzte Kachel. */
.classification-progress {
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 14px;
}
.classification-hoeranspruch-hint { margin: 0 0 6px; font-size: 12.5px; }
/* Groessere Lupe in den Suchfeldern der Werk-Auswahl. */
.work-suggestion-composer-search span,
.work-suggestion-search label > span:first-child { font-size: 18px; }
.style-collection-feinschliff-zeile {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.style-collection-feinschliff-zeile label { display: grid; gap: 4px; font-weight: 700; }
.style-collection-feinschliff-zeile select { min-height: 34px; border-radius: 9px; }

/* ===== V493: Noten- und Audio-Symbole + gedimmte Kacheln ============= */
/* Note = Noten ("Sheet Music"), Welle = Audio. */
.pdf-symbol {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
}
.audio-welle { display: inline-flex; }
.audio-welle svg { width: 17px; height: 17px; }
/* Bibliothek (Giotto 04.09.): Kacheln zu prominent. Leere blenden sich
   fast weg, aktive strahlen deutlich leiser — aber klar unterscheidbar. */
.pdf-icon-button.is-missing-asset,
.audio-icon-button.is-missing-asset,
.live-audio-button.is-missing-asset, .play-along-button.is-missing-asset,
.live-pdf-button.is-missing-asset,
.review-media-btn.is-missing-asset,
.classification-work-media-btn.is-missing-asset {
  opacity: 0.22;
  filter: grayscale(1);
}
.pdf-icon-button.has-asset,
.audio-icon-button.has-asset,
.live-audio-button.has-asset, .play-along-button.has-asset,
.live-pdf-button.has-asset,
.review-media-btn.has-asset,
.classification-work-media-btn.has-asset {
  opacity: 0.72;
  filter: saturate(0.65);
}@media (hover: hover) {
.pdf-icon-button.has-asset:hover,
.audio-icon-button.has-asset:hover,
.live-audio-button.has-asset:hover, .play-along-button.has-asset:hover,
.live-pdf-button.has-asset:hover,
.review-media-btn.has-asset:hover,
.classification-work-media-btn.has-asset:hover {
  opacity: 1;
  filter: none;
}}
.detail-noten-btn {
  margin-left: 10px;
  min-width: 34px;
  min-height: 30px;
  border-radius: 9px;
}

/* ===== V495: Setlist-Rahmen + groessere manuelle Zeilen (04.09.) ===== */
/* Der Setlist-Bereich hat immer einen vorgezeichneten Rahmen — leer mit
   Hinweissatz, gefuellt mit der Setlist; der Rahmen bleibt derselbe. */
#setlistAssistantView:not(.is-manual-edit) .setlist-assistant-results {
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  margin: 6px;
}
/* Manuelle Setlist: Schrift und Zeilenhoehe rauf — Touch-Praezision. */
.manual-setlist-collection-btn { font-size: 13.5px; min-height: 32px; }
.manual-setlist-collection-btn small { font-size: 12px; }
.manual-setlist-work-row { min-height: 34px; }
.manual-setlist-work-title { font-size: 14px; }
@media (pointer: coarse) {
  .manual-setlist-collection-btn { min-height: 36px; }
  .manual-setlist-work-row { min-height: 38px; }
}

/* ===== V496: Veranstaltungsbogen-Runde (Giotto 04.09.) =============== */
/* Daten-laden-Kacheln: mehr Luft, groessere Ziele. */
#eventDataDialog .dialog-options { display: grid; gap: 10px; }
#eventDataDialog .dialog-options button {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  min-height: 54px;
  border: 1px solid rgba(122, 158, 183, 0.28);
  border-radius: 12px;
}
#eventDataDialog .event-data-konzerte-btn {
  border-style: dashed;
  color: var(--muted);
}
/* Regelmaessigkeit im Wiederkehrend-Bogen */
.recurring-rhythmus { display: grid; gap: 10px; }
.recurring-wochentage { display: flex; gap: 6px; flex-wrap: wrap; }
.recurring-wochentage button {
  min-width: 44px;
  min-height: 36px;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.recurring-wochentage button.is-active {
  border-color: rgba(122, 199, 167, 0.6);
  background: rgba(122, 199, 167, 0.16);
  color: var(--ink);
}
.recurring-zeiten { display: flex; gap: 14px; }
.recurring-zeiten label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.recurring-event-tile.is-breit { grid-column: span 2; }
.recurring-tile-rhythmus { font-size: 12px; color: #7ac7a7; }@media (hover: hover) {

/* ===== V497: Konzertarchiv-Aufraeumrunde (Giotto 04.09.) ============= */
/* Register nur als Schrift: kein Rahmen, keine Trennlinie — aktiv traegt
   allein die Einfaerbung. */
.archive-register-tab,
.archive-register-tab:hover,
.archive-register-tab.is-active,
.archive-register-tab.is-active:hover {
  border-color: transparent !important;
  box-shadow: none;
}}
.archive-register-tab:not(.is-active) + .archive-register-tab:not(.is-active) {
  border-left-color: transparent !important;
}
.archive-collection-tabs { border-bottom: none; }
.archive-collection-chrome-row { border-bottom: none; }
/* ⋯-Menue oben rechts — nimmt keinen Platz weg, kein Springen zwischen
   den Registern mehr. */
.concerts-main { position: relative; }
.archive-header-actions {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 30;
}
.archive-collection-actions-row { min-height: 0; }
.archive-mehr-btn {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}@media (hover: hover) {
.archive-mehr-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }}
.archive-mehr-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 8px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.archive-mehr-panel button {
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}@media (hover: hover) {
.archive-mehr-panel button:hover { background: rgba(122, 199, 167, 0.12); }}
/* Toolbar in Entwuerfen/Papierkorb: Regel links, Knopf rechts oben. */
.archive-submode-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.archive-submode-clear-btn { margin-left: auto; flex: 0 0 auto; }

/* ===== V498: Magic Sammlung im Einordnen-Design, klappbar ============ */
.style-collection-klapp > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.style-collection-klapp > summary::-webkit-details-marker { display: none; }
.style-collection-klapp > summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 12px;
  transition: transform 140ms ease;
}
.style-collection-klapp[open] > summary::before { transform: rotate(90deg); }
.style-collection-klapp > summary h4 { margin: 0; }
.style-collection-klapp > summary .classification-multi-hint { margin-left: auto; }
.style-collection-klapp > .classification-chips,
.style-collection-klapp > .classification-energy,
.style-collection-klapp > .classification-rating-row { margin-top: 10px; }
.style-collection-regler-hint { margin: 6px 0 0; font-size: 12px; }

/* ===== V499: Spielqualitaet aufgeraeumt (Giotto 04.09.) ============== */
/* Liste: nur Titel + gesetzte Sterne; 0/unbewertet = leerer Stern. */
.review-list-row-kompakt .review-list-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.spielqualitaet-sterne { color: #60a5fa; font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
.spielqualitaet-sterne.is-leer { color: rgba(150, 165, 182, 0.55); }
.spielqualitaet-untersatz { margin: 2px 0 8px; font-size: 12.5px; }
/* Fokus: grosse Aktions-Kacheln + Einspiel-Kasten */
.review-fokus-aktionen { display: flex; gap: 12px; margin: 12px 0; }
.review-fokus-aktion {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.review-fokus-aktion .pdf-symbol { font-size: 20px; }
.review-fokus-aktion .audio-welle svg { width: 20px; height: 20px; }
.review-fokus-aktion.is-leer { opacity: 0.3; filter: grayscale(1); cursor: default; }
.review-fokus-brille { margin-left: auto; }
.review-fokus-einspiel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.review-fokus-einspiel h3 { margin: 0 0 6px; font-size: 14px; }
/* Der Einspiel-Player liegt hier fest im Kasten statt zu schweben. */
.review-einspiel-host { margin-top: 10px; }
.review-einspiel-host .einspiel-karte { position: static; width: 100%; max-width: none; box-shadow: none; }

/* ===== V500: Setlist-Koepfe + iPad-Vertikalteilung (Giotto 04.09.) === */
/* Kopfblock: Titel links — Konzert-Knoepfe, Umschalter und × rechts.
   Gilt fuer BEIDE Modi (Bruder & Schwester im selben Stil). */
.setlist-assistant-screen-header,
#setlistAssistantView.is-manual-edit .setlist-assistant-screen-header {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas: "title actions switch close";
  padding: 14px 20px;
  gap: 12px 14px;
}
.setlist-assistant-header-actions { grid-area: actions; }
.setlist-assistant-header-switch { grid-area: switch; }
#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title h1 {
  font-size: inherit;
}
/* Magic Setlist iPad: VERTIKALE Teilung — links Attribute, rechts die
   Setlist mit Rahmen (Missverstaendnis von V495 korrigiert). */
@media (max-width: 900px) {
  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-screen-body {
    grid-template-columns: minmax(250px, 42%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-setup {
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
  }
  #setlistAssistantView:not(.is-manual-edit) .setlist-assistant-results {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    padding-bottom: 16px;
  }
}
/* Manuelle Setlist: Filterbalken ohne eigenen Hintergrund, Linie
   durchgezogen; iPad-Schrift groesser. */
.manual-setlist-toolbar-host {
  background: transparent;
  border-bottom: 1px solid rgba(122, 158, 183, 0.25);
}
.setlist-assistant-manual-toolbar-inner { background: transparent; }
@media (min-width: 700px) and (max-width: 900px) {
  .setlist-assistant-manual-toolbar-inner { font-size: 14.5px; }
  .setlist-assistant-manual-toolbar-inner button { font-size: 14.5px; min-height: 38px; }
  /* Sammlungs-Spalte: gerundeter Rahmen, Inhalt wird beim Scrollen oben
     UND unten an den runden Ecken sauber abgeschnitten. */
  .manual-setlist-library {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--panel);
    padding: 8px;
    overflow-y: auto;
  }
  .manual-setlist-library .manual-setlist-collection-group {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 6px 4px;
  }
}

/* ===== V501: Bibliothek — Noten-Kachel-Feinheiten (Giotto 04.09.) ==== */
/* Note am Rechner groesser in den Tabellen-Kacheln. */
#libraryView .asset-cell .pdf-symbol { font-size: 20px; }
/* Spaltenkoepfe PDF und Wertung mittig. */
#libraryView .data-table th.asset-column,
#libraryView .data-table th.asset-column .table-head-tool,
#libraryView .data-table th.rating-column,
#libraryView .data-table th.rating-column .table-head-tool {
  text-align: center;
  justify-content: center;
}
/* Geladene Kacheln nochmal ~10% dunkler (nur Bibliotheksansicht). */
#libraryView .pdf-icon-button.has-asset,
#libraryView .audio-icon-button.has-asset,
#libraryView .live-pdf-button.has-asset,
#libraryView .live-audio-button.has-asset, #libraryView .play-along-button.has-asset {
  opacity: 0.62;
}@media (hover: hover) {
#libraryView .pdf-icon-button.has-asset:hover,
#libraryView .audio-icon-button.has-asset:hover,
#libraryView .live-pdf-button.has-asset:hover,
#libraryView .live-audio-button.has-asset:hover, #libraryView .play-along-button.has-asset:hover {
  opacity: 1;
}}

/* ===== V502: Live-Sternefrage einzeilig (Giotto 04.09.) ============== */
.live-rating-actions { flex-wrap: nowrap; }
.live-rating-snooze-x {
  margin-left: auto;
  min-width: 34px;
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}
.live-rating-reaktivieren {
  min-width: 34px;
  min-height: 30px;
  border: 1px solid rgba(232, 212, 138, 0.5);
  border-radius: 9px;
  background: rgba(232, 212, 138, 0.1);
  color: #e8d48a;
  font-size: 15px;
  cursor: pointer;
}

/* ===== V503: Einordnen-Kopf buendig + Repertoire-Wahl (04.09.) ======= */
.work-classification-hero { align-items: flex-start; }
.work-classification-hero > div > h3 { margin-top: 0; }
.classification-hero-actions { margin-top: 0; }
.classification-hero-actions .style-collection-entry-btn { margin-top: 0; }
/* Repertoire-Zeile: kein Pfeil, mehr Raum, Auswahl klar klickbar. */
.work-suggestion-repertoire-line { gap: 10px; padding: 4px 0; }
.work-suggestion-repertoire-caret { display: none; }
.work-suggestion-repertoire-select {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(122, 158, 183, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}@media (hover: hover) {
.work-suggestion-repertoire-select:hover { border-color: rgba(122, 199, 167, 0.55); }}

/* ===== V505: Spielqualitaet-Fokus + PDF-Einheit (Giotto 04.09.) ====== */
.review-fokus-einspiel h3 { font-size: 17px; margin: 0 0 8px; }
/* EIN Rahmen um beide Medien: quadratische Symbole, Text daneben. */
.review-fokus-medien {
  display: flex;
  gap: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 14px 18px;
  margin: 12px 0;
}
.review-fokus-medien-eintrag { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.review-fokus-medien-symbol {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line) !important;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.review-fokus-medien-symbol .pdf-symbol { font-size: 24px; }
.review-fokus-medien-symbol .audio-welle svg { width: 22px; height: 22px; }
.review-fokus-pfeil {
  min-width: 36px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.review-fokus-pfeil:disabled { opacity: 0.3; }
/* PDF-Kopf: Einheit sitzt IN der Zeile, so hoch wie der Kopf, nie
   darueber hinaus. */
.pdf-review-toolbar .einspiel-inline {
  position: static !important;
  transform: none !important;
  border: 1px solid rgba(150, 165, 182, 0.4) !important;
  padding: 2px 8px;
  gap: 4px;
}
.pdf-review-toolbar .einspiel-inline .einspiel-mini { width: 34px; height: 30px; }
.pdf-review-toolbar .einspiel-inline .einspiel-mini svg { width: 19px; height: 19px; }
.pdf-review-toolbar .einspiel-inline .einspiel-punkt.klein { width: 14px; height: 14px; }
.pdf-review-toolbar .einspiel-inline .einspiel-stopp-symbol { width: 13px; height: 13px; }
.einspiel-mini:disabled { opacity: 0.25; cursor: default; }
.einspiel-mini.gruen.ist-frei { opacity: 0.9; }
/* Popover der Intelligenten Sammlungen: fixe Position, eigener Scroll. */
.smart-collection-popover { max-height: 300px; overflow-y: auto; }

/* ===== V506: Smart Import — grosse Eingabefelder, Knoepfe unten ====== */
.smart-import-fuss-fueller { flex: 1; }
[data-smart-import-panel="titelliste"] .smart-import-input-label,
[data-smart-import-panel="liste"] .smart-import-input-label {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
#smartImportText, #smartListText {
  min-height: 42vh;
  height: 100%;
  resize: vertical;
}
.smart-import-shell[data-methode="titelliste"] #smartImportInputStage,
.smart-import-shell[data-methode="liste"] [data-smart-import-panel="liste"] {
  flex: 1 1 auto;
}
/* Noten fotografieren: Beschreibung mit Luft zum Knopf. */
.smart-import-startflaeche { gap: 16px; }
.smart-import-startflaeche .muted { margin-top: 2px; }

/* ===== V507: Regel-Board statt Mini-Popover (Versuch, 04.09.) ======== */
.smart-collection-popover {
  position: static !important;
  width: 100%;
  max-height: none;
  overflow: visible;
  margin-top: 8px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.02);
}
.smart-collection-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 4px 18px;
  align-items: start;
}
.smart-collection-board-spalte { display: grid; gap: 2px; align-content: start; }
.smart-collection-board-spalte .smart-collection-popover-kategorie { margin: 4px 0 4px; }
.smart-collection-board-spalte button { font-size: 14px; padding: 7px 8px; }

/* ===== V508: Fokus-Pfeile fix, Gespeichert-Band, Verlauf-Kasten ====== */
.review-focus-header { align-items: flex-start; }
.review-fokus-pfeil,
.review-focus-header .review-fokus-brille {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}
.einspiel-gespeichert-band {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(122, 199, 167, 0.16);
  border: 1px solid rgba(122, 199, 167, 0.45);
  color: #bfe6d6;
  font-weight: 800;
  font-size: 13px;
}
/* Nach fertiger Aufnahme ist NEU AUFNEHMEN die wichtigste Aktion. */
.review-einspiel-host .einspiel-knopf.einspiel-symbolknopf[data-einspiel="neu"] {
  border-color: rgba(214, 75, 75, 0.55);
  background: rgba(214, 75, 75, 0.1);
  width: 46px;
  min-width: 46px;
  height: 42px;
}
.einspiel-verlauf-kasten {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 16px;
}
.einspiel-verlauf-kasten .einspiel-verlauf-knopf { font-size: 14px; font-weight: 700; }
.einspiel-verlauf-kasten .einspiel-verlauf-zeile { font-size: 13.5px; min-height: 36px; }
.einspiel-verlauf-kasten .einspiel-mini { width: 34px; height: 32px; }
.einspiel-verlauf-kasten .einspiel-mini svg { width: 18px; height: 18px; }

/* ===== V509: Manuelle Setlist = Zwilling der Magic Setlist =========== */
/* Gleicher Titel-Stil, gleiche Kopf-Knoepfe (Giotto 04.09.). */
#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title h1 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: inherit;
  letter-spacing: inherit;
}
#setlistAssistantView.is-manual-edit .setlist-assistant-screen-title .muted {
  font-size: 12.5px;
}
#setlistAssistantView.is-manual-edit .setlist-assistant-header-actions {
  display: flex !important;
}

/* ===== V510: Gespeicherte Versionen (Giotto 04.09.) ================== */
.einspiel-verlauf-kasten h3 { margin: 0 0 8px; font-size: 15px; }
.einspiel-gespeichert-band { display: none; }

/* ===== V511: Fokus-Kopf in einer Zeile (Giotto 04.09.) =============== */
.review-focus-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center !important;
}

/* ===== V512: PDF-Aufnahme still statt rot (Giotto 04.09.) ============ */
.einspiel-inline.einspiel-inline-aufnahme {
  background: rgba(8, 14, 20, 0.96) !important;
  border-color: rgba(150, 165, 182, 0.4) !important;
}
.einspiel-inline.einspiel-inline-aufnahme .einspiel-punkt { background: #d64b4b; border-color: #d64b4b; }
.einspiel-inline.einspiel-inline-aufnahme .einspiel-timer,
.einspiel-inline.einspiel-inline-aufnahme .einspiel-mini { color: inherit; }

/* ===== V513: Sterne-Kasten kompakter (Giotto 04.09.) ================= */
.review-focus-spielqualitaet-panel { padding: 10px 14px; }
.review-focus-spielqualitaet-panel .classification-field-hint { margin: 0 0 2px; }
.review-focus-spielqualitaet-panel .spielqualitaet-untersatz { margin: 0 0 6px; font-size: 12px; }
.review-focus-spielqualitaet-panel .classification-rating-row { margin: 0; }

/* ===== V520: PDF-Vollflaeche + Scroll-Stapel (Giotto 04.09.) ========= */
/* Kopfzeilen als Overlay — das PDF nutzt die komplette Flaeche und darf
   oben unter der Zeile durchlaufen. */
.pdf-viewer-shell { position: relative; }
.pdf-review-toolbar,
.pdf-viewer-dialog:not(.is-review-kopf) .pdf-viewer-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(8, 14, 20, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pdf-stage {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.pdf-scroll-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Sichtbarer Seitenumbruch (Giotto 04.09.): kleine dunkle Fuge
     zwischen den Seiten. */
  gap: 10px;
  background: rgba(0, 0, 0, 0.35);
  padding-bottom: 10px;
}
.pdf-stack-seite {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.pdf-stack-seite {
  display: block;
  max-width: none;
  background: #fff;
}
/* Werk-Pfeile in der Kopfzeile (Tap auf die Noten bleibt gefahrlos). */
.pdf-kopf-pfeil { flex: 0 0 auto; }
.pdf-werk-pfeil { display: none; }
/* Aufnahme-Einheit: mittig, vertikal eingemittet, groessere Symbole. */
.pdf-review-toolbar-inner { align-items: center; padding: 6px 12px 10px; }
.pdf-review-toolbar .einspiel-inline {
  margin-inline: auto;
  align-self: center;
  padding: 3px 10px;
  gap: 6px;
}
.pdf-review-toolbar .einspiel-inline .einspiel-mini { width: 40px; height: 36px; }
.pdf-review-toolbar .einspiel-inline .einspiel-mini svg { width: 24px; height: 24px; }
.pdf-review-toolbar .einspiel-inline .einspiel-mini.gruen { font-size: 22px; }
.pdf-review-toolbar .einspiel-inline .einspiel-punkt.klein { width: 16px; height: 16px; }
.pdf-review-toolbar .einspiel-inline .einspiel-stopp-symbol { width: 15px; height: 15px; }

/* ===== V522: Zoom-Prozent oben in der Leiste (Giotto 04.09.) ========= */
.pdf-viewer-shell > .pdf-zoom-toggle {
  position: absolute;
  z-index: 70;
  left: auto;
  right: 118px;
  top: 9px;
  bottom: auto;
}

/* ===== V523: PDF ohne Scrollbalken (Giotto 04.09.) =================== */
.pdf-stage {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdf-stage::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* ===== V525: Spielqualitaets-Kacheln — 5 Sterne + Sichtungs-Datum ==== */
.spielqualitaet-rechts {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}
.spielqualitaet-sterne i {
  font-style: normal;
  color: rgba(150, 165, 182, 0.45);
}
.spielqualitaet-rechts small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.spielqualitaet-rechts small.ist-ungesichtet { opacity: 0.7; }

/* ===== V526: "Noten oeffnen" als Glanz-Knopf (Giotto 04.09.) ========= */
.review-noten-primaer {
  /* Giotto 04.09.: Die Knopfgroesse stimmt — der INHALT muss hinein.
     Darum kompaktere Schrift, engerer Abstand, schmalerer Innenrand
     links, damit Note und Beschriftung sauber sitzen. */
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 58px;
  padding: 0 18px 0 14px;
  white-space: nowrap;
  overflow: visible;
  border: 1px solid rgba(143, 217, 173, 0.65);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(150, 224, 185, 0.42), rgba(94, 179, 137, 0.22) 55%, rgba(70, 150, 112, 0.3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25),
    0 6px 16px rgba(72, 168, 122, 0.28);
  color: #eafff3;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
/* Im Browser gemessen (Giotto 04.09.): Das Notensymbol war 59px breit
   (Erbe aus der "PDF"-Text-Zeit) und der Beschriftungs-Span durfte
   schrumpfen — deshalb wurde die Schrift abgeschnitten, obwohl der
   Knopf gross genug war. Beide duerfen jetzt nicht mehr schrumpfen. */
.review-noten-primaer > span { flex: 0 0 auto; }
.review-noten-primaer .pdf-symbol {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  font-size: 22px;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}@media (hover: hover) {
.review-noten-primaer:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2),
    0 8px 20px rgba(72, 168, 122, 0.4);
}}
.review-noten-primaer:active { transform: translateY(1px); }
.review-noten-primaer.ist-leer { opacity: 0.45; filter: grayscale(1); cursor: pointer; box-shadow: none; }

/* ===== V527: PDF-Modus perfektioniert (Giotto 04.09.) ================ */
/* Seiten starten etwas tiefer — der Notentitel bleibt lesbar, unten
   wird dafuer beschnitten (ist ja scrollbar). */
.pdf-scroll-stack { padding-top: 30px; }
/* Fluessiges Scrollen auf Touch. */
.pdf-stage {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}
.pdf-stack-seite { pointer-events: none; }

/* Kopfzeile schlanker und aufgeraeumt. */
.pdf-review-toolbar-inner {
  position: relative;
  min-height: 46px;
  padding: 4px 58px 4px 14px;
  gap: 8px;
}
.pdf-review-title { font-size: 15px; }

/* Aufnahme-Einheit exakt in der Mitte der Zeile. */
.pdf-review-toolbar .einspiel-inline {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  z-index: 4;
}

/* Brille und Sterne: groessere Symbole, dickere und dunklere Knoepfe. */
.pdf-review-toolbar .review-mark-btn,
.pdf-review-toolbar .pdf-sterne-knopf,
.pdf-review-toolbar .review-audio-btn {
  min-height: 38px;
  border: 1px solid rgba(150, 165, 182, 0.35) !important;
  border-radius: 11px;
  background: rgba(4, 8, 12, 0.75) !important;
  padding: 0 12px;
}
.pdf-review-toolbar .review-mark-btn { width: 46px; padding: 0; }
.pdf-review-toolbar .review-glasses-icon-btn svg,
.pdf-review-toolbar .review-mark-btn svg { width: 27px; height: 27px; }
.pdf-review-toolbar .review-audio-btn .audio-welle svg { width: 22px; height: 22px; }
/* Spielqualitaets-Sterne im PDF: blau, 5er-Reihe wie in den Kacheln. */
.pdf-review-toolbar .pdf-sterne-knopf .spielqualitaet-sterne {
  font-size: 22px;
  letter-spacing: 1px;
  color: #60a5fa;
}
.pdf-review-toolbar .pdf-sterne-knopf .spielqualitaet-sterne i { color: rgba(150, 165, 182, 0.5); }
.pdf-review-toolbar .pdf-sterne-offen .classification-rating-row button { min-height: 34px; font-size: 14px; }

/* Schliessen-Kreuz: runder Rahmen, oben rechts in der Ecke. */
.pdf-review-toolbar-inner > form:last-child {
  position: absolute;
  top: 5px;
  right: 8px;
}
.pdf-review-x {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(150, 165, 182, 0.35) !important;
  border-radius: 50%;
  background: rgba(4, 8, 12, 0.75) !important;
  font-size: 19px;
  line-height: 1;
  padding: 0;
}
.pdf-kopf-pfeil {
  background: rgba(4, 8, 12, 0.75) !important;
  border-color: rgba(150, 165, 182, 0.35) !important;
}

/* Zoom-Prozent links von den Pfeiltasten (iPad-Ueberlappung behoben). */
.pdf-viewer-dialog.is-review-kopf .pdf-viewer-shell > .pdf-zoom-toggle {
  right: 210px;
  top: 12px;
}
.pdf-viewer-dialog:not(.is-review-kopf) .pdf-viewer-shell > .pdf-zoom-toggle {
  right: auto;
  left: 14px;
  top: 11px;
}

/* Kurzmeldung im PDF (2 Sekunden). */
.pdf-kurzmeldung {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(8px);
  z-index: 80;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(8, 14, 20, 0.92);
  border: 1px solid rgba(122, 199, 167, 0.5);
  color: #cde8db;
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.pdf-kurzmeldung.ist-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== V528: Kopfzeilen-Feintuning (Giotto 04.09.) =================== */
/* Alles vertikal mittig — Titel, Knoepfe, Symbole. */
.pdf-review-toolbar-inner {
  display: flex;
  align-items: center !important;
  min-height: 52px;
  padding: 0 58px 0 14px;
}
.pdf-review-toolbar-inner > * { align-self: center; }
.pdf-review-toolbar .review-mark-btn,
.pdf-review-toolbar .pdf-sterne-knopf,
.pdf-review-toolbar .review-audio-btn,
.pdf-review-toolbar .einspiel-mini,
.pdf-kopf-pfeil,
.pdf-review-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sterne kleiner und dezent gerahmt (kein fetter blauer Kasten). */
.pdf-review-toolbar .pdf-sterne-knopf,
.pdf-review-toolbar .pdf-sterne-knopf.hat-wert {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(122, 158, 183, 0.22) !important;
  border-radius: 10px;
  background: rgba(4, 8, 12, 0.55) !important;
}
.pdf-review-toolbar .pdf-sterne-knopf .spielqualitaet-sterne {
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Aufnahmeknopf quadratisch. */
.pdf-review-toolbar .einspiel-inline .einspiel-mini { width: 40px; height: 40px; }

/* Pfeile: groessere Symbole. */
.pdf-kopf-pfeil { font-size: 26px; padding: 0; }

/* Zoom-Prozent vertikal mittig, direkt neben den Pfeiltasten. */
.pdf-viewer-dialog.is-review-kopf .pdf-viewer-shell > .pdf-zoom-toggle {
  top: 50%;
  transform: translateY(-50%);
  right: 196px;
}

/* ===== V529: Weisser Streifen + unsichtbare Rand-Zonen (04.09.) ====== */
/* Ursache des "weissen Streifens": die halbtransparente Kopfleiste mit
   Weichzeichner wirkt ueber weissem Papier milchig. Jetzt deckt sie
   sauber, und die erste Seite startet unterhalb der Leiste. */
.pdf-review-toolbar,
.pdf-viewer-dialog:not(.is-review-kopf) .pdf-viewer-bar {
  background: rgba(8, 14, 20, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pdf-scroll-stack { padding-top: 62px; }@media (hover: hover) {

/* Rand-Zonen: aktiv, aber vollstaendig unsichtbar und ohne Feedback. */
.pdf-page-zone.ist-unsichtbar,
.pdf-page-zone.ist-unsichtbar:hover,
.pdf-page-zone.ist-unsichtbar:focus,
.pdf-page-zone.ist-unsichtbar:active {
  opacity: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-size: 0;
  width: 16%;
  top: 62px;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}}

/* ===== V530: Zoom im PDF, halber Beschnitt, ohne Ladehinweis ========= */
/* Zoom-Prozent in ALLEN PDF-Modi oben rechts IM PDF fixiert. */
.pdf-viewer-dialog .pdf-viewer-shell > .pdf-zoom-toggle,
.pdf-viewer-dialog.is-review-kopf .pdf-viewer-shell > .pdf-zoom-toggle,
.pdf-viewer-dialog:not(.is-review-kopf) .pdf-viewer-shell > .pdf-zoom-toggle {
  position: absolute;
  top: 64px;
  right: 14px;
  left: auto;
  bottom: auto;
  transform: none;
  z-index: 70;
}
/* Beschnitt haelftig verteilen: oben etwa die halbe Leistenhoehe unter
   die Leiste, unten faellt der Rest weg (Giotto 04.09.). */
.pdf-scroll-stack { padding-top: 30px; padding-bottom: 0; }
/* Kein "Noten werden geladen"-Hinweis mehr. */
.pdf-stage.is-pdf-loading::after { content: none; display: none; }
/* Noten-oeffnen-Knopf: Text nie abgeschnitten, Note mit Abstand. */


/* ===== V536: Kleiner Audio-Player (Giotto 05.09.) ==================== */
.audio-mini-player {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 900;
  display: grid;
  gap: 8px;
  min-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px 14px;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 16px;
  background: rgba(8, 14, 20, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.amp-kopf { display: flex; align-items: center; gap: 12px; }
.amp-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.amp-zeit { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.amp-knoepfe { display: flex; align-items: center; justify-content: center; gap: 10px; }
.amp-knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  border: 1px solid rgba(122, 158, 183, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.amp-knopf svg { width: 20px; height: 20px; }@media (hover: hover) {
.amp-knopf:hover { background: rgba(255, 255, 255, 0.09); }}
.amp-play {
  width: 52px;
  border-color: rgba(122, 199, 167, 0.5);
  background: rgba(122, 199, 167, 0.14);
}
.amp-schliessen { width: 32px; height: 30px; border: none; background: none; color: var(--muted); font-size: 18px; }
.amp-brille.is-active { border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.16); }
.amp-brille svg { width: 22px; height: 22px; }
.amp-knopf .einspiel-stopp-symbol { width: 13px; height: 13px; }

/* ===== V539: Audio-Player mittig, rahmenlos, mit Zeitstrahl ========== */
.audio-mini-player {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  min-width: min(460px, calc(100vw - 32px));
  padding: 16px 20px 18px;
  gap: 12px;
}
/* Zeitstrahl */
.amp-strahl {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(150, 165, 182, 0.28);
  cursor: pointer;
}
.amp-fuellung {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 3px;
  background: #7ac7a7;
}
/* Bedienknoepfe ohne Rahmen, groessere Symbole — die Brille bleibt. */
.amp-knoepfe { gap: 18px; }
.amp-knopf:not(.amp-brille) {
  width: auto;
  min-width: 44px;
  height: 40px;
  border: none;
  background: none;
  font-size: 22px;
  color: var(--ink);
}@media (hover: hover) {
.amp-knopf:not(.amp-brille):hover { background: none; color: #cde8db; }}
.amp-knopf:not(.amp-brille) svg { width: 26px; height: 26px; }
.amp-play { width: auto; }
.amp-knopf .einspiel-stopp-symbol { width: 17px; height: 17px; }

/* ===== V544: Bibliotheks-PDF-Kopf — Titel, Sterne, Brille, Sammlung == */
.pdf-title-zeile { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pdf-title-zeile h2 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-werk-wertung { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.pdf-wertung-stern {
  border: none;
  background: none;
  padding: 0 1px;
  font-size: 17px;
  line-height: 1;
  color: rgba(150, 165, 182, 0.5);
  cursor: pointer;
}
.pdf-wertung-stern.is-filled { color: #e8d48a; }
.pdf-sammlung-btn {
  width: 42px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 158, 183, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}
.pdf-sammlung-btn svg { width: 22px; height: 22px; }
#pdfSammlungDialog .dialog-options button { display: flex; justify-content: space-between; gap: 12px; }
#pdfSammlungDialog .dialog-options button.is-active { opacity: 0.6; }
#pdfSammlungDialog .live-collection-group-heading { margin: 10px 0 4px; }

/* ===== V545: Setlist-Notizen (Giotto 05.09.) ========================= */
.setlist-notizen-sektion .dashboard-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setlist-notiz-neu { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(122, 199, 167, 0.5); background: rgba(122, 199, 167, 0.14); color: var(--ink); font-weight: 700; }
.setlist-notiz-hinweis { margin: 4px 0 10px; font-size: 13px; }
.setlist-notiz-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.setlist-notiz-karte { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink); }
.setlist-notiz-karte small { color: var(--muted); }
.setlist-notiz-dialog { width: min(560px, calc(100vw - 24px)); padding: 16px 18px 18px; display: grid; gap: 12px; }
.setlist-notiz-kopf { position: relative; display: flex; align-items: center; gap: 8px; }
.setlist-notiz-titel { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 800; border: none; border-bottom: 1px solid transparent; background: none; color: var(--ink); padding: 4px 0; }
.setlist-notiz-titel:focus { outline: none; border-bottom-color: rgba(122, 199, 167, 0.6); }
.setlist-notiz-mehr { width: 36px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: none; color: var(--ink); font-size: 18px; }
.setlist-notiz-kopf .dialog-close-button { position: static; }
.setlist-notiz-menue { position: absolute; right: 44px; top: 40px; z-index: 5; display: grid; gap: 2px; min-width: 240px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 14, 20, 0.98); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.setlist-notiz-menue button { text-align: left; border: none; background: none; color: var(--ink); padding: 9px 10px; border-radius: 8px; }@media (hover: hover) {
.setlist-notiz-menue button:hover { background: rgba(255, 255, 255, 0.07); }}
.setlist-notiz-menue button.ist-gefaehrlich { color: #f0a4a4; }
.setlist-notiz-band, .setlist-notiz-bemerkung { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.setlist-notiz-band input, .setlist-notiz-bemerkung textarea, .setlist-notiz-eingabe input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 9px 12px; font-size: 14px; }
.setlist-notiz-eingabe { position: relative; }
.setlist-notiz-eingabe input { font-size: 15px; min-height: 42px; border-color: rgba(122, 199, 167, 0.45); }
.setlist-notiz-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; display: grid; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 14, 20, 0.98); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); overflow: hidden; }
.setlist-notiz-vorschlaege button { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: none; background: none; color: var(--ink); padding: 8px 12px; }@media (hover: hover) {
.setlist-notiz-vorschlaege button:hover { background: rgba(122, 199, 167, 0.14); }}
.setlist-notiz-vorschlaege small { color: var(--muted); }
.setlist-notiz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 44vh; overflow-y: auto; }
.setlist-notiz-zeile { display: grid; grid-template-columns: 22px 26px minmax(0, 1fr) 36px 30px; align-items: center; gap: 6px; min-height: 36px; padding: 2px 4px; border-radius: 8px; }@media (hover: hover) {
.setlist-notiz-zeile:hover { background: rgba(255, 255, 255, 0.04); }}
.setlist-notiz-zeile.wird-gezogen { opacity: 0.4; }
.setlist-notiz-zeile.ist-ziel { box-shadow: inset 0 2px 0 rgba(122, 199, 167, 0.8); }
.setlist-notiz-griff { color: var(--muted); cursor: grab; text-align: center; }
.setlist-notiz-nr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.setlist-notiz-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.setlist-notiz-lose { font-style: normal; color: var(--muted); margin-left: 6px; font-size: 20px; line-height: 0; }
.setlist-notiz-note { width: 34px; height: 30px; }
.setlist-notiz-note .pdf-symbol { font-size: 17px; }
.setlist-notiz-entfernen { border: none; background: none; color: var(--muted); font-size: 18px; line-height: 1; }@media (hover: hover) {
.setlist-notiz-entfernen:hover { color: #f0a4a4; }}

/* ===== V546: PDF-Wechsel ohne Zucken (Giotto, Go 06.09.) ============= */
.pdf-stage.is-pdf-loading #pdfViewerCanvas { opacity: 1; transition: none; }

/* ===== V547: Bibliotheks-PDF-Kopf + Rand-Zonen (Giotto 06.09.) ======= */
/* Der Stueckname ist sichtbar — eine alte Grundregel versteckte ihn. */
.pdf-viewer-dialog.is-library-pdf .pdf-viewer-bar #pdfViewerTitle { display: block; font-size: 17px; }
.pdf-viewer-dialog.is-library-pdf .pdf-title-zeile { display: flex; align-items: center; gap: 12px; }
/* Rand-Zonen leben jetzt in der Huelle (nicht im Scrollbereich) —
   damit sie auf jeder Seite an derselben Stelle liegen. */
.pdf-viewer-shell > .pdf-page-zone.ist-unsichtbar {
  position: absolute;
  top: 62px;
  bottom: 0;
  width: 16%;
  z-index: 50;
  opacity: 0;
  color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 0;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.pdf-viewer-shell > .pdf-page-zone.is-prev { left: 0; }
.pdf-viewer-shell > .pdf-page-zone.is-next { right: 0; }
.pdf-viewer-shell > .pdf-page-zone:not(.ist-unsichtbar) { display: none; }

/* ===== V548: Hilfeblase faengt nie einen Tipp ab (Giotto 06.09.) ===== */
.help-tooltip { pointer-events: none; }

/* ===== V549: Datumsfilter in Regeln ================================== */
.smart-collection-datum { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.smart-collection-datum input[type="date"] { min-height: 32px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 8px; }
.smart-collection-regel input[type="date"] { color-scheme: dark; }

/* ===== V550: PDF ueberall Vollbild (Giotto 06.09.) =================== */
/* Die Bibliothek hatte eine Karte mit 94vw/93vh, Rand und Rundung —
   der "halbe Zentimeter je Seite". Jetzt wie die Sichtung: Vollbild. */
.pdf-viewer-dialog.is-library-pdf,
.pdf-viewer-dialog.is-live-pdf {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* ===== V552: Notenblatt, Play-Along-Slot, Ansicht, Listen-Pfeil ====== */
.pdf-symbol { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pdf-symbol .noten-blatt { width: 1.25em; height: 1.25em; }
.play-along-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 9px;
  background: rgba(255, 255, 255, 0.03); color: var(--ink); cursor: pointer;
}
.play-along-button .play-along-symbol { width: 22px; height: 22px; }
#libraryView .play-along-button.has-asset { opacity: 0.62; }@media (hover: hover) {
#libraryView .play-along-button.has-asset:hover { opacity: 1; }}
#libraryView .play-along-button.is-missing-asset { opacity: 0.22; filter: grayscale(1); }
#libraryView .data-table th.playalong-column .table-head-tool { text-align: center; justify-content: center; }
#pdfPlayAlongChipBtn .play-along-symbol { width: 20px; height: 20px; }
/* Ansicht: Spalten ausblenden */
.library-ansicht-panel { display: grid; gap: 6px; min-width: 180px; }
.library-ansicht-panel label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 14px; cursor: pointer; }
#libraryView.spalte-aus-rating .rating-column, #libraryView.spalte-aus-rating .rating-cell,
#libraryView.spalte-aus-pdf .pdf-column, #libraryView.spalte-aus-pdf .pdf-cell,
#libraryView.spalte-aus-audio .audio-column, #libraryView.spalte-aus-audio .audio-cell,
#libraryView.spalte-aus-playalong .playalong-column, #libraryView.spalte-aus-playalong .playalong-cell,
#libraryView.spalte-aus-duration .duration-column, #libraryView.spalte-aus-duration .duration-cell,
#libraryView.spalte-aus-collections .collections-column, #libraryView.spalte-aus-collections .collections-cell,
#libraryView.spalte-aus-composer .composer-column, #libraryView.spalte-aus-composer .composer-cell,
#libraryView.spalte-aus-work-number .work-number-column, #libraryView.spalte-aus-work-number .work-number-cell { display: none; }

/* ===== V553: Notenblatt groesser, duenner Rand, huebsche Note ======== */
.pdf-symbol .noten-blatt { width: 1.6em; height: 1.6em; }
#libraryView .asset-cell .pdf-symbol { font-size: 21px; }
.review-noten-primaer .pdf-symbol .noten-blatt { width: 1.35em; height: 1.35em; }

/* ===== V554: Ansicht-Menue als Auge, Haken rechts (Giotto 06.09.) ==== */
.library-ansicht-summary { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; }
.library-ansicht-summary svg { width: 20px; height: 20px; }
.library-ansicht-panel { min-width: 200px; gap: 2px; }
.library-ansicht-panel label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 8px; border-radius: 8px; }@media (hover: hover) {
.library-ansicht-panel label:hover { background: rgba(255, 255, 255, 0.05); }}
.library-ansicht-panel input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ansicht-haken { font-style: normal; font-weight: 800; font-size: 15px; color: rgba(150, 165, 182, 0.35); }
.library-ansicht-panel label.ist-an .ansicht-haken { color: #7ac7a7; }

/* ===== V556: Kreispfeile statt Emoji bei "Noten-Foto erneuern" ======= */
.menu-symbol { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }

/* ===== V557: Noten ueber Linien, Play-Along groesser, Ansicht-Knoepfe = */
.library-ansicht-summary::-webkit-details-marker { display: none; }
.library-ansicht-summary { list-style: none; }
.ansicht-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: none; color: var(--ink); font-size: 14px; text-align: left; cursor: pointer;
}@media (hover: hover) {
.ansicht-zeile:hover { background: rgba(255, 255, 255, 0.05); }}
.ansicht-zeile .ansicht-haken { color: rgba(150, 165, 182, 0.35); }
.ansicht-zeile.ist-an .ansicht-haken { color: #7ac7a7; }
.play-along-button { width: 42px; height: 36px; }
.play-along-button .play-along-symbol { width: 28px; height: 28px; }
#pdfPlayAlongChipBtn .play-along-symbol { width: 24px; height: 24px; }
.pdf-symbol .noten-blatt { width: 1.7em; height: 1.7em; }

/* ===== V558: Orte-Gruppe mit Untermenue (Giotto 06.09.) ============== */
.concert-nav-untermenue { display: grid; gap: 2px; padding: 2px 0 6px 34px; }
.concert-nav-sub {
  text-align: left; padding: 6px 10px; border: none; border-radius: 8px;
  background: none; color: var(--muted); font-size: 14px; cursor: pointer;
}@media (hover: hover) {
.concert-nav-sub:hover { background: rgba(255, 255, 255, 0.05); color: var(--ink); }}
.concert-nav-sub.is-active { color: var(--ink); background: rgba(122, 199, 167, 0.14); }
.band-block { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
.band-block summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.band-block summary::-webkit-details-marker { display: none; }
.band-block summary small { color: var(--muted); }
.band-block .setlist-notiz-karten { margin-top: 10px; }

/* ===== V559: Fuenf Notenlinien, feinere Noten; Play-Along-Grafik gross = */
.pdf-symbol .noten-blatt { width: 1.7em; height: 1.7em; }
.play-along-button { width: 38px; height: 34px; overflow: visible; }
.play-along-button .play-along-symbol { width: 34px; height: 34px; }
#pdfPlayAlongChipBtn .play-along-symbol { width: 28px; height: 28px; }

/* ===== V560: Auge-Menue Haken buendig; Titel nie abgeschnitten ======= */
.library-actions-panel .ansicht-zeile { display: flex; width: 100%; box-sizing: border-box; justify-content: space-between; }
.library-actions-panel .ansicht-zeile > span { flex: 1 1 auto; min-width: 0; }
.library-actions-panel .ansicht-zeile .ansicht-haken { flex: 0 0 auto; margin-left: auto; width: 18px; text-align: right; }
/* Bibliothekstabelle: Titel in voller Laenge (die Tabelle scrollt), Dauer schmal. */
#libraryView .data-table { table-layout: auto; }
#libraryView .data-table .title-cell,
#libraryView .data-table .title-cell .inline-work-text {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}
#libraryView .data-table .title-column { min-width: 240px; }
#libraryView .data-table .duration-column,
#libraryView .data-table .duration-cell { width: 64px; min-width: 56px; max-width: 72px; white-space: nowrap; text-align: right; padding-right: 10px; }

/* ===== V561: Titel passgenau mit Gewicht (Giotto 06.09.) ============= */
#libraryView .data-table td.title-cell,
#libraryView.is-library-selection-mode .data-table td.title-cell {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  width: auto !important;
}
#libraryView .data-table td.title-cell .inline-work-text { white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; display: inline; }
#libraryView .data-table th.title-column { width: auto !important; min-width: 240px; }
#libraryView .data-table td.duration-cell,
#libraryView .data-table th.duration-column { width: 64px !important; min-width: 56px !important; max-width: 72px !important; white-space: nowrap; }

/* ===== V562: Play-Along-Grafik wirklich gross; Noten mit Glanz ======= */
/* Die Grafik wurde vom Flex-Container auf 12px Breite gequetscht. */
.play-along-button { width: 36px; height: 32px; padding: 0; overflow: visible; }
.play-along-button .play-along-symbol { flex: 0 0 auto; width: 34px; min-width: 34px; height: 34px; }
#pdfPlayAlongChipBtn { padding: 0; }
#pdfPlayAlongChipBtn .play-along-symbol { flex: 0 0 auto; width: 30px; min-width: 30px; height: 30px; }
.pdf-symbol .noten-blatt { flex: 0 0 auto; }

/* ===== V563: Titelspalte exakt so breit wie der laengste Titel ======= */
/* Trick: width 1% + nowrap → die Spalte nimmt genau die Inhaltsbreite,
   der Ueberschuss wandert in die Sammlungen-Spalte. */
#libraryView .data-table th.title-column,
#libraryView .data-table td.title-cell,
#libraryView.is-library-selection-mode .data-table td.title-cell {
  width: 1% !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
}
#libraryView .data-table th.collections-column,
#libraryView .data-table td.collections-cell { width: auto; }

/* ===== V566: GEMA+ Kennzeichen (Giotto 06.09.) ======================= */
.gema-plus-badge {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid rgba(222, 179, 92, 0.55); color: #e8d48a; background: rgba(222, 179, 92, 0.12);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; vertical-align: 1px;
}

/* ===== V567: Play-Along-Kachel exakt wie Noten/Audio, Lautsprecher mittig = */
.play-along-button .play-along-symbol { width: 28px; min-width: 28px; height: 28px; }

/* ===== V568: Play-Along-Kachel = Zwilling der Audio-Kachel ============ */
.play-along-button { overflow: visible; }
.play-along-button .play-along-symbol { width: 26px; min-width: 26px; height: 26px; }

/* ===== V570: iPad — Titelspalte fest, Spalten ruecken ins Sichtfeld == */
@media (max-width: 1100px) {
  /* Tabelle nicht auf volle Breite spannen: abgewaehlte Spalten geben
     Platz frei, statt dass andere Spalten wachsen. */
  #libraryView .data-table { width: auto !important; min-width: 0 !important; }
  #libraryView .data-table th.title-column,
  #libraryView .data-table td.title-cell,
  #libraryView.is-library-selection-mode .data-table td.title-cell {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #libraryView .data-table td.title-cell .inline-work-text { display: block; overflow: hidden; text-overflow: ellipsis; }
  #libraryView .data-table th.collections-column,
  #libraryView .data-table td.collections-cell { width: auto; max-width: 260px; }
}

/* ===== V571: iPad — alle Spalten mit fester Breite, nichts waechst nach = */
@media (max-width: 1100px) {
  #libraryView .data-table th.composer-column,
  #libraryView .data-table td.composer-cell { width: 170px !important; min-width: 170px !important; max-width: 170px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #libraryView .data-table th.work-number-column,
  #libraryView .data-table td.work-number-cell { width: 110px !important; min-width: 110px !important; max-width: 110px !important; white-space: nowrap; }
  #libraryView .data-table th.collections-column,
  #libraryView .data-table td.collections-cell { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  #libraryView .data-table th.rating-column,
  #libraryView .data-table td.rating-cell { width: 92px !important; min-width: 92px !important; max-width: 92px !important; }
}

/* ===== V572: iPad — Tabelle so breit wie ihre sichtbaren Spalten ===== */
@media (max-width: 1100px) {
  #libraryView .data-table {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ===== V573: iPad — Titel 1 cm schmaler, Sammlungen 2 cm kuerzer, Scroller frei = */
@media (max-width: 1100px) {
  #libraryView .library-table-scroller { min-width: 0 !important; width: max-content !important; }
  #libraryView .data-table th.title-column,
  #libraryView .data-table td.title-cell,
  #libraryView.is-library-selection-mode .data-table td.title-cell { width: 192px !important; min-width: 192px !important; max-width: 192px !important; }
  #libraryView .data-table th.collections-column,
  #libraryView .data-table td.collections-cell { width: 145px !important; min-width: 145px !important; max-width: 145px !important; overflow: hidden; }
  #libraryView .data-table td.collections-cell .collection-text-list { display: block; max-width: 129px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #libraryView .data-table th.duration-column,
  #libraryView .data-table td.duration-cell { width: 64px !important; min-width: 64px !important; max-width: 64px !important; overflow: hidden; }
  #libraryView .data-table td.duration-cell > * { display: inline-block; max-width: 56px; overflow: hidden; white-space: nowrap; }
  #libraryView .data-table th.playalong-column,
  #libraryView .data-table td.playalong-cell,
  #libraryView .data-table th.pdf-column, #libraryView .data-table td.pdf-cell,
  #libraryView .data-table th.audio-column, #libraryView .data-table td.audio-cell { width: 52px !important; min-width: 52px !important; max-width: 52px !important; overflow: hidden; }
  #libraryView .data-table th.playalong-column .table-head-tool { font-size: 10px; letter-spacing: 0; padding: 0; }
}

/* ===== V574: Kopfbalken und Linien immer bis zum Rand (Giotto 06.09.) = */
@media (max-width: 1100px) {
  #libraryView .library-table-scroller,
  #libraryView .data-table {
    width: max-content !important;
    min-width: 100% !important;
  }
  /* Ueberschuss bei wenigen Spalten geht in die letzte sichtbare Spalte,
     nicht in den Titel. */
  #libraryView .data-table th.title-column,
  #libraryView .data-table td.title-cell { width: 192px !important; }
}

/* ===== V575: Spalten-Definitionen (col) folgen der Ansicht ============ */
/* Die Tabelle hatte 8 col-Eintraege fuer 9 Spalten — die Dauer bekam die
   Breite der Sammlungen. Jetzt 9 cols, und abgewaehlte Spalten kollabieren
   auch ihre col, sonst hielte sie die Tabellenbreite. */
#libraryView.spalte-aus-rating col.col-rating,
#libraryView.spalte-aus-pdf col.col-pdf,
#libraryView.spalte-aus-audio col.col-audio,
#libraryView.spalte-aus-playalong col.col-playalong,
#libraryView.spalte-aus-duration col.col-duration,
#libraryView.spalte-aus-collections col.col-collections,
#libraryView.spalte-aus-composer col.col-composer,
#libraryView.spalte-aus-work-number col.col-work-number { visibility: collapse; width: 0 !important; }
@media (max-width: 1100px) {
  /* iPad: die Breiten kommen aus den Zellen-Regeln, nicht aus den cols. */
  #libraryView .data-table colgroup { display: none; }
}

/* ===== V576: Dashboard-Notizkasten lila, Bands-Formular, Notiz-Editor = */
.notiz-dashboard { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; background: linear-gradient(135deg, rgba(150, 120, 230, 0.16), rgba(150, 120, 230, 0.04)); border-color: rgba(150, 120, 230, 0.35); }
.notiz-dashboard-lila { display: grid; gap: 8px; align-content: start; }
.notiz-dashboard-lila h3 { margin: 0; }
.notiz-glanz-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px;
  border: 1px solid rgba(190, 165, 255, 0.65); border-radius: 14px;
  background: linear-gradient(180deg, rgba(190, 165, 255, 0.42), rgba(140, 110, 220, 0.22) 55%, rgba(110, 85, 190, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(120, 95, 210, 0.28);
  color: #f3eeff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.notiz-glanz-knopf:active { transform: translateY(1px); }
.notiz-dashboard-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.notiz-dashboard-kacheln .setlist-notiz-karte { padding: 10px 12px; }
.notiz-dashboard-leer { grid-column: 1 / -1; }
@media (max-width: 700px) { .notiz-dashboard { grid-template-columns: 1fr; } }
/* Notiz-Editor: Zeilen wie im Vorbereitungs-Editor */
#setlistNotizDialog .setlist-assistant-editor-list { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; }
#setlistNotizDialog .setlist-notiz-zeile.ist-lose .setlist-assistant-editor-meta { color: rgba(150, 165, 182, 0.7); font-style: italic; }
#setlistNotizDialog .setlist-notiz-zeile.wird-gezogen { opacity: 0.4; }
#setlistNotizDialog .setlist-notiz-zeile.ist-ziel { box-shadow: inset 0 2px 0 rgba(122, 199, 167, 0.8); }
/* Bands */
.bands-kopf { align-items: flex-start; }
.bands-titel { margin: 0 0 4px; font-size: 24px; }
.band-formular { display: grid; gap: 10px; margin: 12px 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.band-feld { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.band-feld input, .band-mitglied input, .band-termin input, .band-termin select { min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 10px; font-size: 14px; }
.band-block-kopf { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.band-mitglieder, .band-termine { display: grid; gap: 6px; }
.band-mitglied { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; gap: 6px; }
.band-termin { display: grid; grid-template-columns: 110px 140px 90px minmax(0, 1fr) 32px; gap: 6px; }
.band-zeile-weg { border: none; background: none; color: var(--muted); font-size: 18px; }
.band-formular-fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.band-summary-rechts { display: inline-flex; align-items: center; gap: 10px; }
.band-mitglieder-liste, .band-termine-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.band-mitglieder-liste small, .band-termin-zeile small { color: var(--muted); }
.band-termin-zeile { display: flex; gap: 10px; align-items: baseline; }
.band-termin-zeile.ist-vorbei { opacity: 0.5; }
.band-termin-art { font-weight: 700; min-width: 70px; }
@media (max-width: 700px) { .band-mitglied, .band-termin { grid-template-columns: 1fr 1fr; } }


/* ===== V577: iPad-Tipp-Haptik (Giotto 06.09.) ======================== */
/* Kein graues System-Aufleuchten beim Tippen; kein 300-ms-Warten. Alle
   Hover-Regeln gelten nur noch fuer echte Maus/Trackpad (hover: hover). */
* { -webkit-tap-highlight-color: transparent; }
button, a, summary, [role="button"], .live-work-row, .archive-item, .collection-list button, .live-collection-list button, .setlist-notiz-karte { touch-action: manipulation; }

/* ===== V578: Noten-Symbol Probe (Blatt gefuellt, Inhalt in Hintergrundfarbe) = */
.pdf-symbol .noten-blatt { width: 1.55em; height: 1.55em; }

/* ===== V579: Bands — Karten, Detail, Formular aufgeraeumt ============ */
.band-aktion { min-height: 34px; padding: 0 12px; border: 1px solid rgba(150, 165, 182, 0.4); border-radius: 9px; background: rgba(255, 255, 255, 0.03); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.band-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.band-karte { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--ink); cursor: pointer; }
.band-karte small { color: var(--muted); }
.band-karte.ist-lose { border-style: dashed; }
.band-detail { display: grid; gap: 6px; }
.band-detail-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.band-detail-titel { flex: 1 1 auto; min-width: 0; display: grid; }
.band-detail-titel h3 { margin: 0; font-size: 22px; }
.band-detail-titel small { color: var(--muted); }
.band-detail h4 { margin: 12px 0 4px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.band-formular-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(140px, 0.8fr); gap: 10px; }
.band-feld select { min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 10px; font-size: 14px; }
.band-mitglied { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 32px; }
.band-termin { grid-template-columns: 104px 128px 78px minmax(0, 1fr) 32px; }
.band-termin input[type="date"], .band-termin input[type="time"] { padding: 0 6px; color-scheme: dark; min-width: 0; }
@media (max-width: 900px) {
  .band-termin { grid-template-columns: 104px 128px 78px 32px; }
  .band-termin input[name="tNotiz"] { grid-column: 1 / -1; }
  .band-formular-zeile { grid-template-columns: 1fr; }
}

/* ===== V581: Notiz-Dialog — Band-Wahl, Reihenfolge, Set-Striche, Anmerkung = */
.setlist-notiz-band { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; position: relative; font-size: 12.5px; color: var(--muted); }
.setlist-notiz-band-btn { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); font-size: 14px; }
.setlist-notiz-band-btn i { font-style: normal; color: var(--muted); }
.setlist-notiz-band .setlist-notiz-vorschlaege { top: calc(100% + 4px); left: 0; right: 0; }
.setlist-notiz-werkzeuge { display: flex; gap: 8px; }
.setlist-notiz-werkzeuge .band-aktion.is-active { border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.14); }
.setlist-notiz-bemerkung { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.setlist-notiz-bemerkung input { min-height: 36px; }
.setlist-notiz-set { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; }
.setlist-notiz-set button { border: none; background: none; color: var(--muted); font-size: 17px; }
.setlist-notiz-liste.ist-reihenfolge .setlist-notiz-zeile { cursor: grab; border: 1px dashed rgba(150, 165, 182, 0.35); border-radius: 10px; margin: 3px 0; }
.setlist-notiz-liste .setlist-notiz-griff { color: var(--muted); font-size: 18px; margin-right: 6px; }

/* ===== V582: Einfache Note, PDF-Blocker weg, Live-Backing-Kachel ===== */
.pdf-symbol .noten-blatt { width: 1.35em; height: 1.35em; }
.pdf-page-zone:disabled { pointer-events: none; }
.pdf-duration-notice { pointer-events: none; }
.live-backing-button .play-along-symbol { width: 24px; height: 24px; }
.live-backing-kachel { display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 40px; padding: 0 12px; margin: 4px 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.live-backing-kachel .play-along-symbol { width: 22px; height: 22px; }
.live-backing-kachel.is-active { border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.14); }

/* ===== V584: Notizkasten gruen, volle Breite, Liste ================== */
.notiz-dashboard { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 12px; background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.notiz-dashboard-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.notiz-dashboard-kopf h3 { margin: 0; }
.notiz-dashboard-kopf p { margin: 2px 0 0; }
.notiz-glanz-knopf {
  border-color: rgba(143, 217, 173, 0.65);
  background: linear-gradient(180deg, rgba(150, 224, 185, 0.42), rgba(94, 179, 137, 0.22) 55%, rgba(70, 150, 112, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 6px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(72, 168, 122, 0.28);
  color: #eafff3;
}
.notiz-dashboard-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.notiz-dashboard-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); color: var(--ink); text-align: left; }
.notiz-dashboard-zeile strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notiz-dashboard-zeile span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.notiz-dashboard-zeile i { font-style: normal; color: var(--muted); }

/* ===== V585: Verbinden-Knopf am Pausenmusik-Block ==================== */
.pause-collection-section .panel-header { display: flex; align-items: center; gap: 6px; }
.pause-collection-section .panel-header h2 { flex: 1 1 auto; }
.pause-verbinden-button { display: inline-flex; align-items: center; justify-content: center; }
.pause-verbinden-button svg { width: 18px; height: 18px; }

/* ===== V586: Live-Backing-Kachel sichtbar; Termine beschriftet ======= */
.live-backing-toggle { opacity: 0.45; }
.live-backing-toggle.is-active { opacity: 1; border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.14); }
.live-backing-toggle .play-along-symbol { width: 22px; height: 22px; }
.band-termin { grid-template-columns: 120px 150px 100px minmax(0, 1fr) 32px; gap: 10px; align-items: end; padding: 8px 0; border-bottom: 1px dashed rgba(150, 165, 182, 0.2); }
.band-mini { display: grid; gap: 3px; font-size: 11.5px; color: var(--muted); min-width: 0; }
.band-mini input, .band-mini select { width: 100%; box-sizing: border-box; min-height: 36px; }
.band-termin .band-zeile-weg { align-self: end; height: 36px; }
@media (max-width: 900px) {
  .band-termin { grid-template-columns: 1fr 1fr 1fr 32px; }
  .band-termin .band-mini-hinweis { grid-column: 1 / 4; }
  .band-termin .band-zeile-weg { grid-column: 4; grid-row: 1; }
}

/* ===== V587: Notiz-Fenster kompakt, oben angedockt (Tastatur) ======== */
.setlist-notiz-dialog { top: 3vh; margin-top: 0; max-height: 84vh; overflow: hidden; padding: 14px 16px 14px; gap: 8px; }
#setlistNotizDialog .setlist-assistant-editor-list { max-height: 38vh; }
#setlistNotizDialog .setlist-assistant-editor-item { min-height: 34px; padding: 4px 6px; gap: 8px; }
#setlistNotizDialog .setlist-assistant-editor-number { min-width: 22px; font-size: 12px; }
#setlistNotizDialog .setlist-assistant-editor-title-row strong { font-size: 14px; font-weight: 600; }
#setlistNotizDialog .setlist-assistant-editor-actions button { min-height: 28px; }
#setlistNotizDialog .setlist-notiz-eingabe input { min-height: 38px; }
#setlistNotizDialog .setlist-notiz-titel { font-size: 16px; }
@media (max-height: 700px) { .setlist-notiz-dialog { top: 1vh; max-height: 92vh; } #setlistNotizDialog .setlist-assistant-editor-list { max-height: 30vh; } }

/* ===== V588: Kleine Notiz je Stueck ================================== */
.setlist-notiz-eintrag-notiz { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.setlist-notiz-eintrag-eingabe { width: 100%; box-sizing: border-box; margin-top: 4px; min-height: 30px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 8px; font-size: 13px; }
.setlist-notiz-eintrag-stift { border: none; background: none; color: rgba(150, 165, 182, 0.55); font-size: 15px; min-height: 28px; }
.setlist-notiz-eintrag-stift.hat-notiz { color: #7ac7a7; }

/* V591 (Giotto 07.09.): Geschlossener Setlist-Notiz-Dialog darf nicht im
   Seitenfluss stehen (unbedingtes display: grid ueberstimmte das Verstecken). */
.setlist-notiz-dialog:not([open]) { display: none; }
/* V592 (Giotto 07.09.): Safari zog den offenen Notiz-Dialog auf 84vh, weil
   die Unterkante (inset-block-end: 0) mit dem Auto-Rand nicht aufging.
   Unterkante frei, Hoehe nach Inhalt, Zeilen oben buendig. */
.setlist-notiz-dialog[open] { bottom: auto; inset-block-end: auto; height: auto; min-height: 0; align-content: start; margin-bottom: 0; }
/* V593 (Giotto 07.09., dritte Meldung): Termin-Zeile mit festen, knappen
   Spalten auf ALLEN Breiten. Safari laesst Datums-/Zeitfelder nicht unter
   ihre Eigenbreite schrumpfen — appearance: none + width erzwingen. */
.band-termin { grid-template-columns: 110px 124px 76px minmax(0, 1fr) 32px; gap: 10px; }
.band-termin .band-mini { overflow: hidden; }
.band-termin input[type="date"], .band-termin input[type="time"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  padding: 0 6px; font-size: 13.5px; text-align: left;
}
.band-termin input[type="date"]::-webkit-date-and-time-value,
.band-termin input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
.band-termin input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
@media (max-width: 900px) {
  .band-termin { grid-template-columns: 110px 124px 76px 32px; }
  .band-termin .band-mini-hinweis { grid-column: 1 / 4; }
  .band-termin .band-zeile-weg { grid-column: 4; grid-row: 1; }
}

/* V594 (Giotto 07.09.): Notizen loeschen (zweistufig) + Speicher-Anzeige. */
.setlist-notiz-karte-zeile { display: flex; gap: 6px; align-items: stretch; }
.setlist-notiz-karte-zeile .setlist-notiz-karte { flex: 1 1 auto; min-width: 0; }
.setlist-notiz-karte-weg { flex: 0 0 auto; min-width: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; }
.setlist-notiz-karte-weg.ist-scharf, #setlistNotizMenue [data-notiz-aktion="loeschen"].ist-scharf, .band-formular [data-band-aktion="loeschen"].ist-scharf { color: #ff8a80; border-color: rgba(255, 138, 128, 0.7); background: rgba(255, 138, 128, 0.12); font-size: 13px; font-weight: 700; }
.setlist-notiz-gespeichert { color: var(--muted); font-size: 11.5px; text-align: right; }

/* V596 (Giotto 07.09.): Prueffenster "Setlists aktualisieren", Verlauf, Rueckgaengig. */
.uebernahme-dialog { width: min(640px, calc(100vw - 24px)); }
.uebernahme-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; }
.uebernahme-zeile label { display: grid; grid-template-columns: 24px 1fr; gap: 4px 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.uebernahme-zeile input { margin-top: 3px; width: 18px; height: 18px; }
.uebernahme-konzert { font-weight: 700; }
.uebernahme-diff { grid-column: 2; color: var(--muted); font-size: 13px; line-height: 1.35; }
.uebernahme-zeile.is-korrekt label { opacity: 0.55; cursor: default; }
.uebernahme-menu { display: flex; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding: 0; }
.uebernahme-menu button:disabled { opacity: 0.5; }
.uebernahme-rueckgaengig { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 12500; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(20, 32, 44, 0.96); border: 1px solid rgba(122, 199, 167, 0.5); color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); font-size: 14px; }
.uebernahme-rueckgaengig button { min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(122, 199, 167, 0.7); background: rgba(122, 199, 167, 0.16); color: var(--ink); font-weight: 700; }
.verlauf-dialog { width: min(640px, calc(100vw - 24px)); }
.verlauf-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; max-height: 60vh; overflow-y: auto; }
.verlauf-zeile { display: grid; grid-template-columns: 118px 1fr auto; gap: 10px; align-items: start; padding: 8px 6px; border-bottom: 1px dashed rgba(150, 165, 182, 0.2); font-size: 13px; }
.verlauf-zeile time { color: var(--muted); white-space: nowrap; }
.verlauf-zeile strong { display: block; }
.verlauf-zeile em { font-style: normal; color: var(--ink); opacity: 0.85; display: block; }
.verlauf-zeile span { display: block; color: var(--muted); }
.verlauf-zeile small { color: var(--muted); white-space: nowrap; }
.verlauf-leer { padding: 12px 6px; }

/* V597 (Giotto 07.09.): Drei Einstiege zum Composer Scouter + "Komponist fehlt". */
.missing-work-data-zeile { display: flex; gap: 6px; align-items: stretch; }
.missing-work-data-zeile .missing-work-data-row { flex: 1 1 auto; min-width: 0; }
.missing-scout-btn { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 96px; padding: 6px 10px; border: 1px solid rgba(222, 179, 92, 0.6); border-radius: 12px; background: rgba(222, 179, 92, 0.12); color: var(--ink); font-size: 12px; font-weight: 700; }
.missing-scout-btn span:first-child { font-size: 18px; }
.missing-critical-label { font-size: 13px; font-weight: 800; }
.missing-meta { color: var(--muted); font-size: 12px; }
.gema-komponist-zelle { position: relative; }
tr.ist-ohne-komponist .table-input.is-composer { border-color: rgba(255, 107, 107, 0.75); background: rgba(255, 107, 107, 0.09); padding-right: 34px; }
tr.ist-ohne-komponist .table-input.is-composer::placeholder { color: #ff8a80; font-weight: 700; opacity: 1; }
.gema-scout-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(222, 179, 92, 0.6); background: rgba(222, 179, 92, 0.14); font-size: 15px; line-height: 1; padding: 0; }
.archive-action-scout { border-color: rgba(222, 179, 92, 0.6) !important; background: rgba(222, 179, 92, 0.12) !important; }
.nachhoer-diagnose { color: #ff8a80; font-weight: 700; font-size: 12px; margin-left: 6px; }
.nachhoer-scout { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(222, 179, 92, 0.6); background: rgba(222, 179, 92, 0.14); font-size: 15px; line-height: 1; padding: 0 6px; }

/* V599 (Giotto 07.09.): Vorhandenes Werk zuordnen im Composer Scouter. */
.scouter-zuordnen { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; }
.scouter-zuordnen input[type="search"] { min-height: 36px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 10px; font-size: 14px; }
.scouter-zuordnen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 32vh; overflow-y: auto; }
.scouter-zuordnen-liste button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--ink); }
.scouter-zuordnen-liste button span { color: var(--muted); font-size: 12px; }
/* V600 (Giotto 07.09., gemessen): Live-Kacheln 52x52 — Play-Along-Grafik sass
   mit 24px links (1px/27px Rand), Note hatte 23px. Jetzt 40px / 38px, mittig. */
.live-work-row .live-pdf-button, .live-work-row .live-audio-button, .live-work-row .live-backing-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.live-work-row .live-backing-button .play-along-symbol { width: 40px !important; min-width: 40px !important; height: 40px !important; display: block; margin: 0 auto; }
.live-work-row .live-pdf-button .pdf-symbol { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.live-work-row .live-pdf-button .pdf-symbol .noten-blatt { width: 38px !important; height: 38px !important; }

/* V601 (Giotto 07.09.): Live-Werkliste — ein ⋯-Menue statt Kachelreihe; Zaehler rechts neben "Werke antippen". */
.live-helper-menu .live-helper-button { display: none !important; }
#liveRatingReaktivierenBtn, #liveAssignMediaBtn { display: none !important; }
.live-helper-menu { position: relative; display: flex; align-items: center; }
.live-mehr-button { width: 44px; min-width: 44px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-size: 22px; line-height: 1; font-weight: 800; padding: 0; }
.live-mehr-button.is-active { border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.14); }
.live-mehr-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; width: min(320px, 92vw); padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, #0f1a24); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); display: grid; gap: 4px; max-height: 72vh; overflow-y: auto; }
.live-mehr-menue > button { width: 100%; text-align: left; min-height: 42px; padding: 0 10px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.live-mehr-menue > button.is-active { border-color: rgba(122, 199, 167, 0.5); background: rgba(122, 199, 167, 0.12); }
.live-mehr-menue .mehr-haken { opacity: 0.2; font-weight: 800; }
.live-mehr-menue > button.is-active .mehr-haken { opacity: 1; }
.live-mehr-menue .live-helper-popover { position: static; width: auto; max-width: none; margin: 2px 0; box-shadow: none; border: 1px solid var(--line); border-radius: 9px; }
.live-work-column-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.live-works-count { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; justify-self: end; }

/* V603 (Giotto 07.09., Design-Durchsicht): Aenderungen im Prueffenster und im Verlauf als eigene Zeilen "Feld: alt -> neu". */
.uebernahme-konzert { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uebernahme-art { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(122, 199, 167, 0.95); border: 1px solid rgba(122, 199, 167, 0.45); border-radius: 999px; padding: 1px 8px; }
.uebernahme-diff { display: grid; gap: 2px; }
.uebernahme-feld, .verlauf-feld { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 13px; line-height: 1.4; }
.uebernahme-feld i, .verlauf-feld i { font-style: normal; color: var(--muted); min-width: 84px; }
.uebernahme-feld s, .verlauf-feld s { color: var(--muted); text-decoration: line-through; opacity: 0.85; }
.uebernahme-feld s::after, .verlauf-feld s::after { content: "→"; display: inline-block; margin-left: 6px; text-decoration: none; opacity: 0.7; }
.uebernahme-feld b, .verlauf-feld b { color: var(--ink); font-weight: 700; }
.verlauf-zeile div { display: grid; gap: 2px; }

/* V605 (Giotto, erster Test 07.09.): Mehr-Menue mit vier Umschaltern; Sparkle-Knoepfe quadratisch;
   Stil bei Scouter-Vorschlaegen; kompakte Pflege-Zeilen; Scout im Werkformular; Setlist-Qualitaet-Einstiege. */
.live-mehr-button { border: 0 !important; background: rgba(255, 255, 255, 0.07) !important; color: rgba(198, 216, 228, 0.8) !important; box-shadow: none !important; }
.live-mehr-button.is-active { background: rgba(255, 255, 255, 0.14) !important; color: var(--ink) !important; }
.live-mehr-menue { width: min(280px, 92vw); }
.live-mehr-menue > button { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 10px; }
.live-mehr-menue .mehr-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 18px; }
.live-mehr-menue .mehr-icon svg { width: 24px; height: 24px; }
.live-mehr-menue .mehr-icon .play-along-symbol { width: 26px; height: 26px; }
.live-mehr-menue .mehr-haken { opacity: 0; font-weight: 800; color: rgba(122, 199, 167, 1); text-align: right; }
.live-mehr-menue > button.is-active .mehr-haken { opacity: 1; }
.live-mehr-menue > button.is-active { border-color: transparent; background: rgba(122, 199, 167, 0.1); }
.archive-actions .archive-action-scout { width: 38px !important; min-width: 38px !important; height: 38px !important; padding: 0 !important; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.composer-scouter-candidate-stil, .scouter-zuordnen-stil { display: block; color: rgba(222, 179, 92, 0.95); font-size: 12px; font-weight: 700; }
.missing-work-data-zeile { align-items: center; }
.missing-work-data-zeile .missing-work-data-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 10px; min-height: 0; }
.missing-work-data-zeile .missing-work-data-row strong { font-size: 14px; }
.missing-work-data-zeile .missing-work-data-row small { font-size: 12px; }
.missing-scout-btn { min-width: 40px; width: 40px; height: 40px; padding: 0; font-size: 18px; border-radius: 10px; }
.missing-scout-btn span:first-child { font-size: 18px; }
.work-scout-btn { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 0 12px; border: 1px solid rgba(222, 179, 92, 0.6); border-radius: 10px; background: rgba(222, 179, 92, 0.12); color: var(--ink); font-size: 13px; font-weight: 700; margin-top: 2px; }
.setlist-quality-werkdaten-btn { border: 1px solid rgba(255, 138, 128, 0.55); background: rgba(255, 138, 128, 0.1); color: var(--ink); border-radius: 10px; min-height: 34px; padding: 0 12px; font-weight: 700; font-size: 13px; }
.concert-prep-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.setlist-quality-missing { display: block; color: #ff8a80; font-weight: 700; }
.setlist-quality-chip.is-werkdaten { color: #ff8a80; border-color: rgba(255, 138, 128, 0.55); }
.setlist-quality-scout-btn { width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid rgba(222, 179, 92, 0.6); background: rgba(222, 179, 92, 0.14); font-size: 15px; line-height: 1; }

/* V606 (Giotto 07.09.): Pflege = Titelliste der GEMA-Hindernisse; Fenster "Werkdaten ergaenzen";
   Archiv-Karte mit Werk-Links; Verlauf im geoeffneten Konzert. */
.missing-work-data-titelzeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
.missing-work-data-titelzeile strong { font-size: 15px; }
.missing-work-data-titelzeile .missing-critical-label { font-size: 12px; white-space: nowrap; }
.archive-werkdaten-zeile { color: #ff8a80; font-weight: 700; }
.archive-werkdaten-link { border: 0; background: transparent; padding: 0; color: #ff8a80; font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.werkdaten-dialog { width: min(520px, calc(100vw - 24px)); display: grid; gap: 10px; }
.werkdaten-dialog:not([open]) { display: none; }
.werkdaten-feld { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.werkdaten-feld input { min-height: 38px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 10px; font-size: 15px; }
.werkdaten-komponist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.werkdaten-dialog .work-scout-btn { justify-self: start; }
.werkdaten-gespielt { margin: 4px 0 0; font-size: 13px; }
.werkdaten-wege { display: flex; gap: 8px; flex-wrap: wrap; }
.werkdaten-wege button { min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 13px; }
.werkdaten-menu { display: flex; justify-content: flex-end; gap: 8px; margin: 6px 0 0; padding: 0; }
#werkdatenSpeichernBtn { min-height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(122, 199, 167, 0.7); background: rgba(122, 199, 167, 0.18); color: var(--ink); font-weight: 700; }

/* V610 (P0-Onboarding 07.09.): Backoffice-Reiter Noten-Cloud + Pianistenakte Sichtung. */
.bo-sichtung-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.bo-sichtung-zahl { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.bo-sichtung-zahl b { font-size: 24px; line-height: 1.1; }
.bo-sichtung-zahl span { color: var(--muted); font-size: 12px; }
.bo-sichtung-verteilung { display: grid; gap: 4px; margin: 0 0 14px; max-width: 420px; }
.bo-sichtung-balken { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bo-sichtung-balken b { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bo-sichtung-balken b i { display: block; height: 100%; background: rgba(122, 199, 167, 0.8); }
.bo-sichtung-titel { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bo-sterne { color: #6fb6ff; font-size: 14px; letter-spacing: 1px; }
.bo-sterne i { font-style: normal; opacity: 0.22; }
.bo-sichtung-zeile > span:last-child { display: inline-flex; align-items: center; gap: 10px; }
.bo-sichtung-zeile small { color: var(--muted); }
.bo-noten-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: default; }
.bo-noten-zeile.is-verwaist strong { color: #ff8a80; }
.bo-noten-zeile .backoffice-row-meta { display: inline-flex; gap: 6px; }
.bo-noten-zeile button { min-height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; }
.bo-noten-zeile button.ist-scharf { color: #ff8a80; border-color: rgba(255, 138, 128, 0.7); }

/* V611 (P0-Onboarding 07.09.): Backoffice-Inhalt scrollt in sich (lange Noten-Cloud-Liste war abgeschnitten); Pruefen-Knopf lesbar. */
#backofficeView.is-active { display: flex; flex-direction: column; min-height: 0; }
#backofficeView .concerts-workbench { flex: 1 1 auto; min-height: 0; }
#backofficeView .concerts-main { min-height: 0; overflow: hidden; }
#backofficeView #backofficeContent { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bo-noten-pruefen, .concert-dashboard-top-action { min-width: max-content; flex: 0 0 auto; }

/* V613 (P0-Onboarding 07.09.): Verbund-Pruefung in der Backoffice-Uebersicht. */
.bo-verbund-karte { margin-top: 12px; }
.bo-verbund-zeile { cursor: default; }
.bo-verbund-zeile.is-aktuell strong { color: rgba(122, 199, 167, 1); }
.bo-verbund-zeile.is-warnung { border-color: rgba(255, 138, 128, 0.5); }
.bo-verbund-hinweis { display: block; color: #ff8a80; font-weight: 700; margin-top: 2px; }

/* V615 (07.09., gemessen): Backoffice-Ansicht bekommt die Hoehe des Hauptbereichs wie das Konzertarchiv;
   nur #backofficeContent scrollt. Vorher wuchs die Ansicht mit dem Inhalt und wurde abgeschnitten. */
#backofficeView.is-active { display: flex !important; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
#backofficeView .concerts-workbench { flex: 1 1 auto; min-height: 0; }
#backofficeView .concerts-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#backofficeView #backofficeContent { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* V616: Kopf-Aktionen der Medien-Cloud (Alle fehlenden hochladen oben statt unter 196 Zeilen). */
.bo-kopf-aktionen { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bo-noten-alle { border-color: rgba(122, 199, 167, 0.7) !important; background: rgba(122, 199, 167, 0.16) !important; font-weight: 700; }

/* V618: Backoffice-Statistik = App-Statistik mit Pianisten-Wahl; Noten/Audio getrennt hochladen. */
.bo-statistik-wahl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.bo-statistik-wahl select { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, 0.04); color: var(--ink); padding: 0 10px; font-size: 14px; }
.bo-statistik-ziel { margin-top: 10px; }

/* V619: Medien-Cloud mit Rubriken Noten/Audios; Upload-Fehler sichtbar in der Zeile. */
.bo-medien-rubriken { display: flex; gap: 6px; margin: 10px 0 4px; }
.bo-medien-rubriken button { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; }
.bo-medien-rubriken button.is-active { color: var(--ink); border-color: rgba(122, 199, 167, 0.6); background: rgba(122, 199, 167, 0.14); }
.bo-noten-fehler { display: block; color: #ff8a80; font-weight: 700; margin-top: 2px; }

/* V620 (Giotto): Medien-Cloud aufgeraeumt — Kopf nur Titel/Text/Pruefen, Rubriken darunter, Sammel-Knopf in eigener Leiste. */
#backofficeView .concert-dashboard-top-head { align-items: flex-start; gap: 14px; }
#backofficeView .concert-dashboard-top-copy strong { white-space: nowrap; }
.bo-medien-rubriken { margin: 14px 0 6px; }
.bo-medien-block { margin-top: 12px; }
.bo-medien-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.bo-medien-leiste .bo-sichtung-titel { margin: 0; }
.bo-noten-alle { min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(122, 199, 167, 0.7); background: rgba(122, 199, 167, 0.16); color: var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* V621 (Giotto): Kopf-Knoepfe rechtsbuendig, unten an der Ueberschriftenspalte ausgerichtet, in einer Reihe. */
#backofficeView .concert-dashboard-top-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
#backofficeView .concert-dashboard-top-copy { flex: 1 1 auto; min-width: 0; }
#backofficeView .concert-dashboard-top-copy strong { white-space: normal; }
#backofficeView .bo-kopf-aktionen { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 8px; flex-wrap: nowrap; margin-left: auto; }
#backofficeView .bo-kopf-aktionen button { min-height: 38px; white-space: nowrap; }

/* V622: Geraete-Status in der Medien-Cloud (Medienordner verbunden?). */
.bo-medien-geraet { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; }
.bo-medien-geraet.is-ok { border-color: rgba(122, 199, 167, 0.5); background: rgba(122, 199, 167, 0.08); }
.bo-medien-geraet.is-warnung { border-color: rgba(255, 138, 128, 0.6); background: rgba(255, 138, 128, 0.1); color: var(--ink); }
.bo-medien-geraet button { min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05); color: var(--ink); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* V626 (Giotto 07.09.): Nachricht + Antwort bei Zustellungen */
.collection-import-nachricht { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(222, 179, 92, 0.12); border: 1px solid rgba(222, 179, 92, 0.35); }
.collection-import-nachricht small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.collection-import-nachricht p { margin: 0; white-space: pre-wrap; }
.collection-import-antwort { display: block; margin-top: 10px; }
.collection-import-antwort textarea, #shareCollectionNachricht { width: 100%; box-sizing: border-box; resize: vertical; }
.bo-zustellung { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(167, 185, 199, 0.22); margin-bottom: 8px; }
.bo-zustellung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bo-zustellung-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--muted); }
.bo-zustellung.is-uebernommen .bo-zustellung-status { color: #7fd1a0; }
.bo-zustellung.is-abgelehnt .bo-zustellung-status { color: #e08c8c; }
.bo-zustellung-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bo-zustellung-text { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(167, 185, 199, 0.08); white-space: pre-wrap; }
.bo-zustellung-text.is-antwort { background: rgba(127, 209, 160, 0.1); }
.bo-zustellung-text small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }

/* V628 (Giotto 07.09.): Sammlungs-Satz senden */
.share-satz { margin: 8px 0; }
.share-satz summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.share-satz-liste { max-height: 220px; overflow-y: auto; margin-top: 6px; padding: 4px 0; border-top: 1px solid rgba(167, 185, 199, 0.18); }
.share-satz-block { margin: 8px 0 2px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.share-satz-eintrag { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.share-satz-eintrag span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-satz-eintrag small { color: var(--muted); font-variant-numeric: tabular-nums; }

/* V629 (Giotto 07.09.): Rueckmeldungen der Pianisten im Admin-Postfach */
.concert-dashboard-admin-delivery.is-rueckmeldung { border-color: rgba(127, 209, 160, 0.45); }
.concert-dashboard-admin-delivery.is-rueckmeldung.is-abgelehnt { border-color: rgba(224, 140, 140, 0.5); }
.concert-dashboard-admin-delivery.is-rueckmeldung em { font-style: normal; color: var(--muted); }

/* V630 (Giotto 07.09.): Rueckmeldungs-Fenster beim Admin */
.rueckmeldung-liste { display: grid; gap: 10px; max-height: 60vh; overflow-y: auto; }
.rueckmeldung-karte { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(127, 209, 160, 0.45); }
.rueckmeldung-karte.is-abgelehnt { border-color: rgba(224, 140, 140, 0.5); }
.rueckmeldung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rueckmeldung-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: #7fd1a0; }
.rueckmeldung-karte.is-abgelehnt .rueckmeldung-status { color: #e08c8c; }
.rueckmeldung-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rueckmeldung-text { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(167, 185, 199, 0.08); white-space: pre-wrap; }
.rueckmeldung-text.is-antwort { background: rgba(127, 209, 160, 0.1); }
.rueckmeldung-text small { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.rueckmeldung-aktionen { display: flex; justify-content: flex-end; margin-top: 8px; }

/* V631 (Giotto 07.09.): Zustell-Chronik */
.bo-chronik { display: grid; gap: 6px; }
.bo-chronik-tag { margin: 14px 0 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bo-chronik-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(167, 185, 199, 0.18); }
.bo-chronik-zeile.is-uebernommen { border-color: rgba(127, 209, 160, 0.45); }
.bo-chronik-zeile.is-verworfen { border-color: rgba(224, 140, 140, 0.5); }
.bo-chronik-zeile.is-empfangen { border-style: dashed; }
.bo-chronik-zeit { font-variant-numeric: tabular-nums; color: var(--muted); padding-top: 1px; }
.bo-chronik-inhalt { min-width: 0; }
.bo-chronik-text { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: rgba(167, 185, 199, 0.08); white-space: pre-wrap; }
.bo-chronik-text.is-antwort { background: rgba(127, 209, 160, 0.1); }
.bo-chronik-stuecke { margin-top: 6px; }
.bo-chronik-stuecke ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 24px; }
.bo-chronik-stuecke li { break-inside: avoid; padding: 1px 0; }
.bo-chronik-stuecke small { color: var(--muted); }
@media (max-width: 700px) { .bo-chronik-stuecke ol { columns: 1; } }

/* V632: Chronik als schlichte Liste, Datum + Uhrzeit links */
.bo-chronik-zeile { grid-template-columns: 74px minmax(0, 1fr); }
.bo-chronik-zeit { font-size: 12px; line-height: 1.35; }

/* V633 (Giotto 07.09.): Chronik als Liste ohne Rahmen, Chat-Zeilen, Setlist-Fenster */
.bo-chronik { gap: 0; }
.bo-chronik-zeile { grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 9px 4px; border: 0; border-radius: 0; border-bottom: 1px solid rgba(167, 185, 199, 0.12); }
.bo-chronik-zeile.is-uebernommen, .bo-chronik-zeile.is-verworfen, .bo-chronik-zeile.is-empfangen { border: 0; border-bottom: 1px solid rgba(167, 185, 199, 0.12); }
.bo-chronik-zeile:last-child { border-bottom: 0; }
.bo-chronik-zeit { font-size: 12px; line-height: 1.5; white-space: nowrap; }
.bo-chronik-ereignis { line-height: 1.5; }
.bo-chronik-zeile.is-verworfen .bo-chronik-ereignis { color: #e08c8c; }
.bo-chronik-chat { margin-top: 3px; padding: 0; background: none; border-radius: 0; font-weight: 600; line-height: 1.5; white-space: pre-wrap; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.bo-chronik-chat span { font-weight: 500; opacity: 0.7; margin-right: 6px; }
.bo-chronik-chat span::after { content: ":"; }
.bo-chronik-chat.is-nachricht { color: #e6c78a; }
.bo-chronik-chat.is-antwort { color: #9fe3b8; }
.chronik-setlist { display: grid; max-height: 65vh; overflow-y: auto; }
.chronik-setlist-zeile { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(167, 185, 199, 0.12); }
.chronik-setlist-zeile:last-child { border-bottom: 0; }
.chronik-setlist-nr { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.chronik-setlist-titel { display: grid; min-width: 0; }
.chronik-setlist-titel small { color: var(--muted); }
.chronik-setlist-medien { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 700px) { .bo-chronik-zeile { grid-template-columns: 1fr; gap: 2px; } }

/* V634 (Giotto 07.09.): Loesch-Warnung + Rolle in der Chronik */
.rueckmeldung-karte.is-warnung { border-color: rgba(224, 140, 140, 0.6); background: rgba(224, 140, 140, 0.06); }
.rueckmeldung-karte.is-warnung .rueckmeldung-status { color: #e08c8c; }
.bo-ereignis-warnungen { display: grid; gap: 6px; margin: 0 0 12px; }
.bo-ereignis-warnung { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(224, 140, 140, 0.1); border: 1px solid rgba(224, 140, 140, 0.5); color: #f0b3b3; }
.bo-chronik-wer { font-weight: 600; font-size: 12px; }
.bo-chronik-wer.is-admin { color: #e6c78a; }
.bo-chronik-wer.is-pianist { color: #9fe3b8; }

/* V635 (Giotto 07.09.): Konto einrichten + Willkommenskarte + Glitzer */
.share-einrichten-hinweis { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: rgba(222, 179, 92, 0.12); border: 1px solid rgba(222, 179, 92, 0.35); font-size: 13px; }
.willkommen-dialog { max-width: 520px; }
.willkommen-dialog form { padding: 0; }
.willkommen-karte { position: relative; padding: 22px 22px 18px; border-radius: 16px; cursor: pointer;
  background: radial-gradient(120% 80% at 15% 0%, rgba(246, 211, 101, 0.22), transparent 55%), radial-gradient(90% 70% at 90% 100%, rgba(159, 227, 184, 0.18), transparent 60%), rgba(14, 24, 32, 0.96);
  border: 1px solid rgba(246, 211, 101, 0.35); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.willkommen-karte.is-dashboard { margin-bottom: 14px; }
.willkommen-kopf h3 { margin: 4px 0 4px; font-size: 24px; letter-spacing: 0.01em; }
.willkommen-kopf p { margin: 0; color: var(--muted); }
.willkommen-funken { position: absolute; top: 14px; right: 18px; font-size: 26px; color: #f6d365; text-shadow: 0 0 14px rgba(246, 211, 101, 0.8); animation: willkommen-funkeln 2.4s ease-in-out infinite; }
@keyframes willkommen-funkeln { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.25) rotate(20deg); opacity: 1; } }
.willkommen-nachricht { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: rgba(230, 199, 138, 0.14); color: #f0dcb0; font-weight: 600; white-space: pre-wrap; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.willkommen-nachricht small { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.willkommen-zahlen { display: flex; gap: 18px; margin: 16px 0 6px; }
.willkommen-zahlen span { display: grid; font-size: 12px; color: var(--muted); }
.willkommen-zahlen strong { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.willkommen-liste { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.willkommen-antwort { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.willkommen-antwort textarea { width: 100%; box-sizing: border-box; resize: vertical; margin-top: 4px; }
.willkommen-aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.willkommen-danke { background: linear-gradient(135deg, #f6d365, #e6c78a); color: #1a1a1a; font-weight: 700; border: 0; }
.glitzer-konfetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }
@media (prefers-reduced-motion: reduce) { .willkommen-funken { animation: none; } }

/* V639: Markierung "zur Einrichtung" */
.bo-badge-einrichtung { color: #f6d365 !important; font-weight: 600; }

/* V640 (Giotto 08.09.): Pianisten-Fenster — Leiste aus Schriftzuegen, Pianisten-Feld im Kopf */
.backoffice-akte-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 4px 0 12px; padding: 0 0 6px; border-bottom: 1px solid rgba(122, 158, 183, 0.18); }
.backoffice-akte-tabs button { padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: rgba(167, 185, 199, 0.74); font-size: 13px; font-weight: 650; box-shadow: none; }
.backoffice-akte-tabs button.is-active { background: rgba(255, 255, 255, 0.06); color: var(--accent); border: 0; }
@media (hover: hover) { .backoffice-akte-tabs button:hover { color: rgba(210, 224, 232, 0.92); background: rgba(255, 255, 255, 0.045); } }
.bo-pianist-wahl { position: relative; }
.bo-pianist-wahl summary { list-style: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(122, 158, 183, 0.28); background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 650; font-size: 13px; white-space: nowrap; }
.bo-pianist-wahl summary::-webkit-details-marker { display: none; }
.bo-pianist-wahl summary span { color: var(--muted); margin-left: 4px; }
.bo-pianist-wahl-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; max-height: 60vh; overflow-y: auto; display: grid; padding: 6px; border-radius: 12px; background: rgba(14, 24, 32, 0.98); border: 1px solid rgba(122, 158, 183, 0.28); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); }
.bo-pianist-wahl-liste button { display: grid; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-weight: 600; box-shadow: none; }
.bo-pianist-wahl-liste button small { color: var(--muted); font-weight: 500; }
.bo-pianist-wahl-liste button.is-active { background: rgba(255, 255, 255, 0.08); color: var(--accent); }
@media (hover: hover) { .bo-pianist-wahl-liste button:hover { background: rgba(255, 255, 255, 0.06); } }
.concert-dashboard-top-head { flex-wrap: wrap; gap: 8px; }

/* V641 (Giotto 08.09.): Pianistenprofil-Feld gross, eckig, schimmernd; Einrichten-Knopf zeigt Zustand */
.bo-pianisten-kopf .concert-dashboard-top-head { align-items: center; }
.bo-pianist-profil { display: grid; gap: 4px; margin-left: 6px; }
.bo-pianist-profil > small { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bo-pianist-wahl summary { position: relative; overflow: hidden; display: grid; gap: 2px; min-width: 220px; padding: 10px 40px 10px 14px; border-radius: 8px; white-space: nowrap;
  border: 1px solid rgba(246, 211, 101, 0.35);
  background: linear-gradient(120deg, rgba(246, 211, 101, 0.16), rgba(167, 199, 255, 0.12) 45%, rgba(159, 227, 184, 0.14)), rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.25); }
.bo-pianist-wahl summary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%); transform: translateX(-120%); animation: bo-schimmer 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes bo-schimmer { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.bo-pianist-wahl summary strong { font-size: 18px; letter-spacing: 0.01em; color: #fff; }
.bo-pianist-wahl summary span { margin: 0; font-size: 12px; color: var(--muted); }
.bo-pianist-wahl summary b { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 500; color: var(--muted); }
.bo-pianist-wahl[open] summary { border-color: rgba(246, 211, 101, 0.6); }
.bo-pianist-wahl-liste { left: 0; right: auto; }
.backoffice-akte-actions button.is-einrichten-aktiv { background: linear-gradient(135deg, #f6d365, #e6c78a); color: #1a1a1a; border-color: transparent; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bo-pianist-wahl summary::after { animation: none; } }
@media (max-width: 700px) { .bo-pianist-profil { margin-left: 0; width: 100%; } .bo-pianist-wahl summary { min-width: 0; width: 100%; } }

/* V642 (Giotto 08.09.): markierte Sammlungen (Cmd/Ctrl- oder Shift-Klick) */
.collection-list button.is-markiert { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.collection-list button.is-markiert .collection-count::before { content: "✓ "; color: var(--accent); }

/* V645 (Giotto 08.09.): Profil-Feld auf Ueberschrift-Hoehe, Beschriftung klein darunter, kein Einladen-Knopf im Kopf */
.bo-pianisten-kopf .concert-dashboard-top-head { align-items: stretch; }
.bo-pianist-profil { display: grid; grid-template-rows: 1fr auto; gap: 3px; margin-left: 10px; align-self: stretch; }
.bo-pianist-profil > small { order: 2; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-left: 2px; }
.bo-pianist-wahl { display: grid; }
.bo-pianist-wahl summary { height: 100%; box-sizing: border-box; display: grid; align-content: center; gap: 1px; padding: 6px 40px 6px 14px; }
.bo-pianist-wahl summary strong { font-size: 20px; }
.bo-neu-einladen { margin: 10px 4px 0; color: var(--muted); }

/* V646 (Giotto 08.09.): Rueckmeldungs-Fenster als ruhige Liste */
.rueckmeldung-dialog { max-width: 640px; }
.rueckmeldung-liste { display: grid; gap: 0; max-height: 60vh; overflow-y: auto; }
.rm-zeile { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 4px; border-bottom: 1px solid rgba(167, 185, 199, 0.12); }
.rm-zeile:last-child { border-bottom: 0; }
.rm-zeit { font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.rm-wer { font-weight: 600; }
.rm-wer.is-pianist { color: #9fe3b8; }
.rm-inhalt { min-width: 0; }
.rm-ereignis { line-height: 1.5; }
.rm-zeile.is-abgelehnt .rm-ereignis { color: #e08c8c; }
.rm-zeile.is-warnung .rm-ereignis { color: #f0b3b3; font-weight: 600; }
.rm-chat { margin-top: 3px; font-weight: 600; line-height: 1.5; white-space: pre-wrap; font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif; }
.rm-chat span { font-weight: 500; opacity: 0.7; margin-right: 6px; }
.rm-chat span::after { content: ":"; }
.rm-chat.is-nachricht { color: #e6c78a; }
.rm-chat.is-antwort { color: #9fe3b8; }
.rm-chat.is-leer { color: var(--muted); font-weight: 400; font-size: 12px; }
.rm-gesehen { color: var(--muted); padding: 2px 6px; white-space: nowrap; }
@media (hover: hover) { .rm-gesehen:hover { color: #fff; } }
@media (max-width: 600px) { .rm-zeile { grid-template-columns: 1fr auto; } .rm-zeit { grid-column: 1 / -1; } }

/* V647 (Giotto 08.09.): Zustellungen im Karten-Look der Willkommenskarte */
.collection-import-dialog.is-zustellung { border: 1px solid rgba(246, 211, 101, 0.35);
  background: radial-gradient(120% 80% at 15% 0%, rgba(246, 211, 101, 0.18), transparent 55%), radial-gradient(90% 70% at 90% 100%, rgba(159, 227, 184, 0.14), transparent 60%), rgba(14, 24, 32, 0.98);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.collection-import-dialog.is-zustellung h2 { display: none; }
.zustellung-kopf { position: relative; padding: 4px 0 6px; }
.zustellung-kopf h3 { margin: 2px 0 2px; font-size: 24px; }
.zustellung-kopf > p { margin: 0; color: var(--muted); }
.zustellung-kopf .willkommen-nachricht { margin-top: 12px; }
.zustellung-kopf .willkommen-zahlen { margin: 12px 0 4px; }
.collection-import-dialog.is-zustellung .collection-import-preview { max-height: 32vh; overflow-y: auto; }

/* V648 (Giotto 08.09.): Antwort-Glitzerkarte fuer den Admin */
.willkommen-nachricht.is-antwort { background: rgba(159, 227, 184, 0.14); color: #c9f2d8; border-radius: 12px 12px 4px 12px; }
.antwort-karte .willkommen-nachricht + .willkommen-nachricht { margin-top: 8px; }

/* V650: Suchhilfe im Smart Import */
.smart-import-hinweis-label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
.smart-import-hinweis-label input { width: 100%; box-sizing: border-box; margin-top: 4px; }

/* V651 (Giotto 08.09.): Noten hinzufuegen im Smart Import */
.smart-import-noten-menu { position: relative; }
.smart-import-noten-menu summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(122, 158, 183, 0.28); color: rgba(210, 224, 232, 0.9); font-size: 13px; font-weight: 600; white-space: nowrap; }
.smart-import-noten-menu summary::-webkit-details-marker { display: none; }
.smart-import-noten-menu summary span { color: var(--muted); }
.smart-import-noten-panel { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; min-width: 220px; padding: 6px; border-radius: 10px; background: rgba(14, 24, 32, 0.98); border: 1px solid rgba(122, 158, 183, 0.28); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); }
.smart-import-noten-panel button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #fff; box-shadow: none; }
@media (hover: hover) { .smart-import-noten-panel button:hover { background: rgba(255, 255, 255, 0.06); } }
.smart-import-row-noten { font-size: 12px; color: #9fe3b8; }

/* V656: Tipp fuer die KI im Pruefpanel */
.smart-import-ki-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 6px 0 10px; }
.smart-import-ki-zeile label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.smart-import-ki-zeile input { width: 100%; box-sizing: border-box; }
.smart-import-ki-zeile button { white-space: nowrap; }

/* V657: Interpret zur Wiedererkennung */
.smart-import-row-interpret { font-style: normal; color: #9fe3b8; font-size: 12px; margin-left: 6px; }

/* V663 (Giotto 09.09.): Auge im Block Live-Sammlungen */
.live-auge-btn { width: 28px; height: 28px; padding: 4px; color: rgba(167, 185, 199, 0.6); }
.live-auge-btn svg { width: 18px; height: 18px; }
.live-auge-btn .auge-auf { display: none; }
.live-auge-btn.is-an { color: #9fe3b8; }
.live-auge-btn.is-an .auge-auf { display: block; }
.live-auge-btn.is-an .auge-zu { display: none; }

/* V665 (Giotto 09.09.): dritter Augen-Zustand (Auswahl) + Augen an Sammlungen */
.live-auge-btn.is-auswahl { color: #f6d365; box-shadow: 0 0 0 2px #f6d365, 0 0 12px rgba(246, 211, 101, 0.7); border-radius: 8px; }
.collection-auge { flex: 0 0 auto; width: 16px; height: 16px; margin-left: 6px; color: rgba(167, 185, 199, 0.35); display: inline-flex; }
.collection-auge svg { width: 16px; height: 16px; }
.collection-auge.is-an { color: #9fe3b8; }

/* V667: Auge neben dem Sammlungsnamen, Zahl bleibt rechts */
.collection-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.collection-label > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-auge { margin-left: 0; }

/* V668 (Giotto 09.09., Weg 2): Blockkopf — Symbole fest rechts, Ueberschrift darf umbrechen;
   Auge quadratisch wie das Plus, geschlossenes Auge dicker gezeichnet. */
#libraryView .collection-section .panel-header { align-items: flex-start; gap: 6px; }
#libraryView .collection-section .panel-header h2 { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; flex: 1 1 auto; min-width: 0; }
#libraryView .collection-section .panel-header .icon-button { flex: 0 0 auto; width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 8px; margin-top: -1px; display: inline-flex; align-items: center; justify-content: center; }
#libraryView .collection-section .panel-header .add-collection-button { font-size: 20px; }
.live-auge-btn, .live-auge-btn.is-an, .live-auge-btn.is-auswahl { border-radius: 8px; }
.live-auge-btn svg { width: 18px; height: 18px; }
.live-auge-btn .auge-zu path { stroke-width: 2.7; }
.live-auge-btn .auge-auf path, .live-auge-btn .auge-auf circle { stroke-width: 1.9; }
.live-auge-btn.is-auswahl { box-shadow: 0 0 0 2px #f6d365, 0 0 12px rgba(246, 211, 101, 0.7); }

/* V669 (Giotto 09.09.): Augen-Spalte vor der Zahl; Untermenues per Tipp */
.collection-list button { display: flex; align-items: center; }
.collection-auge { flex: 0 0 22px; width: 22px; height: 16px; margin: 0 4px 0 6px; justify-content: center; }
.collection-auge.is-leer { visibility: hidden; }
.collection-count { flex: 0 0 auto; min-width: 2ch; text-align: right; }
.work-context-submenu.is-open .work-context-submenu-panel { display: grid; }

/* V673 (Giotto 09.09.): unvollstaendige Werke (ohne Komponist) gelb-orange */
#worksTable tr.is-unvollstaendig .title-cell { color: #f0b860; }
#worksTable tr.is-unvollstaendig .title-cell .inline-work-edit-input { color: inherit; }

/* V674 (Giotto 09.09.): Fertige Liste — mit Vorschau schrumpft das Feld, Tabelle scrollt; Wahl bei Gleichnamigen */
[data-smart-import-panel="liste"].has-vorschau { overflow: auto; }
[data-smart-import-panel="liste"].has-vorschau .smart-import-input-label { flex: 0 0 auto; grid-template-rows: auto auto; }
[data-smart-import-panel="liste"].has-vorschau #smartListText { min-height: 0; height: 96px; }
[data-smart-import-panel="liste"].has-vorschau .smart-list-vorschau { flex: 1 1 auto; min-height: 200px; }
.smart-list-wahl { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.smart-list-wahl label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.smart-list-wahl-titel { color: #f0b860; font-weight: 600; }
.smart-list-tabelle tr.is-duplikat input[type="text"] { opacity: 0.8; }

/* V675: Sammelbefehl fuer Gleichnamige */
.smart-list-sammel { white-space: nowrap; }
.smart-list-sammel .text-button { padding: 0 4px; color: #9fe3b8; font-weight: 600; }

/* V678: Eingabefeld im Info-Dialog */
.app-info-input { width: 100%; box-sizing: border-box; margin-top: 8px; font-size: 15px; }

/* V683 (Giotto 09.09.): Versionsnummer klein in der Statusleiste, in allen Ansichten */
.app-status-strip { display: flex; align-items: center; gap: 10px; }
.app-status-strip p { flex: 1 1 auto; min-width: 0; }
.app-status-build { flex: 0 0 auto; font-size: 10px; letter-spacing: 0.06em; color: rgba(167, 185, 199, 0.5); font-variant-numeric: tabular-nums; user-select: none; -webkit-user-select: none; }

/* V684 (Giotto 09.09.): keine blauen Fokusrahmen nach Maus-/Tipp-Bedienung; Tastatur behaelt ihren Ring */
:focus:not(:focus-visible) { outline: none !important; box-shadow: none; }
dialog:focus, details:focus, summary:focus:not(:focus-visible), .smart-import-row:focus:not(:focus-visible) { outline: none !important; }

/* V685 (Giotto 09.09.): uebernommene Titel bleiben sichtbar, abgehakt und gedimmt */
.smart-import-row.is-uebernommen { opacity: 0.55; }
.smart-import-row.is-uebernommen .smart-import-row-status { color: #9fe3b8; }

/* V691: Auswahl bestehende Sammlung im Info-Dialog */
.app-info-wahl { display: grid; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.app-info-wahl select { width: 100%; box-sizing: border-box; }
.app-info-input:disabled { opacity: 0.45; }

/* V694 (Giotto 10.09.): Diagnosefenster */
.diagnose-dialog { max-width: 760px; width: min(760px, 94vw); }
#diagnoseText { width: 100%; box-sizing: border-box; font: 11.5px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; resize: vertical; min-height: 40vh; }