:root {
  --sr-accent: #c96a2e;
  --sr-accent-hover: #b35a22;
  --sr-accent-light: rgba(201, 106, 46, 0.12);
}

[data-theme=dark] {
  --sr-accent: #e07c3a;
  --sr-accent-hover: #c96a2e;
  --sr-accent-light: rgba(224, 124, 58, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --sr-accent: #e07c3a;
    --sr-accent-hover: #c96a2e;
    --sr-accent-light: rgba(224, 124, 58, 0.15);
  }
}
.sr-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--gk-text-secondary);
  user-select: none;
  border-radius: var(--gk-radius-sm, 3px);
  transition: color var(--gk-duration-fast, 150ms), background var(--gk-duration-fast, 150ms);
}
.sr-checkbox > i {
  font-size: 20px;
  line-height: 1;
}
.sr-checkbox[aria-checked=true] {
  color: var(--sr-accent);
}
.sr-checkbox:hover {
  background: var(--gk-interactive-hover);
}
.sr-checkbox:focus-visible {
  outline: 2px solid var(--sr-accent);
  outline-offset: -2px;
}

.gkit-navbar {
  width: 72px;
}
.gkit-navbar.gkit-navbar--collapsed {
  width: 72px;
}
.gkit-navbar.gkit-navbar--collapsed .gkit-navbar-item-text,
.gkit-navbar.gkit-navbar--collapsed .gkit-navbar-header-text,
.gkit-navbar.gkit-navbar--collapsed .gkit-navbar-footer-text {
  opacity: 1;
  width: auto;
  overflow: visible;
}
.gkit-navbar.gkit-navbar--collapsed .gkit-navbar-sub-items {
  display: flex;
}

.gkit-navbar-header {
  position: relative;
  padding: 0;
  min-height: 64px;
  height: 64px;
}

.gkit-navbar-toggle {
  display: none;
}

.gkit-navbar-header-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0;
}

.sr-navbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  border: 1px dashed var(--gk-border-strong);
  border-radius: var(--gk-radius-sm, 4px);
  color: var(--gk-text-tertiary);
  font-family: var(--gk-font-display);
  font-size: 13px;
  font-weight: var(--gk-weight-bold, 700);
  letter-spacing: 0.5px;
  background: transparent;
  user-select: none;
}

.gkit-navbar-items {
  padding: var(--gk-space-1, 4px) 0;
  gap: 2px;
}

.gkit-navbar-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--gk-space-1-5, 6px) var(--gk-space-1, 4px);
  min-height: 72px;
  border-radius: 0;
  text-align: center;
}
.gkit-navbar-item:hover {
  color: var(--sr-accent);
  background: transparent;
}
.gkit-navbar-item:hover .gkit-navbar-item-icon {
  color: var(--sr-accent);
}
.gkit-navbar-item:hover .gkit-navbar-item-icon::after {
  display: none;
}
.gkit-navbar-item.active {
  color: var(--sr-accent);
  background: var(--gk-color-primary-transparent90);
  box-shadow: inset 3px 0 0 var(--sr-accent);
}
.gkit-navbar-item.active .gkit-navbar-item-icon {
  color: var(--sr-accent);
}
.gkit-navbar-item.active .gkit-navbar-item-icon::after {
  display: none;
}

.gkit-navbar-item-icon {
  width: 22px;
  height: 22px;
  font-size: 20px;
}

.gkit-navbar-item-text {
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--gk-weight-medium, 500);
  white-space: normal;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gkit-navbar-footer {
  padding: var(--gk-space-1, 4px) 0;
  gap: 2px;
}

.gkit-page-titlebar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  padding: 0 var(--gk-space-4);
  align-items: center;
  border-bottom: none;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--gk-text-primary) 8%, transparent);
}

.gkit-page-menubar {
  overflow: visible;
}

.sr-song-list {
  container-type: inline-size;
}

.sr-song-list-empty {
  text-align: center;
  padding: var(--gk-space-8, 32px);
  color: var(--gk-text-tertiary);
}

.sr-settings-content {
  padding: var(--gk-space-4, 16px);
  max-width: 600px;
}

.sr-settings-section {
  margin-bottom: var(--gk-space-6, 24px);
}

.sr-settings-section-title {
  font-size: var(--gk-text-base, 16px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  margin: 0 0 var(--gk-space-4, 16px) 0;
  padding-bottom: var(--gk-space-2, 8px);
  border-bottom: 1px solid var(--gk-border-default);
}

.sr-settings-section-hint {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
  margin: calc(-1 * var(--gk-space-3, 12px)) 0 var(--gk-space-3, 12px) 0;
  line-height: 1.4;
}

.sr-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  background: var(--gk-surface-primary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  margin-bottom: var(--gk-space-1, 4px);
}

.sr-settings-label {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
}

.sr-settings-value {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
}
.sr-settings-value--muted {
  color: var(--gk-text-tertiary);
}

.sr-settings-actions {
  display: flex;
  gap: var(--gk-space-2, 8px);
  margin-top: var(--gk-space-4, 16px);
}

.sr-settings-message {
  margin-top: var(--gk-space-3, 12px);
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  border-radius: var(--gk-radius-md, 4px);
  font-size: var(--gk-text-sm, 14px);
}
.sr-settings-message--success {
  background: color-mix(in srgb, var(--gk-color-success-500) 15%, transparent);
  color: var(--gk-color-success-500);
}
.sr-settings-message--error {
  background: color-mix(in srgb, var(--gk-color-error-500) 15%, transparent);
  color: var(--gk-color-error-500);
  user-select: text;
}

.sr-sync-status {
  padding: 2px 8px;
  border-radius: var(--gk-radius-md, 4px);
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
}
.sr-sync-status--connected {
  background: color-mix(in srgb, var(--gk-color-success-500) 15%, transparent);
  color: var(--gk-color-success-500);
}
.sr-sync-status--disconnected {
  background: color-mix(in srgb, var(--gk-text-tertiary) 15%, transparent);
  color: var(--gk-text-tertiary);
}

.sr-sync-email {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
}

.sr-sync-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sr-sync-dot--ok {
  background: var(--gk-color-success-500);
}
.sr-sync-dot--error {
  background: var(--gk-color-error-500);
}

.sr-account-header {
  display: flex;
  align-items: center;
  gap: var(--gk-space-3, 12px);
  padding: var(--gk-space-3, 12px) 0 var(--gk-space-4, 16px) 0;
}

.sr-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.sr-account-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gk-color-accent-500, var(--gk-text-tertiary));
  color: #fff;
  font-size: var(--gk-text-lg, 18px);
  font-weight: var(--gk-weight-semibold, 600);
}

.sr-account-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-account-name {
  font-size: var(--gk-text-base, 16px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-account-email {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-song-properties-page {
  padding: var(--gk-space-4, 16px);
  max-width: 720px;
}

.sr-sp-list-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--gk-space-3, 12px) var(--gk-space-1, 4px) 0;
}

.sr-sp-list-header__switch-label {
  width: 80px;
  text-align: center;
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sr-sp-list {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1, 4px);
  min-height: 32px;
}

.sr-sp-row {
  display: flex;
  flex-direction: column;
  background: var(--gk-surface-primary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  font-size: var(--gk-text-base, 16px);
  overflow: hidden;
}

.sr-sp-row__header {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  cursor: pointer;
  transition: background-color 0.12s ease-in-out;
}
.sr-sp-row__header:hover {
  background: var(--gk-surface-hover, var(--gk-surface-primary));
}
.sr-sp-row__header:hover .sr-sp-row__name {
  text-decoration: underline;
}
.sr-sp-row__header:hover .sr-sp-row__caret {
  color: var(--gk-text-primary);
}
.sr-sp-row__header--renaming {
  cursor: default;
}
.sr-sp-row__header--renaming:hover {
  background: transparent;
}
.sr-sp-row__header--renaming:hover .sr-sp-row__name {
  text-decoration: none;
}

.sr-sp-row__handle {
  color: var(--gk-text-secondary);
  opacity: 0.7;
  font-size: var(--gk-text-sm, 14px);
  width: 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: move;
  line-height: 1;
  user-select: none;
  padding: 2px 4px;
  flex: 0 0 auto;
}

.sr-sp-row__label {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--gk-space-2, 8px);
}

.sr-sp-row__name {
  grid-column: 1;
  grid-row: 1;
  color: var(--gk-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-sp-row__caret {
  grid-column: 2;
  grid-row: 1;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  transition: transform 0.18s ease-in-out, color 0.12s ease-in-out;
  line-height: 1;
}

.sr-sp-row__header--expanded .sr-sp-row__caret {
  transform: rotate(180deg);
}

.sr-sp-row__usage {
  grid-column: 1/-1;
  grid-row: 2;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.25;
}

.sr-sp-row__actions {
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  flex: 0 0 auto;
}

.sr-sp-row__delete:hover {
  color: var(--gk-color-error-500);
}

.sr-sp-row__switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 80px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--gk-border-default);
}

.sr-sp-values {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1, 4px);
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px) var(--gk-space-3, 12px) 40px;
  border-top: 1px solid var(--gk-border-default);
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
}

.sr-sp-values__empty {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
  padding: var(--gk-space-1, 4px) 0;
}

.sr-sp-value-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-1, 4px) 0;
  padding-right: 121px;
}

.sr-sp-value-row__label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sr-sp-value-row__name {
  color: var(--gk-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-sp-value-row__rename {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
}

.sr-sp-row__rename {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
}

.sr-sp-row__rename-input,
.sr-sp-create-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: var(--gk-text-base, 16px);
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  color: var(--gk-text-primary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  outline: none;
}
.sr-sp-row__rename-input:focus,
.sr-sp-create-input:focus {
  border-color: var(--gk-color-accent-500, var(--gk-text-primary));
}

.sr-sp-row__error {
  margin-top: var(--gk-space-1, 4px);
  color: var(--gk-color-error-500);
  font-size: var(--gk-text-sm, 14px);
}

.sr-sp-empty {
  padding: var(--gk-space-3, 12px);
  text-align: center;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
  border: 1px dashed var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
}

.sr-sp-create {
  margin-top: var(--gk-space-4, 16px);
}

.sr-sp-create-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
}

.sr-sp-error {
  margin-top: var(--gk-space-1, 4px);
  color: var(--gk-color-error-500);
  font-size: var(--gk-text-sm, 14px);
}

.sr-sp-drag-ghost {
  opacity: 0.4;
  background: var(--gk-color-accent-500, var(--gk-surface-secondary));
}

.sr-navbar-account {
  position: relative;
}

.sr-navbar-account-dot {
  position: absolute;
  top: 8px;
  left: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--gk-surface-secondary, var(--gk-surface-primary));
  box-sizing: content-box;
  pointer-events: none;
}
.sr-navbar-account-dot--ok {
  background: var(--gk-color-success-500);
}
.sr-navbar-account-dot--error {
  background: var(--gk-color-error-500);
}
.sr-navbar-account-dot--idle {
  background: var(--gk-text-tertiary);
}

.sr-esd-form {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3, 12px);
}

.sr-esd-input {
  width: 100%;
  padding: var(--gk-space-2, 8px);
  border: var(--gk-border-thin, 1px) solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  background: var(--gk-surface-secondary);
  color: var(--gk-text-primary);
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-sm, 14px);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sr-esd-input:hover:not(:disabled):not(:focus) {
  border-color: var(--gk-border-strong);
}
.sr-esd-input:focus {
  outline: none;
  border-color: var(--gk-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gk-border-focus) 30%, transparent);
}
.sr-esd-input.invalid {
  border-color: var(--gk-border-error);
}
.sr-esd-input.invalid:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gk-border-error) 30%, transparent);
}

.sr-esd-input-unit {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
}

.sr-esd-input.sr-esd-input--narrow {
  width: 80px;
  flex-shrink: 0;
}

.sr-esd-unit {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
  white-space: nowrap;
  line-height: 1;
}

.sr-esd-section-hint {
  display: block;
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  font-style: italic;
  padding-top: var(--gk-space-1, 4px);
}

.sr-esd-include-row {
  margin-top: var(--gk-space-1, 4px);
}

.sr-esd-include-label {
  display: flex;
  align-items: flex-start;
  gap: var(--gk-space-2, 8px);
  cursor: pointer;
  user-select: none;
}

.sr-esd-include-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sr-esd-include-text .sr-esd-section-hint {
  padding-top: 2px;
}

.sr-esd-section-title {
  margin: var(--gk-space-3, 12px) 0 0 0;
  padding-top: var(--gk-space-2, 8px);
  font-size: var(--gk-text-sm, 14px);
  font-weight: 600;
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: 1px solid var(--gk-border-default);
}

.sr-esd-slider-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
}

.sr-esd-slider {
  flex: 1;
  min-width: 0;
  accent-color: var(--gk-accent, var(--gk-text-primary));
}

.sr-esd-slider-value {
  min-width: 40px;
  font-variant-numeric: tabular-nums;
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
  text-align: right;
}

.sr-esd-audit-box {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  background: var(--gk-surface-secondary);
  border: var(--gk-border-thin, 1px) solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
}

.sr-esd-audit-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
}

.sr-esd-audit-model {
  color: var(--gk-text-tertiary);
}

.sr-esd-audit-warnings {
  padding-top: var(--gk-space-1, 4px);
  border-top: 1px solid var(--gk-border-default);
}
.sr-esd-audit-warnings ul {
  margin: var(--gk-space-1, 4px) 0 0 0;
  padding-left: var(--gk-space-4, 16px);
}
.sr-esd-audit-warnings ul li {
  margin-bottom: var(--gk-space-1, 4px);
  line-height: 1.4;
}

.sr-spe {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3, 12px);
}

.sr-spe__section {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1, 4px);
}

.sr-spe__section-label {
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sr-spe__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  position: relative;
}

.sr-spe__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--gk-color-accent-500, var(--gk-text-primary));
  color: var(--gk-color-accent-contrast, #fff);
  border-radius: var(--gk-radius-pill, 999px);
  font-size: var(--gk-text-sm, 14px);
  line-height: 1.2;
  max-width: 240px;
}
.sr-spe__pill--input {
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  color: var(--gk-text-primary);
  border: 1px solid var(--gk-border-default);
  padding: 0 10px;
}

.sr-spe__pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-spe__pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
}
.sr-spe__pill-remove:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
}
.sr-spe__pill-remove i {
  font-size: 12px;
}

.sr-spe__pill-input {
  border: none;
  background: transparent;
  outline: none;
  color: inherit;
  font: inherit;
  min-width: 80px;
  padding: 4px 0;
}

.sr-spe__add-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px dashed var(--gk-border-default);
  border-radius: var(--gk-radius-pill, 999px);
  background: transparent;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  cursor: pointer;
}
.sr-spe__add-pill:hover {
  border-color: var(--gk-color-accent-500, var(--gk-text-primary));
  color: var(--gk-text-primary);
}

.sr-spe__autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
}

.sr-spe__autocomplete-item {
  text-align: left;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--gk-text-primary);
  font-size: var(--gk-text-sm, 14px);
  cursor: pointer;
}
.sr-spe__autocomplete-item:hover {
  background: var(--gk-surface-hover, var(--gk-surface-primary));
}

.sr-spe__add-section {
  margin-top: var(--gk-space-2, 8px);
}

.sr-spe__picker {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-1, 4px);
  padding: var(--gk-space-2, 8px) var(--gk-space-8, 32px) var(--gk-space-2, 8px) var(--gk-space-2, 8px);
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
}

.sr-spe__picker-item {
  padding: 4px 10px;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-pill, 999px);
  background: transparent;
  color: var(--gk-text-primary);
  font-size: var(--gk-text-sm, 14px);
  cursor: pointer;
}
.sr-spe__picker-item:hover {
  border-color: var(--gk-color-accent-500, var(--gk-text-primary));
  background: var(--gk-surface-hover, transparent);
}
.sr-spe__picker-item--create {
  border-style: dashed;
  color: var(--gk-text-secondary);
}

.sr-spe__picker-empty {
  flex: 1 1 100%;
  padding: 4px 8px;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
}

.sr-spe__picker-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--gk-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr-spe__picker-close:hover {
  color: var(--gk-text-primary);
}

.sr-spe__create-new {
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  padding: var(--gk-space-1, 4px);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  flex-wrap: wrap;
}

.sr-spe__error {
  flex: 1 1 100%;
  color: var(--gk-color-error-500);
  font-size: var(--gk-text-sm, 14px);
  padding: 4px 0;
}

.sr-bulk-edit {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2, 8px);
}

.sr-bulk-edit__hint {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  font-style: italic;
  padding-bottom: var(--gk-space-2, 8px);
  border-bottom: 1px solid var(--gk-border-default);
  margin-bottom: var(--gk-space-1, 4px);
}

.sr-bulk-row {
  display: grid;
  grid-template-columns: 24px 140px 1fr;
  gap: var(--gk-space-2, 8px);
  align-items: center;
  padding: var(--gk-space-1, 4px) var(--gk-space-2, 8px);
  border-radius: var(--gk-radius-md, 4px);
  transition: background-color 120ms ease;
}
.sr-bulk-row.is-active {
  background: color-mix(in srgb, var(--gk-surface-hover) 60%, transparent);
}

.sr-bulk-row--block {
  grid-template-columns: 1fr;
  gap: var(--gk-space-2, 8px);
}

.sr-bulk-row__header {
  display: grid;
  grid-template-columns: 24px 140px 1fr;
  gap: var(--gk-space-2, 8px);
  align-items: center;
}

.sr-bulk-row__check {
  justify-self: center;
  cursor: pointer;
}

.sr-bulk-row__label {
  margin: 0;
}

.sr-bulk-row__input {
  min-width: 0;
}
.sr-bulk-row__input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sr-bulk-row__input-full {
  grid-column: 1/-1;
}
.sr-bulk-row__input-full.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.sr-pdf-export-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2, 8px);
}

.sr-pdf-export-dialog__hint {
  margin: 0 0 var(--gk-space-2, 8px) 0;
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
}

.sr-pdf-export-dialog__row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: 4px 0;
  cursor: pointer;
  font-size: var(--gk-text-base, 16px);
  color: var(--gk-text-primary);
}
.sr-pdf-export-dialog__row input[type=checkbox] {
  cursor: pointer;
}

.sr-setlist-group {
  margin-bottom: var(--gk-space-6, 24px);
}

.sr-setlist-group-header {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-2, 8px) 0;
  border-bottom: 1px solid var(--gk-border-default);
  margin-bottom: var(--gk-space-3, 12px);
}

.sr-setlist-group-title {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sr-setlist-group-count {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  background: var(--gk-surface-secondary);
  padding: 1px 6px;
  border-radius: var(--gk-radius-md, 4px);
}

.sr-setlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gk-space-3, 12px);
  max-width: calc(1600px + 4 * var(--gk-space-3, 12px));
}

.sr-setlist-card {
  position: relative;
  background: var(--gk-surface-secondary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-3, 12px);
  cursor: pointer;
  transition: border-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), box-shadow var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), background-color var(--gk-duration-fast, 150ms);
}
.sr-setlist-card:hover {
  border-color: var(--gk-color-primary-500);
  background-color: var(--gk-color-primary-transparent75);
  box-shadow: var(--gk-shadow-md);
}

[data-theme=dark] .sr-setlist-card {
  border-color: oklch(1 0 0/0.1);
  background: var(--gk-color-white-transparent95);
}
[data-theme=dark] .sr-setlist-card:hover {
  border-color: var(--gk-color-primary-500);
  background-color: var(--gk-color-primary-transparent75);
}

.sr-setlist-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gk-space-2, 8px);
  margin-bottom: var(--gk-space-1, 4px);
}

.sr-setlist-card-title {
  flex: 1;
  min-width: 0;
  font-size: var(--gk-text-base, 16px);
  font-weight: var(--gk-weight-bold, 700);
  color: var(--gk-text-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-setlist-card__menu-btn {
  flex-shrink: 0;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  color: var(--gk-text-secondary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--gk-radius-sm, 3px) !important;
}
.sr-setlist-card__menu-btn:hover:not(:disabled) {
  background: var(--gk-interactive-hover) !important;
  color: var(--gk-text-primary) !important;
}
@media (pointer: coarse) {
  .sr-setlist-card__menu-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

.sr-setlist-card-meta {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  display: flex;
  gap: var(--gk-space-2, 8px);
  margin-bottom: var(--gk-space-2, 8px);
}

.sr-setlist-card-stats {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  display: flex;
  gap: var(--gk-space-3, 12px);
}

.sr-setlist-card-tags {
  display: flex;
  gap: var(--gk-space-1, 4px);
  flex-wrap: wrap;
  margin-top: var(--gk-space-2, 8px);
}

.sr-setlist-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--gk-radius-md, 4px);
  background: var(--gk-surface-tertiary, #0f3460);
  color: var(--gk-text-primary);
}

.sr-setlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gk-space-3, 12px);
  padding: var(--gk-space-8, 32px);
  color: var(--gk-text-tertiary);
}

.sr-setlist-detail-page .gkit-page-menubar {
  padding-left: calc(var(--gk-space-4) + 40px - 8px);
}
.sr-setlist-detail-page .sr-set-header {
  padding-left: calc(var(--gk-space-4, 16px) + 40px);
}

.sr-setlist-detail-page .gkit-page-title {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  overflow: visible;
  text-overflow: unset;
}

.sr-setlist-detail__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.gkit-page-subtitle:has(.sr-sl-subtitle) {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.sr-sl-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gk-space-2, 8px);
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
}
.sr-sl-subtitle .sr-duration-bar {
  margin-left: var(--gk-space-4, 16px);
}

.sr-sl-subtitle__sep {
  color: var(--gk-text-tertiary);
}

.sr-sl-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  color: var(--gk-accent, var(--gk-text-secondary));
}

.sr-sl-set {
  container-type: inline-size;
}

.sr-sl-entries {
  container-type: inline-size;
  min-height: 32px;
  padding: 0;
}

.sr-sl-drag-ghost {
  opacity: 0.4;
  background: var(--gk-surface-secondary);
}

.sr-sl-entries-empty {
  padding: var(--gk-space-3, 12px) var(--gk-space-4, 16px);
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
}

.sr-sl-toolbar {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  width: 100%;
}

.sr-sl-toolbar-sf.e-toolbar {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.sr-sl-toolbar-sf.e-toolbar,
.sr-sl-toolbar-sf .e-toolbar-items {
  background: transparent;
  border: none;
  box-shadow: none;
}
.sr-sl-toolbar-sf .e-toolbar-item .e-tbar-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 36px;
}
.sr-sl-toolbar-sf .e-toolbar-item .e-tbar-btn:hover {
  background: var(--gk-interactive-hover);
}
.sr-sl-toolbar-sf .e-toolbar-nav {
  background: transparent;
  border: none;
}
.sr-sl-toolbar-sf .e-toolbar-nav:hover {
  background: var(--gk-interactive-hover);
}

.sr-sl-menu .e-menu-item.e-menu-danger,
.sr-sl-menu .e-menu-item.e-menu-danger .e-menu-icon {
  color: var(--gk-color-error-500) !important;
}

.sr-sl-menu--has-selection .e-menu-item:first-child,
.sr-sl-menu--has-selection .e-menu-item:first-child .e-menu-icon,
.sr-sl-menu--has-selection .e-menu-item:first-child .e-caret {
  color: var(--sr-accent) !important;
}

.sr-song-row {
  display: flex;
  align-items: center;
  padding: 0 var(--gk-space-1);
  background: var(--gk-surface-primary);
  border-bottom: 1px solid var(--gk-border-default);
  border-radius: 0;
  margin-bottom: 0;
  cursor: pointer;
  font-size: var(--gk-text-sm, 14px);
  transition: border-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), background var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), transform var(--gk-duration-normal, 300ms) var(--gk-ease-default, ease), opacity var(--gk-duration-normal, 300ms) var(--gk-ease-default, ease);
}
.sr-song-row--compact {
  padding: var(--gk-space-4, 8px);
}
.sr-song-row:hover {
  border-color: var(--gk-border-strong);
  background: var(--gk-interactive-hover);
}
.sr-song-row--selected {
  box-shadow: inset 3px 0 0 var(--sr-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sr-accent) 18%, var(--gk-surface-primary)) 0%, var(--gk-surface-primary) 55%);
}
[data-theme=dark] .sr-song-row--selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sr-accent) 27%, var(--gk-surface-primary)) 0%, var(--gk-surface-primary) 55%);
}
.sr-song-row--played {
  opacity: 0.55;
}
.sr-song-row--played .sr-song-row__title {
  text-decoration: line-through;
  text-decoration-color: var(--gk-text-tertiary);
  color: var(--gk-text-secondary);
}
.sr-song-row--played .sr-song-row__artist,
.sr-song-row--played .sr-song-row__meta,
.sr-song-row--played .sr-song-row__duration {
  opacity: 0.7;
}
.sr-song-row--navigating {
  transform: scale(1.02);
  border-color: var(--sr-accent);
  background: var(--gk-color-secondary-transparent25);
  z-index: 1;
  position: relative;
}
.sr-song-row--faded {
  opacity: 0.4;
}

/*.sr-song-row__handle {
    cursor: grab;
    color: var(--gk-text-secondary);
    opacity: 0.7;
    font-size: var(--gk-text-sm, 14px);
    width: 32px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    &--reserved {
        visibility: hidden;
        cursor: default;
    }
}*/
.sr-song-row__index {
  width: 24px;
  text-align: right;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  flex-shrink: 0;
}

.sr-song-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gk-text-primary);
}

.sr-song-row__artist {
  color: var(--gk-text-secondary);
  margin-left: var(--gk-space-2, 8px);
}

.sr-song-row--title-stacked .sr-song-row__title-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
}
.sr-song-row--title-stacked .sr-song-row__title {
  flex: 0 0 auto;
  font-weight: var(--gk-weight-semibold, 600);
}
.sr-song-row--title-stacked .sr-song-row__artist--block {
  margin-left: 0;
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-song-row--by-artist .sr-song-row__title {
  color: var(--gk-text-secondary);
  font-weight: var(--gk-weight-normal, 400);
}
.sr-song-row--by-artist .sr-song-row__artist {
  color: var(--gk-text-primary);
  font-weight: var(--gk-weight-semibold, 600);
}

.sr-song-row__warning {
  color: var(--gk-color-signal-500);
  margin-right: var(--gk-space-1, 4px);
}

.sr-song-row__meta {
  display: flex;
  margin-left: var(--gk-space-1);
  gap: var(--gk-space-2, 8px);
  flex-shrink: 0;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
}

.sr-song-row__key {
  background: var(--gk-surface-tertiary);
  color: var(--gk-text-primary);
  padding: 1px 6px;
  border-radius: var(--gk-radius-md, 4px);
}

.sr-song-row__audio {
  flex-shrink: 0;
  margin-left: var(--gk-space-2, 8px);
  color: var(--sr-accent);
  font-size: var(--gk-text-md, 16px);
  line-height: 1;
}

.sr-song-row__duration {
  margin-left: var(--gk-space-3);
  text-align: right;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  flex-shrink: 0;
}

.sr-song-row__fitbar {
  margin-left: var(--gk-space-2);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sr-song-row__setbar {
  margin-left: var(--gk-space-2);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.sr-song-row__rating {
  margin-left: var(--gk-space-3);
  margin-right: var(--gk-space-3);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-left: 1px solid var(--gk-color-black-transparent80);
  border-right: 1px solid var(--gk-color-black-transparent80);
}

[data-theme=dark] .sr-song-row__rating {
  border-left: 1px solid var(--gk-color-white-transparent80);
  border-right: 1px solid var(--gk-color-white-transparent80);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .sr-song-row__rating {
    border-left: 1px solid var(--gk-color-white-transparent80);
    border-right: 1px solid var(--gk-color-white-transparent80);
  }
}
.sr-song-row__actions {
  margin-left: var(--gk-space-1);
  display: flex;
  gap: var(--gk-space-1, 4px);
  flex-shrink: 0;
}

.sr-song-row__tags {
  margin-left: var(--gk-space-1);
}

.sr-song-row__genre {
  display: inline-flex;
  align-items: center;
  margin-left: var(--gk-space-2, 8px);
  padding: 1px 8px;
  border: 1px solid var(--gk-border-default);
  border-radius: 999px;
  color: var(--gk-text-secondary);
  background: var(--gk-surface-secondary);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.4;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-song-row__energy {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: var(--gk-space-2, 8px);
  flex-shrink: 0;
  height: 16px;
}

.sr-song-row__energy-bar {
  width: 4px;
  background: var(--gk-border-default);
  border-radius: 1px;
}
.sr-song-row__energy-bar:nth-child(1) {
  height: 30%;
}
.sr-song-row__energy-bar:nth-child(2) {
  height: 45%;
}
.sr-song-row__energy-bar:nth-child(3) {
  height: 60%;
}
.sr-song-row__energy-bar:nth-child(4) {
  height: 80%;
}
.sr-song-row__energy-bar:nth-child(5) {
  height: 100%;
}
.sr-song-row__energy-bar--on {
  background: var(--gk-color-primary-500, #4f8edc);
}

.sr-song-row--energy-bg {
  position: relative;
  isolation: isolate;
}
.sr-song-row--energy-bg > *:not(.sr-song-row__energy-bg) {
  position: relative;
  z-index: 1;
}

.sr-song-row__energy-bg {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: var(--sr-row-energy-left, 70px);
  width: var(--sr-row-energy-width, 0%);
  background: color-mix(in srgb, var(--sr-accent) 18%, transparent);
  pointer-events: none;
  z-index: 0;
}

.sr-song-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-3, 12px) var(--gk-space-4, 16px);
  border-bottom: 1px solid var(--gk-border-default);
}

.sr-song-detail-header__artist {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
}

.sr-song-row__properties {
  display: flex;
  align-items: center;
  margin-left: var(--gk-space-2, 8px);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.sr-spr {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  min-width: 0;
}

.sr-spr__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: var(--gk-radius-md, 4px);
  background: color-mix(in srgb, var(--sr-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sr-accent) 22%, transparent);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.4;
  white-space: nowrap;
}

.sr-song-row--pills-compact .sr-spr__group {
  padding: 0 5px;
  font-size: 11px;
}
.sr-song-row--pills-compact .sr-spr__group-label {
  font-weight: var(--gk-weight-normal, 400);
  font-size: 9px;
}
.sr-song-row--pills-compact .sr-spr__value {
  font-weight: var(--gk-weight-normal, 400);
}

.sr-spr__group-label {
  color: var(--gk-text-tertiary);
  font-weight: var(--gk-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.sr-spr__value {
  display: inline-flex;
  align-items: center;
  color: var(--gk-text-primary);
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  line-height: inherit;
}
.sr-spr__value + .sr-spr__value {
  margin-left: 2px;
}
.sr-spr__value + .sr-spr__value::before {
  content: ",";
  margin-right: 4px;
  color: var(--gk-text-tertiary);
}
.sr-spr__value--clickable {
  cursor: pointer;
  border-radius: 2px;
  padding: 0 2px;
}
.sr-spr__value--clickable:hover {
  background: color-mix(in srgb, var(--sr-accent) 18%, transparent);
}

@container (max-width: 500px) {
  .sr-song-row {
    padding: var(--gk-space-1, 4px) var(--gk-space-4, 16px);
  }
  .sr-song-row__artist {
    display: none;
  }
}
@container (max-width: 350px) {
  .sr-song-row {
    padding: var(--gk-space-0-5, 2px) var(--gk-space-4, 16px);
    font-size: var(--gk-text-xs, 12px);
  }
  .sr-song-row__meta,
  .sr-song-row__properties,
  .sr-song-row__index {
    display: none;
  }
}
.sr-fitbar {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  flex-shrink: 0;
}

.sr-fitbar__track {
  display: inline-flex;
  width: 56px;
  height: 16px;
  border-radius: var(--gk-radius-sm, 3px);
  overflow: hidden;
  background: var(--gk-surface-tertiary);
}

.sr-fitbar__seg {
  flex-grow: var(--sr-fit-seg, 0);
  flex-basis: 0;
  min-width: 2px;
}

.sr-fitbar__seg--1 {
  background: var(--gk-color-error-500);
}

.sr-fitbar__seg--2 {
  background: var(--gk-color-signal-500);
}

.sr-fitbar__seg--3 {
  background: var(--gk-color-success-400);
}

.sr-fitbar__seg--4 {
  background: var(--gk-color-success-600);
}

.sr-fitbar__avg {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sr-fitbar--polarized .sr-fitbar__track {
  outline: 1.5px solid var(--gk-color-error-500);
  outline-offset: 1px;
}

.sr-fitbar--empty .sr-fitbar__track {
  background: var(--gk-surface-tertiary);
  opacity: 0.6;
}

.sr-setbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 28px;
  height: 20px;
  border-radius: var(--gk-radius-sm, 4px);
  font-size: var(--gk-text-xs, 12px);
  font-variant-numeric: tabular-nums;
}

.sr-setbar__glyph {
  font-size: var(--gk-text-md, 16px);
  line-height: 1;
  font-weight: var(--gk-font-weight-bold, 700);
}

.sr-setbar__set {
  font-weight: var(--gk-font-weight-medium, 600);
}

.sr-setbar--contested {
  color: var(--gk-color-signal-600);
}

.sr-setbar--consensus {
  color: var(--gk-text-secondary);
}

.sr-collab-status {
  margin: var(--gk-space-2) var(--gk-space-3);
  border: 1px solid var(--gk-surface-tertiary);
  border-radius: var(--gk-radius-md, 6px);
  background: var(--gk-surface-secondary);
}

.sr-collab-status__summary {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--gk-space-2) var(--gk-space-3);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gk-text-primary);
  font-size: var(--gk-text-sm, 14px);
  text-align: left;
  transition: background-color 0.12s ease;
}

.sr-collab-status__summary:hover {
  background-color: var(--gk-interactive-hover);
}

.sr-collab-status__phase {
  font-weight: var(--gk-font-weight-medium, 600);
}

.sr-collab-status__phase--finalized {
  color: var(--gk-color-success-600);
}

.sr-collab-status__phase--active {
  color: var(--gk-color-signal-600);
}

.sr-collab-status__phase--idle {
  color: var(--gk-text-tertiary);
}

.sr-collab-status__shared {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}

.sr-collab-status__sep {
  color: var(--gk-text-tertiary);
}

.sr-collab-status__count {
  color: var(--gk-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sr-collab-status__chevron {
  margin-left: auto;
  color: var(--gk-text-secondary);
}

.sr-collab-status__members {
  border-top: 1px solid var(--gk-surface-tertiary);
  padding: var(--gk-space-1) var(--gk-space-3) var(--gk-space-2);
}

.sr-collab-status__member {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gk-space-2);
  padding: var(--gk-space-1) 0;
}

.sr-collab-status__member-name {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
  min-width: 9rem;
}

.sr-collab-status__chips {
  display: inline-flex;
  gap: var(--gk-space-2);
  flex-shrink: 0;
}

.sr-collab-status__chip {
  font-size: var(--gk-text-xs, 12px);
  padding: 2px var(--gk-space-2);
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.sr-collab-status__chip--done {
  color: var(--gk-color-success-600);
}

.sr-collab-status__chip--inprogress {
  color: var(--gk-color-signal-600);
}

.sr-collab-status__chip--open {
  color: var(--gk-text-tertiary);
}

.sr-collab-status__empty {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  padding: var(--gk-space-1) 0;
}

.sr-collab-status__actions {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid var(--gk-surface-tertiary);
  padding: var(--gk-space-2) var(--gk-space-3);
}

.sr-budget {
  border: 1px solid var(--gk-surface-tertiary);
  border-radius: var(--gk-radius-md, 6px);
  background: var(--gk-surface-secondary);
  padding: var(--gk-space-2) var(--gk-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
}

.sr-budget__head {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
  flex-wrap: wrap;
}

.sr-budget__title {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-font-weight-medium, 600);
  color: var(--gk-text-primary);
}

.sr-budget__mode-label {
  color: var(--gk-text-tertiary);
  font-weight: var(--gk-font-weight-regular, 400);
}

.sr-budget__calc {
  font-weight: var(--gk-font-weight-regular, 400);
  color: var(--gk-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sr-budget__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gk-space-1) var(--gk-space-2);
}

.sr-budget__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px var(--gk-space-2);
  border-radius: 999px;
  border: 1px solid var(--gk-surface-tertiary);
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  white-space: nowrap;
}

.sr-budget__chip-emoji {
  font-size: var(--gk-text-md);
}

.sr-budget__chip-thr {
  font-weight: var(--gk-font-weight-medium, 600);
}

.sr-budget__chip-time {
  font-variant-numeric: tabular-nums;
}

.sr-budget__chip--fits {
  color: var(--gk-color-success-600);
  border-color: var(--gk-color-success-600);
}

.sr-budget__chip--over {
  color: var(--gk-color-signal-600);
  border-color: var(--gk-color-signal-600);
}

.sr-budget__chip--sum {
  font-weight: var(--gk-font-weight-medium, 600);
}

.sr-budget__chip--warn {
  color: var(--gk-color-signal-600);
  border-color: var(--gk-color-signal-600);
}

.sr-budget__chip--budget {
  color: var(--gk-text-primary);
  border-style: dashed;
  font-weight: var(--gk-font-weight-medium, 600);
  font-variant-numeric: tabular-nums;
}

.sr-budget__formula {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  font-variant-numeric: tabular-nums;
}

.sr-budget__op {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-font-weight-medium, 600);
}

.sr-budget__arrow {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
}

.sr-budget__sep {
  width: 1px;
  align-self: stretch;
  min-height: 18px;
  background: var(--gk-surface-tertiary);
  margin: 0 var(--gk-space-1);
}

.sr-budget__nobudget {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
}

.sr-budget__basis {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.sr-slc-budget-header {
  margin: var(--gk-space-1);
}

.sr-vcols {
  display: flex;
  gap: var(--gk-space-2);
  align-items: flex-start;
  overflow: auto;
  height: 100%;
  padding: var(--gk-space-2) var(--gk-space-3);
}

.sr-vcols__col {
  flex: 0 0 200px;
  width: 200px;
  border: 1px solid var(--gk-surface-tertiary);
  border-radius: var(--gk-radius-md, 6px);
  background: var(--gk-surface-secondary);
  overflow: hidden;
}

.sr-vcols__col--owner {
  border-color: var(--sr-accent, var(--gk-color-signal-600));
}

.sr-vcols__head {
  padding: var(--gk-space-1) var(--gk-space-2);
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-font-weight-medium, 600);
  color: var(--gk-text-primary);
  background: var(--gk-surface-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-vcols__col--owner .sr-vcols__head {
  background: var(--sr-accent, var(--gk-color-signal-600));
  color: var(--gk-color-on-accent, #fff);
}

.sr-vcols__set {
  padding-bottom: var(--gk-space-1);
}

.sr-vcols__set-name {
  padding: 4px var(--gk-space-2) 2px;
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sr-vcols__song {
  padding: 4px var(--gk-space-2);
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
  border-top: 1px solid var(--gk-surface-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-vcols__song--moved {
  color: var(--gk-color-signal-600);
  border-left: 2px solid var(--gk-color-signal-600);
  padding-left: calc(var(--gk-space-2) - 2px);
}

.sr-vcols__hint {
  align-self: center;
  padding: var(--gk-space-3);
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
}

.sr-set-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-1-5, 6px) var(--gk-space-4, 16px);
  background: var(--gk-color-secondary-transparent90);
  border-bottom: 1px solid var(--gk-border-default);
}
[data-theme=dark] .sr-set-header {
  background: var(--gk-color-secondary-transparent75);
}
.sr-set-header--clickable {
  cursor: pointer;
  transition: background var(--gk-duration-fast, 120ms) var(--gk-ease-default, ease);
}
.sr-set-header--clickable:hover {
  background: var(--gk-surface-hover, color-mix(in srgb, var(--gk-text-primary) 8%, transparent));
}
.sr-set-header--compact {
  height: 36px;
  min-height: 36px;
  flex-wrap: nowrap;
  padding: 0 var(--gk-space-3, 12px);
  gap: var(--gk-space-2, 8px);
  overflow: hidden;
}
.sr-set-header--compact .sr-set-header__title {
  font-size: var(--gk-text-sm, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sr-set-header--compact .sr-set-header__summary {
  font-size: var(--gk-text-xs, 12px);
  white-space: nowrap;
}

.sr-set-header__title {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
}

.sr-set-header__summary {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  font-weight: var(--gk-weight-normal, 400);
}

.sr-set-header .sr-duration-bar {
  min-width: 140px;
  margin-left: var(--gk-space-6, 24px);
}

.sr-set-header__trailing {
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  margin-left: auto;
}

.sr-set-header__trailing + .sr-set-header__actions {
  margin-left: 0;
}

.sr-set-header__actions {
  display: flex;
  gap: var(--gk-space-1, 4px);
  margin-left: auto;
}

@container (max-width: 500px) {
  .sr-set-header {
    gap: var(--gk-space-1-5, 6px);
  }
}
@container (max-width: 350px) {
  .sr-set-header .sr-duration-bar,
  .sr-set-header .sr-played-progress--set {
    flex-basis: 100%;
    order: 10;
    margin-left: 0;
  }
}
.sr-delete-action:hover {
  background: var(--gk-color-error-500) !important;
  color: #fff !important;
}
.sr-delete-action:hover i {
  color: #fff !important;
}

.sr-slc-dialog {
  --sr-slc-source-width: clamp(200px, 25vw, 500px);
  --sr-slc-panel-width: 180px;
  --sr-slc-col-gap: var(--gk-space-3, 12px);
  max-height: 99% !important;
}

.sr-slc-footer.sr-slc--source-hidden {
  grid-template-columns: auto auto auto 1fr auto;
}

.sr-slc-header.sr-slc--source-hidden .sr-slc-header__brand-area,
.sr-slc-layout.sr-slc--source-hidden .sr-slc-pane--source,
.sr-slc-footer.sr-slc--source-hidden .sr-slc-footer__assigned-btn {
  display: none;
}

.sr-slc-layout {
  grid-template-columns: var(--sr-slc-source-width) 1fr var(--sr-slc-panel-width);
}
.sr-slc-layout.sr-slc--source-hidden:not(.sr-slc--panel-hidden) {
  grid-template-columns: 1fr var(--sr-slc-panel-width);
}
.sr-slc-layout.sr-slc--panel-hidden:not(.sr-slc--source-hidden) {
  grid-template-columns: var(--sr-slc-source-width) 1fr;
}
.sr-slc-layout.sr-slc--panel-hidden.sr-slc--source-hidden {
  grid-template-columns: 1fr;
}

.sr-slc-dialog .e-dlg-content {
  height: calc(100dvh - 90px);
  overflow: hidden;
  padding: var(--gk-space-1, 4px) var(--gk-space-3, 12px) !important;
}

.sr-slc-dialog .e-dlg-content > div {
  display: flex;
  flex-direction: column;
}

.sr-slc-dialog .e-dlg-header-content {
  display: none !important;
}

.sr-slc-header {
  display: grid;
  grid-template-columns: var(--sr-slc-source-width) 1fr var(--sr-slc-panel-width) auto;
  gap: var(--sr-slc-col-gap);
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  padding: var(--gk-space-1, 4px) 0;
  border-bottom: 1px solid var(--gk-border-subtle, var(--gk-border-default));
  margin-bottom: var(--gk-space-2, 8px);
}
.sr-slc-header.sr-slc--panel-hidden:not(.sr-slc--source-hidden) {
  grid-template-columns: var(--sr-slc-source-width) 1fr auto;
}
.sr-slc-header.sr-slc--source-hidden:not(.sr-slc--panel-hidden) {
  grid-template-columns: 1fr var(--sr-slc-panel-width) auto;
}
.sr-slc-header.sr-slc--source-hidden.sr-slc--panel-hidden {
  grid-template-columns: 1fr auto;
}

.sr-slc-header__close-area {
  justify-self: end;
  display: flex;
  align-items: center;
}

.sr-slc-header__brand-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gk-space-2, 8px);
  min-width: 0;
}

.sr-slc-header__brand {
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.sr-slc-header__controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  flex: 0 0 auto;
}

.sr-slc-header__source-toggle {
  flex: 0 0 auto;
}

.sr-slc-header__target {
  display: flex;
  align-items: center;
  gap: var(--gk-space-3, 12px);
  min-width: 0;
}

.sr-slc-header__setlist-name {
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  font-size: var(--gk-text-xl, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.sr-slc-header__song-count {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-base, 14px);
  white-space: nowrap;
  flex: 0 0 auto;
}

.sr-slc-header__duration {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 380px;
  font-size: var(--gk-text-base, 14px);
}
.sr-slc-header__duration .sr-duration-bar-actual, .sr-slc-header__duration .sr-duration-bar-planned, .sr-slc-header__duration .sr-duration-bar-diff {
  font-size: var(--gk-text-base, 14px);
}

.sr-slc-header__duration-hint {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-slc-layout {
  display: grid;
  gap: var(--sr-slc-col-gap);
  flex: 1 1 auto;
  min-height: 0;
}

.sr-slc-pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  overflow: hidden;
  min-height: 0;
}

.sr-slc-pane-header {
  display: flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  padding: var(--gk-space-1, 4px) var(--gk-space-2, 8px);
  background: var(--gk-surface-secondary);
  border-bottom: 1px solid var(--gk-border-default);
  height: 54px;
  position: relative;
}

.sr-slc-dialog .sr-set-header {
  height: 54px;
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

.sr-slc-dialog .sr-slc-pane-body--horizontal .sr-set-header {
  height: auto;
  min-height: 54px;
  padding-top: var(--gk-space-1, 4px);
  padding-bottom: var(--gk-space-1, 4px);
}

.sr-slc-dialog .sr-set-header--clickable:hover {
  background: var(--gk-interactive-hover);
}
.sr-slc-dialog .sr-set-header--clickable:hover .sr-set-header__title {
  text-decoration: underline;
}

.sr-slc-dialog .sr-song-row:hover .sr-song-row__title {
  text-decoration: underline;
}

.sr-slc-pane-header--search {
  padding: var(--gk-space-1, 4px);
  gap: var(--gk-space-1, 4px);
}

.sr-slc-menu {
  flex: 0 0 auto;
}

.sr-slc-sort-menu {
  margin-left: auto;
}

.sr-slc-sort-menu .e-caret,
.sr-slc-sort-menu .e-menu-caret,
.sr-slc-sort-menu .e-caret-icon {
  display: none !important;
}

.sr-slc-sort-menu .e-menu-container ul.e-menu > li.e-menu-item {
  padding: 0 8px !important;
}

.sr-slc-search {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  background: var(--gk-surface-primary);
  color: var(--gk-text-primary);
  font-size: var(--gk-text-xs, 12px);
}

.sr-slc-search--overlay {
  flex: 1 1 auto;
  height: 32px;
  font-size: var(--gk-text-sm, 14px);
}

.sr-slc-pane-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.sr-slc-pane-body--horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(360px, 1fr);
  gap: var(--gk-space-2, 8px);
  overflow-x: auto;
  overflow-y: hidden;
}

.sr-slc-song-list,
.sr-slc-entry-list {
  min-height: 40px;
}

.sr-slc-source-row {
  cursor: grab;
  user-select: none;
}
.sr-slc-source-row--assigned {
  opacity: 0.4;
}
.sr-slc-source-row--selected {
  background: color-mix(in srgb, var(--gk-color-primary-500) 12%, transparent);
}

.sr-slc-source-row__check {
  flex: 0 0 auto;
}

.sr-slc-set-column {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sr-slc-set-column + .sr-slc-set-column {
  margin-top: 0;
}
.sr-slc-pane-body--horizontal .sr-slc-set-column {
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  overflow: hidden;
}

.sr-slc-set-entries {
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sr-slc-footer {
  display: grid;
  grid-template-columns: var(--sr-slc-source-width) auto auto auto 1fr auto;
  align-items: center;
  gap: var(--gk-space-3, 12px);
  width: 100%;
  padding: var(--gk-space-1, 4px) 0;
}

.sr-slc-footer__assigned-btn {
  grid-column: 1;
  justify-self: start;
  margin-left: 0 !important;
}

.sr-slc-footer .gkit-button,
.sr-slc-footer button.gkit-button {
  min-height: 40px;
}

.sr-slc-dialog .e-footer-content {
  padding: var(--gk-space-1, 4px) var(--gk-space-3, 12px);
  min-height: 0;
}

.sr-slc-pane--panel .sr-slc-pane-header {
  justify-content: flex-start;
}

.sr-slc-panel__title {
  font-weight: var(--gk-weight-semibold, 600);
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
  padding: 0 var(--gk-space-1, 4px);
}

.sr-slc-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1, 4px);
}

.sr-slc-panel__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 4px);
  background: var(--gk-surface-primary);
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  cursor: pointer;
  transition: background-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), border-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-slc-panel__toggle:hover {
  border-color: var(--gk-border-strong);
  color: var(--gk-text-primary);
}
.sr-slc-panel__toggle--on {
  background: color-mix(in srgb, var(--gk-color-primary-500) 12%, transparent);
  color: var(--gk-text-primary);
  border-color: var(--gk-color-primary-500);
}

.sr-slc-panel__property-group {
  margin-top: var(--gk-space-2, 8px);
  padding: var(--gk-space-2, 8px);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
}

.sr-slc-panel__property-name {
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--gk-space-1, 4px);
}

.sr-slc-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.sr-slc-panel__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--sr-accent) 22%, transparent);
  background: color-mix(in srgb, var(--sr-accent) 8%, transparent);
  color: var(--gk-text-primary);
  border-radius: var(--gk-radius-lg, 12px);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.4;
  cursor: pointer;
  transition: opacity var(--gk-duration-fast, 120ms) var(--gk-ease-default, ease);
}
.sr-slc-panel__pill:hover {
  border-color: var(--gk-border-strong);
}
.sr-slc-panel__pill--off {
  opacity: 0.4;
  text-decoration: line-through;
  background: transparent;
  color: var(--gk-text-tertiary);
}

.sr-slc-set-anchors {
  display: flex;
  align-items: stretch;
  gap: var(--gk-space-1, 4px);
  height: 54px;
  padding: var(--gk-space-1, 4px);
  background: var(--gk-surface-secondary);
  border-bottom: 1px solid var(--gk-border-default);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.sr-slc-set-anchor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  min-width: 132px;
  padding: 4px 12px;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  background: var(--gk-surface-primary);
  color: var(--gk-text-primary);
  cursor: pointer;
  font: inherit;
  transition: background var(--gk-duration-fast, 120ms) var(--gk-ease-default, ease), border-color var(--gk-duration-fast, 120ms) var(--gk-ease-default, ease);
}
.sr-slc-set-anchor:hover {
  background: var(--gk-interactive-hover);
  border-color: var(--gk-border-strong);
}
.sr-slc-set-anchor__name {
  font-weight: var(--gk-weight-semibold, 600);
  font-size: var(--gk-text-sm, 14px);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-slc-set-anchor__sublabel {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  align-self: stretch;
  padding: 2px 0;
}
.sr-slc-set-anchor--over .sr-slc-set-anchor__sublabel {
  margin: 2px -12px -4px -12px;
  padding: 2px 12px 4px 12px;
  border-radius: 0 0 var(--gk-radius-md, 4px) var(--gk-radius-md, 4px);
  color: var(--gk-color-error-500);
  background: transparent;
  font-weight: 700;
}

.sr-slc-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sr-slc-filter__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--gk-color-accent-500, var(--gk-text-primary));
  color: var(--gk-color-accent-contrast, #fff);
  font-size: 10px;
  font-weight: var(--gk-weight-semibold, 600);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.sr-slc-filter-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 30;
  min-width: 280px;
  max-width: 360px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--gk-surface-secondary, var(--gk-surface-primary));
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.sr-slc-filter-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  border-bottom: 1px solid var(--gk-border-default);
}

.sr-slc-filter-popover__title {
  font-weight: var(--gk-weight-semibold, 600);
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
}

.sr-slc-filter-popover__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
}

.sr-slc-filter-popover__footer {
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  border-top: 1px solid var(--gk-border-default);
  display: flex;
  justify-content: flex-end;
}

.sr-slc-filter-popover__empty {
  padding: var(--gk-space-3, 12px);
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
  text-align: center;
}

.sr-slc-filter-group {
  margin-bottom: var(--gk-space-3, 12px);
}
.sr-slc-filter-group:last-child {
  margin-bottom: 0;
}

.sr-slc-filter-group__title {
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--gk-space-1, 4px);
}

.sr-slc-filter-group__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sr-slc-filter-item {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: 4px 6px;
  border-radius: var(--gk-radius-sm, 3px);
  cursor: pointer;
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
}
.sr-slc-filter-item:hover {
  background: var(--gk-surface-hover, var(--gk-surface-primary));
}
.sr-slc-filter-item input[type=checkbox] {
  flex: 0 0 auto;
  cursor: pointer;
}

.sr-slc-filter-item__label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-slc-filter-item__count {
  flex: 0 0 auto;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
}

.sr-slc-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-1, 4px);
  padding: var(--gk-space-2, 8px) var(--gk-space-3, 12px);
  border-bottom: 1px solid var(--gk-border-default);
  background: var(--gk-surface-primary);
}

.sr-slc-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--gk-color-accent-500) 35%, transparent);
  background: color-mix(in srgb, var(--gk-color-accent-500) 12%, transparent);
  color: var(--gk-text-primary);
  border-radius: var(--gk-radius-pill, 999px);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.4;
  cursor: pointer;
}
.sr-slc-filter-pill:hover {
  border-color: var(--gk-color-error-500);
  background: color-mix(in srgb, var(--gk-color-error-500) 12%, transparent);
}

.sr-slc-filter-pill__group {
  color: var(--gk-text-tertiary);
  font-weight: var(--gk-weight-semibold, 600);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.sr-slc-filter-pill__value {
  color: var(--gk-text-primary);
}

.sr-slc-filter-pill__remove {
  font-size: 12px;
  opacity: 0.7;
}

.sr-slc-filter-pill__clear-all {
  align-self: center;
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--gk-radius-sm, 3px);
}
.sr-slc-filter-pill__clear-all:hover {
  background: var(--gk-surface-hover, var(--gk-surface-primary));
  color: var(--gk-text-primary);
}

.sr-stl {
  --sr-stl-cell-h: 32px;
  --sr-stl-title-h: 56px;
  --sr-stl-delete-h: 28px;
  --sr-stl-rowlabel-w: 60px;
  --sr-stl-card-gap: 6px;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2, 8px);
  width: 100%;
  min-width: 0;
}

.sr-stl__filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sr-stl__filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sr-stl__filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--gk-space-2, 10px);
  min-width: 96px;
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 4px);
  background: var(--gk-surface-primary);
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  cursor: pointer;
  transition: background-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), border-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-stl__filter-toggle:hover {
  border-color: var(--gk-border-strong);
  color: var(--gk-text-primary);
}
.sr-stl__filter-toggle--on {
  background: color-mix(in srgb, var(--gk-color-primary-500) 12%, transparent);
  color: var(--gk-text-primary);
  border-color: var(--gk-color-primary-500);
}

.sr-stl__filter-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.sr-stl__filter-dot--energy {
  background: var(--sr-stl-energy-color, #ff8c1a);
}
.sr-stl__filter-dot--engagement {
  background: var(--sr-stl-engagement-color, hsl(200, 65%, 50%));
}
.sr-stl__filter-dot--vocals {
  background: hsl(280, 55%, 55%);
}
.sr-stl__filter-dot--tags {
  background: hsl(150, 55%, 50%);
}
.sr-stl__filter-dot--genre {
  background: hsl(30, 70%, 55%);
}
.sr-stl__filter-dot--curve {
  background: var(--sr-stl-curve-color, hsl(0, 75%, 55%));
}

.sr-stl__filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sr-stl__filter-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: var(--gk-weight-medium, 500);
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: opacity var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), filter var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-stl__filter-pill--off {
  opacity: 0.4;
  filter: grayscale(0.8);
  text-decoration: line-through;
}

.sr-stl__grid {
  display: grid;
  grid-template-columns: var(--sr-stl-rowlabel-w, 60px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.sr-stl__row-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--sr-stl-card-gap, 6px) 6px var(--sr-stl-card-gap, 6px) 0;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
}

.sr-stl__row-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-stl__row-label--energy {
  height: var(--sr-stl-energy-h, 200px);
}
.sr-stl__row-label--cell {
  height: var(--sr-stl-cell-h, 32px);
}
.sr-stl__row-label--title {
  height: var(--sr-stl-title-h, 56px);
}
.sr-stl__row-label--delete {
  height: var(--sr-stl-delete-h, 28px);
}

.sr-stl__columns-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
}

.sr-stl__columns-track {
  position: relative;
  width: max-content;
  min-width: 100%;
}

.sr-stl__curve-overlay,
.sr-stl__list-curve-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.sr-stl__curve-overlay {
  left: 0;
}

.sr-stl__curve-path {
  fill: none;
  stroke: var(--sr-stl-curve-color, hsl(0, 75%, 55%));
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

.sr-stl__curve-fill {
  fill: var(--sr-stl-curve-color, hsl(0, 75%, 55%));
  fill-opacity: 0.5;
  stroke: none;
}

.sr-stl--curve-on .sr-stl__bar,
.sr-stl--curve-on .sr-stl__row-bar {
  opacity: 0.75;
}

.sr-stl__columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--sr-stl-card-gap, 6px);
  padding: var(--sr-stl-card-gap, 6px) var(--sr-stl-card-gap, 6px);
  width: max-content;
}

.sr-stl__column {
  width: var(--sr-stl-slot-w, 108px);
  flex: 0 0 var(--sr-stl-slot-w, 108px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--gk-surface-primary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: opacity var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), filter var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), box-shadow var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-stl__column:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.sr-stl__column--off {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.sr-stl__energy {
  height: var(--sr-stl-energy-h, 200px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 10px;
}

.sr-stl__bar-stack {
  width: 100%;
  max-width: 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sr-stl__bar {
  width: 100%;
  flex: 0 0 auto;
}
.sr-stl__bar--energy {
  background: var(--sr-stl-energy-color, #ff8c1a);
}
.sr-stl__bar--engagement {
  background: var(--sr-stl-engagement-color, hsl(200, 65%, 50%));
}

.sr-stl__cell {
  height: var(--sr-stl-cell-h, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 6px;
  overflow: hidden;
}

.sr-stl__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--gk-weight-medium, 500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.sr-stl__pill--vocal {
  min-height: var(--sr-stl-list-bar-h, 24px);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: var(--gk-weight-semibold, 600);
}

.sr-stl__title {
  height: var(--sr-stl-title-h, 56px);
  padding: 4px 6px;
  background: var(--gk-surface-secondary);
  border-bottom: 1px solid var(--gk-border-default);
  text-align: center;
  font-size: 12px;
  font-weight: var(--gk-weight-semibold, 600);
  line-height: 1.3;
  color: var(--gk-text-primary);
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transition: background var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-stl__title:hover {
  background: var(--gk-interactive-hover);
}
.sr-stl__title:active {
  cursor: grabbing;
}

.sr-stl__column-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gk-space-1, 4px);
}

.sr-stl__row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gk-space-1, 4px);
}

.sr-stl__empty {
  padding: var(--gk-space-3, 12px);
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  font-style: italic;
  text-align: center;
}

.sr-stl__list {
  --sr-stl-list-row-h: 48px;
  --sr-stl-list-handle-w: 24px;
  --sr-stl-list-meta-w: 280px;
  --sr-stl-list-bar-w: 360px;
  --sr-stl-list-row-gap: 8px;
  --sr-stl-list-row-pad-x: 8px;
  position: relative;
  width: 100%;
  min-width: 0;
}

.sr-stl__rows {
  display: flex;
  flex-direction: column;
}

.sr-stl__row {
  display: grid;
  grid-template-columns: var(--sr-stl-list-handle-w, 24px) var(--sr-stl-list-meta-w, 280px) var(--sr-stl-list-bar-w, 360px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sr-stl-list-row-gap, 8px);
  padding: 0 var(--sr-stl-list-row-pad-x, 8px);
  height: var(--sr-stl-list-row-h, 48px);
  border-bottom: 1px solid var(--gk-border-default);
  background: var(--gk-surface-primary);
  transition: background-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), opacity var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
  overflow: hidden;
}
.sr-stl__row:hover {
  background: var(--gk-surface-hover);
}
.sr-stl__row--off {
  opacity: 0.35;
}

.sr-stl__row-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--gk-text-tertiary);
  font-size: 14px;
  cursor: grab;
  user-select: none;
}
.sr-stl__row-handle:active {
  cursor: grabbing;
}

.sr-stl__row-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sr-stl__row-meta--clickable {
  cursor: pointer;
}
.sr-stl__row-meta--clickable:hover .sr-stl__row-title {
  color: var(--gk-color-accent, var(--gk-text-primary));
}

.sr-stl__row-title {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-stl__row-artist {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-secondary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-stl__row-bar-track {
  width: 100%;
  height: var(--sr-stl-list-bar-h, 24px);
  background: color-mix(in srgb, var(--gk-text-primary) 8%, transparent);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 0 auto;
}

.sr-stl__row-bar {
  height: 100%;
  flex: 0 0 auto;
  transition: width var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
}
.sr-stl__row-bar.sr-stl__bar--energy {
  background: var(--sr-stl-energy-color, #ff8c1a);
}
.sr-stl__row-bar.sr-stl__bar--engagement {
  background: var(--sr-stl-engagement-color, hsl(200, 65%, 50%));
}

.sr-stl__row-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.sr-duration-bar {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  min-width: 180px;
}

.sr-duration-bar-track {
  flex: 1;
  height: 8px;
  background: var(--gk-surface-tertiary, #0f3460);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.sr-duration-bar-fill {
  height: 100%;
  background: var(--gk-color-success-500);
  transition: width var(--gk-duration-normal, 300ms) var(--gk-ease-default, ease);
}
.sr-duration-bar-fill--over {
  background: var(--gk-color-error-500);
}

.sr-duration-bar-label {
  display: flex;
  gap: var(--gk-space-1, 4px);
  font-size: var(--gk-text-xs, 12px);
  white-space: nowrap;
  flex-shrink: 0;
}

.sr-duration-bar-actual {
  color: var(--gk-text-primary);
}

.sr-duration-bar-separator {
  color: var(--gk-text-tertiary);
}

.sr-duration-bar-planned {
  color: var(--gk-text-tertiary);
}

.sr-duration-bar-diff {
  font-weight: var(--gk-weight-medium, 500);
}
.sr-duration-bar-diff--under {
  color: var(--gk-color-success-500);
}
.sr-duration-bar-diff--over {
  color: var(--gk-color-error-500);
}

.sr-played-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  white-space: nowrap;
  flex-shrink: 0;
}

.sr-played-progress--global {
  width: 280px;
  min-width: 220px;
}
.sr-played-progress--global .sr-played-progress__track {
  height: 6px;
}
.sr-played-progress--global .sr-played-progress__count,
.sr-played-progress--global .sr-played-progress__time {
  font-size: var(--gk-text-sm, 13px);
}

.sr-played-progress--set {
  width: 200px;
  min-width: 160px;
}
.sr-played-progress--set .sr-played-progress__track {
  height: 4px;
}
.sr-played-progress--set .sr-played-progress__count,
.sr-played-progress--set .sr-played-progress__time {
  font-size: var(--gk-text-xs, 12px);
}

.sr-played-progress__count {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  color: var(--gk-text-primary);
  font-weight: var(--gk-weight-semibold, 600);
}

.sr-played-progress__icon {
  color: var(--gk-color-success-500);
  flex-shrink: 0;
}

.sr-played-progress__count-total {
  color: var(--gk-text-tertiary);
  font-weight: var(--gk-weight-normal, 400);
}

.sr-played-progress__track {
  flex: 1;
  min-width: 40px;
  background: var(--gk-color-secondary-transparent25);
  border-radius: 999px;
  overflow: hidden;
}

.sr-played-progress__fill {
  height: 100%;
  background: var(--sr-accent);
  border-radius: 999px;
  transition: width var(--gk-duration-normal, 300ms) var(--gk-ease-default, ease);
}

.sr-played-progress__time {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--gk-text-secondary);
}

.sr-played-progress__time-value {
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--sr-accent);
}

.sr-played-progress__time-suffix {
  color: var(--gk-text-tertiary);
  font-size: 0.85em;
}

@container (max-width: 500px) {
  .sr-played-progress--set {
    width: 160px;
    min-width: 120px;
  }
  .sr-played-progress--set .sr-played-progress__time-suffix {
    display: none;
  }
}
.sr-page-fade-out .gkit-page-content {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease-in, transform 200ms ease-in;
}

.sr-import {
  padding: var(--gk-space-4, 16px);
  max-width: 800px;
}

.sr-import-section {
  margin-bottom: var(--gk-space-6, 24px);
}

.sr-import-section-title {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
  margin-bottom: var(--gk-space-2, 8px);
}

.sr-import-hint {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  margin-bottom: var(--gk-space-3, 12px);
}

.sr-import-status {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-secondary);
  margin-bottom: var(--gk-space-2, 8px);
  user-select: text;
}
.sr-import-status--success {
  color: var(--gk-color-success-500);
}
.sr-import-status--warn {
  color: var(--gk-color-signal-500);
}
.sr-import-status--error {
  color: var(--gk-color-error-500);
}

.sr-import-list {
  margin-bottom: var(--gk-space-4, 16px);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 4px);
  overflow: hidden;
}

.sr-import-list-header {
  padding: var(--gk-space-1-5, 6px) var(--gk-space-3, 12px);
  background: var(--gk-surface-secondary);
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  border-bottom: 1px solid var(--gk-border-default);
}

.sr-import-list-item {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2, 8px);
  padding: var(--gk-space-1, 4px) var(--gk-space-3, 12px);
  font-size: var(--gk-text-sm, 14px);
  border-bottom: 1px solid var(--gk-border-subtle);
}
.sr-import-list-item:last-child {
  border-bottom: none;
}

.sr-import-list-title {
  flex: 1;
  color: var(--gk-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-import-list-meta {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  flex-shrink: 0;
}

.sr-import-list-more {
  padding: var(--gk-space-1, 4px) var(--gk-space-3, 12px);
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  font-style: italic;
}

.sr-import-result {
  padding: var(--gk-space-3, 12px);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 4px);
  background: var(--gk-surface-secondary);
}

.gkit-busy-animation {
  --gk-busy-bg-base: color-mix(in srgb, var(--gk-color-primary-500), transparent 25%);
}
.gkit-busy-animation div {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--gk-color-primary-500);
  background: var(--gk-busy-bg-base);
  box-shadow: none;
}

@keyframes gkit-busy-pulse {
  to {
    transform: scale(1.15);
    background: color-mix(in srgb, var(--gk-color-primary-500), transparent 75%);
  }
}
.gkit-busy-progress-bar {
  --gk-pb-bg-not-filled: color-mix(in srgb, var(--gk-color-primary-500), transparent 75%);
  --gk-pb-dot-size: 18px;
  --gk-pb-dot-size-filled: 23px;
  gap: 5px;
  align-items: center;
}
.gkit-busy-progress-bar .gkit-pb-item {
  flex: unset;
  width: var(--gk-pb-dot-size);
  height: var(--gk-pb-dot-size);
  border-radius: 50%;
  border: 2px solid var(--gk-color-primary-500);
  background: var(--gk-pb-bg-not-filled);
  box-shadow: none;
  transition: width 0.25s var(--gk-ease-default, ease), height 0.25s var(--gk-ease-default, ease), background 0.25s var(--gk-ease-default, ease);
}
.gkit-busy-progress-bar .gkit-pb-item.gkit-pb-item-filled {
  width: var(--gk-pb-dot-size-filled);
  height: var(--gk-pb-dot-size-filled);
  background: var(--gk-color-primary-500);
  animation: none;
}

.sr-startup-screen-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
}
.sr-startup-screen-container .sr-startup-background {
  height: 100vh;
  width: 100vw;
  background: url("../images/Guitar.png") no-repeat center center/cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(16px);
}
.sr-startup-screen-container.hidden {
  display: none;
}
.sr-startup-screen-container.show .sr-startup-background {
  animation: sr-startup-bg-fade-in 1s ease-out forwards;
}
.sr-startup-screen-container.hide .sr-startup-background {
  animation: sr-startup-fade-out 600ms ease-in forwards;
}
.sr-startup-screen-container.hide .sr-brand-mark-2026 {
  animation: sr-startup-fade-out 600ms ease-in forwards;
}

@keyframes sr-startup-bg-fade-in {
  from {
    opacity: 0;
    filter: blur(16px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes sr-startup-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.sr-brand-mark-2026 {
  --startup-stroke: var(--gk-color-primary-500, #6b1a8e);
  --startup-fill: var(--gk-color-primary-400, #8b3aa9);
  --startup-text: #fff;
  --startup-text-muted: rgba(255, 255, 255, 0.5);
  --startup-go-color: #ffe500;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  max-width: 520px;
  overflow: visible;
}
.sr-brand-mark-2026.brand-sr-remastered, .sr-brand-mark-2026.brand-sr-go {
  --startup-stroke: var(--sr-accent, #e07c3a);
  --startup-fill: var(--sr-accent, #e07c3a);
}
.sr-brand-mark-2026.brand-bb-bandboard {
  --startup-stroke: var(--gk-color-primary-100, #d4b3ff);
  --startup-fill: var(--gk-color-primary-400, #8b3aa9);
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circles,
.sr-brand-mark-2026 .sr-brand-mark-2026__song,
.sr-brand-mark-2026 .sr-brand-mark-2026__repertoire,
.sr-brand-mark-2026 .sr-brand-mark-2026__brand,
.sr-brand-mark-2026 .sr-brand-mark-2026__overlay {
  display: block;
  width: 100%;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__song {
  position: relative;
  margin-top: -30.6349084782%;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__repertoire {
  margin-top: 8px;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__brand {
  position: relative;
  margin-top: 2px;
  width: 100%;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__separator {
  width: 100%;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__separator rect {
  fill: var(--startup-stroke);
  opacity: 0.49;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__overlay {
  position: absolute;
  right: -2%;
  bottom: -8%;
  width: 38%;
  pointer-events: none;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-bg {
  fill: var(--startup-fill);
  opacity: 0;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-outer,
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-mid,
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-inner {
  fill: none;
  stroke: var(--startup-stroke);
  stroke-miterlimit: 10;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.7);
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-outer {
  stroke-width: 2px;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-mid {
  stroke-width: 1px;
  opacity: 0;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__circle-inner {
  stroke-width: 0.5px;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__letter {
  fill: none;
  stroke: var(--startup-stroke);
  stroke-linecap: round;
  stroke-width: 10px;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__song {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  transform-origin: center;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__repertoire {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(6px);
  transform-origin: center;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__repertoire path {
  fill: var(--startup-stroke);
  opacity: 0.85;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__brand {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(6px);
  transform-origin: center;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__overlay {
  opacity: 0;
  transform: scale(0.7) rotate(-3deg);
  filter: blur(10px);
  transform-origin: center;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__remastered-group {
  opacity: 0.5;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__remastered-group path {
  fill: var(--startup-text);
}
.sr-brand-mark-2026 .sr-brand-mark-2026__bandboard path {
  fill: var(--startup-text);
  stroke: var(--startup-stroke);
  stroke-width: 0.5px;
  stroke-miterlimit: 10;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__go {
  width: 100%;
  height: auto;
}
.sr-brand-mark-2026 .sr-brand-mark-2026__go .sr-brand-mark-2026__go-group path {
  fill: var(--startup-go-color);
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__circle-bg {
  animation: sr-brand-mark-2026-bg-fade 600ms ease-out forwards 150ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__circle-outer {
  animation: sr-brand-mark-2026-circle-pop 700ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards 0ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__circle-mid {
  animation: sr-brand-mark-2026-circle-pop 700ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards 100ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__circle-inner {
  animation: sr-brand-mark-2026-circle-pop 700ms cubic-bezier(0.34, 1.4, 0.64, 1) forwards 200ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__song {
  animation: sr-brand-mark-2026-letters 700ms ease-out forwards 500ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__repertoire {
  animation: sr-brand-mark-2026-letters 700ms ease-out forwards 1000ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__brand {
  animation: sr-brand-mark-2026-letters 700ms ease-out forwards 1400ms;
}
.sr-brand-mark-2026.show .sr-brand-mark-2026__overlay {
  animation: sr-brand-mark-2026-overlay 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards 2000ms;
}
.sr-brand-mark-2026.hide {
  animation: sr-brand-mark-2026-hide 600ms ease-in forwards;
}

@keyframes sr-brand-mark-2026-bg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.24;
  }
}
@keyframes sr-brand-mark-2026-circle-pop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
}
@keyframes sr-brand-mark-2026-letters {
  from {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
@keyframes sr-brand-mark-2026-overlay {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-3deg);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
    filter: blur(0);
  }
}
@keyframes sr-brand-mark-2026-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced {
  opacity: 0;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__circle-bg {
  opacity: 0.24;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__circle-outer,
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__circle-mid,
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__circle-inner {
  opacity: 0.55;
  transform: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__song,
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__repertoire,
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__brand {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced .sr-brand-mark-2026__overlay {
  opacity: 1;
  transform: rotate(-3deg);
  filter: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced.show {
  animation: sr-brand-mark-2026-reduced 500ms ease-out forwards;
}
.sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__circle-bg, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__circle-outer, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__circle-mid, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__circle-inner, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__song, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__repertoire, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__brand, .sr-brand-mark-2026.sr-brand-mark-2026--reduced.show .sr-brand-mark-2026__overlay {
  animation: none;
}

@keyframes sr-brand-mark-2026-reduced {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}
.sr-brand-mark-2026.sr-brand-mark-2026--static {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  opacity: 1;
}
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__circle-bg {
  opacity: 0.24;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__circle-outer,
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__circle-mid,
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__circle-inner {
  opacity: 0.55;
  transform: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__song,
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__repertoire,
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__brand {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--static .sr-brand-mark-2026__overlay {
  opacity: 1;
  transform: rotate(-3deg);
  filter: none;
  animation: none;
}
.sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__circle-bg, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__circle-outer, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__circle-mid, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__circle-inner, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__song, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__repertoire, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__brand, .sr-brand-mark-2026.sr-brand-mark-2026--static.show .sr-brand-mark-2026__overlay {
  animation: none;
}

.sr-build-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1, 0.25rem);
  padding: 0.1rem var(--gk-space-2, 0.5rem);
  border-radius: var(--gk-radius-sm, 3px);
  font-size: var(--gk-text-xs, 0.7rem);
  font-weight: var(--gk-weight-semibold, 600);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  background: var(--gk-surface-tertiary, rgba(127, 127, 127, 0.25));
  color: var(--gk-text-tertiary, #8892b0);
}
.sr-build-badge__version {
  opacity: 0.85;
  font-weight: var(--gk-weight-regular, 400);
  text-transform: none;
  letter-spacing: 0;
}
.sr-build-badge--test {
  background: var(--sr-accent, #e07c3a);
  color: var(--gk-text-on-primary, #fff);
}
.sr-build-badge--beta {
  background: var(--gk-color-signal-600, #6d5ae0);
  color: var(--gk-text-on-primary, #fff);
}
.sr-build-badge--fixed {
  position: fixed;
  right: var(--gk-space-3, 0.75rem);
  bottom: var(--gk-space-3, 0.75rem);
  z-index: 2147483000;
  box-shadow: var(--gk-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.25));
}

.sr-startup-badge {
  position: absolute;
  left: 50%;
  bottom: var(--gk-space-6, 1.5rem);
  transform: translateX(-50%);
  z-index: 2;
}

.loading-progress {
  position: absolute;
  display: block;
  width: 5rem;
  height: 5rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto;
}
.loading-progress circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.4rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--gk-color-primary-500);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  inset: calc(20vh + 5.75rem) 0 auto 0;
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-color-primary-400, #fff);
  letter-spacing: 0.5px;
}
.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}

.sr-login-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gk-space-6);
  background: var(--gk-surface-page);
}

.sr-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--gk-surface-secondary);
  border: 1px solid var(--gk-border-subtle);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-8) var(--gk-space-7, 1.75rem);
  box-shadow: var(--gk-shadow-md);
}

.sr-login-brand {
  text-align: center;
  margin-bottom: var(--gk-space-6);
}
.sr-login-brand h1 {
  margin: 0 0 var(--gk-space-1);
  font-size: var(--gk-text-xl, 20px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
}

.sr-login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--gk-radius-lg, 6px);
  background: var(--gk-color-primary-500);
  color: var(--gk-text-on-primary);
  font-weight: var(--gk-weight-bold, 700);
  font-size: var(--gk-text-xl, 20px);
  margin-bottom: var(--gk-space-3);
}

.sr-login-subtitle {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin: 0;
}

.sr-login-error {
  background: var(--gk-surface-error-subtle);
  border: 1px solid var(--gk-border-error);
  color: var(--gk-color-error-500);
  padding: var(--gk-space-2) var(--gk-space-3);
  border-radius: var(--gk-radius-sm, 3px);
  font-size: var(--gk-text-sm, 14px);
  margin-bottom: var(--gk-space-4);
}

.sr-login-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2);
}

.sr-login-provider {
  width: 100%;
  border: none;
  border-radius: var(--gk-radius-sm, 3px);
  padding: var(--gk-space-3) var(--gk-space-4);
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gk-space-2);
}
.sr-login-provider--primary {
  background: var(--gk-color-primary-500);
  color: var(--gk-text-on-primary);
}
.sr-login-provider--primary:hover:not(:disabled) {
  background: var(--gk-color-primary-600);
}
.sr-login-provider--secondary {
  background: var(--gk-surface-secondary);
  color: var(--gk-text-primary);
  border: 1px solid var(--gk-border-default);
}
.sr-login-provider--secondary:hover:not(:disabled) {
  background: var(--gk-surface-hover);
}
.sr-login-provider--disabled {
  background: var(--gk-surface-disabled, var(--gk-surface-secondary));
  color: var(--gk-text-tertiary);
  border: 1px solid var(--gk-border-subtle);
}
.sr-login-provider:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.sr-login-provider--primary:disabled {
  opacity: 0.6;
  cursor: progress;
}
.sr-login-provider__hint {
  font-weight: var(--gk-weight-regular, 400);
  font-size: var(--gk-text-xs, 12px);
  opacity: 0.85;
}

.sr-login-other-account {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-xs, 12px);
  padding: var(--gk-space-2) 0 0;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-login-other-account:hover {
  color: var(--gk-text-primary);
}

.sr-login-hint {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.5;
  margin: var(--gk-space-4) 0 0;
  text-align: center;
}

.sr-login-join-band {
  margin: var(--gk-space-4) 0 var(--gk-space-3);
  text-align: center;
  font-size: var(--gk-text-lg, 18px);
  color: var(--gk-text-primary);
}

.bb-toolbar {
  background: transparent;
  border: none;
}

.bb-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--gk-space-3);
  max-width: calc(1600px + 4 * var(--gk-space-3));
  padding: var(--gk-space-4);
}

.bb-band-card {
  position: relative;
  background: var(--gk-surface-secondary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-3);
  cursor: pointer;
  transition: border-color var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), box-shadow var(--gk-duration-fast, 150ms) var(--gk-ease-default, ease), background-color var(--gk-duration-fast, 150ms);
}
.bb-band-card:hover {
  border-color: var(--gk-color-primary-500);
  background-color: var(--gk-color-primary-transparent75);
  box-shadow: var(--gk-shadow-md);
}
.bb-band-card__menu {
  position: absolute;
  top: var(--gk-space-1);
  right: var(--gk-space-1);
  z-index: 1;
}
.bb-band-card__name {
  font-size: var(--gk-text-base, 16px);
  font-weight: var(--gk-weight-bold, 700);
  color: var(--gk-text-primary);
  line-height: 1.3;
  margin-bottom: var(--gk-space-1);
  padding-right: var(--gk-space-5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-band-card__desc {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin-bottom: var(--gk-space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bb-band-card__meta {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  display: flex;
  gap: var(--gk-space-2);
}

[data-theme=dark] .bb-band-card {
  border-color: oklch(1 0 0/0.1);
  background: var(--gk-color-white-transparent95, var(--gk-surface-secondary));
}
[data-theme=dark] .bb-band-card:hover {
  border-color: var(--gk-color-primary-500);
  background-color: var(--gk-color-primary-transparent75);
}

.bb-band-detail__desc {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin: var(--gk-space-4) var(--gk-space-4) var(--gk-space-3);
}

.bb-band-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--gk-space-4);
  padding: 0 var(--gk-space-4) var(--gk-space-4);
  align-items: start;
}

@media (max-width: 900px) {
  .bb-band-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.bb-band-detail__main,
.bb-band-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3);
  min-width: 0;
}

.bb-band-detail__sidebar {
  background: var(--gk-surface-secondary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-3);
}

.bb-band-detail__section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gk-space-2);
  min-height: 32px;
}

.bb-band-detail__section-title {
  margin: 0;
  font-size: var(--gk-text-base, 16px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
}

.bb-member__menu {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.bb-empty {
  background: var(--gk-surface-secondary);
  border: 1px dashed var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-8);
  margin: var(--gk-space-4);
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gk-space-4);
}
.bb-empty p {
  margin: 0;
}

.bb-card {
  background: var(--gk-surface-secondary);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-md, 4px);
  padding: var(--gk-space-4) var(--gk-space-4);
  margin: var(--gk-space-3) var(--gk-space-4);
}
.bb-card__title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
}
.bb-card__placeholder {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin: 0;
}
.bb-card__actions {
  margin-top: var(--gk-space-3);
  display: flex;
  gap: var(--gk-space-2);
}

.bb-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2);
}

.bb-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gk-space-3);
  font-size: var(--gk-text-sm, 14px);
  padding: var(--gk-space-2) 0;
  border-bottom: 1px solid var(--gk-border-default);
}
.bb-member:last-child {
  border-bottom: none;
}
.bb-member__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bb-member__name {
  color: var(--gk-text-primary);
}
.bb-member__sub {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-member__role {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
}
.bb-member__role--pending {
  color: var(--gk-color-warning-700, #92400e);
  background: var(--gk-color-warning-100, #fef3c7);
  padding: 2px var(--gk-space-2);
  border-radius: var(--gk-radius-sm, 3px);
  font-weight: var(--gk-weight-semibold, 600);
}
.bb-member--pending .bb-member__name {
  color: var(--gk-text-secondary);
  font-style: italic;
}

.gkit-field-hint {
  margin: var(--gk-space-1) 0 0;
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
  line-height: 1.4;
}

.bb-invites {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-4);
}
.bb-invites__section-title {
  margin: 0 0 var(--gk-space-2);
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bb-invites__form-row {
  display: flex;
  gap: var(--gk-space-2);
  align-items: flex-start;
}
.bb-invites__email-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
}
.bb-invites__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2);
}
.bb-invites__item {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
  padding: var(--gk-space-2) var(--gk-space-3);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  background: var(--gk-surface-primary);
}
.bb-invites__item--accepted {
  background: var(--gk-surface-secondary);
}
.bb-invites__item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gk-space-3);
}
.bb-invites__item-body {
  display: flex;
  gap: var(--gk-space-2);
  align-items: center;
}
.bb-invites__email {
  font-size: var(--gk-text-sm, 14px);
  color: var(--gk-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bb-invites__url {
  flex: 1;
  font-family: var(--gk-font-mono, monospace);
  font-size: var(--gk-text-xs, 12px);
  min-width: 0;
}
.bb-invites__actions {
  display: flex;
  gap: var(--gk-space-1);
}
.bb-invites__status {
  font-size: var(--gk-text-xs, 12px);
  font-weight: var(--gk-weight-semibold, 600);
  padding: 2px var(--gk-space-2);
  border-radius: var(--gk-radius-sm, 3px);
  white-space: nowrap;
}
.bb-invites__status--open {
  color: var(--gk-color-warning-700, #92400e);
  background: var(--gk-color-warning-100, #fef3c7);
}
.bb-invites__status--accepted {
  color: var(--gk-color-success-700, #15803d);
  background: var(--gk-color-success-100, #dcfce7);
}
.bb-invites__accepted-meta {
  display: flex;
  gap: var(--gk-space-1);
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
}
.bb-invites__sep {
  opacity: 0.6;
}
.bb-invites__empty {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  text-align: center;
  padding: var(--gk-space-6) 0;
  margin: 0;
}

.bb-share-picker__hint {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin: 0 0 var(--gk-space-3);
}
.bb-share-picker__empty {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-sm, 14px);
  text-align: center;
  padding: var(--gk-space-6) 0;
  margin: 0;
}
.bb-share-picker__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
  max-height: 50vh;
  overflow-y: auto;
}
.bb-share-picker__item {
  position: relative;
  padding: var(--gk-space-2) var(--gk-space-3);
  border: 1px solid var(--gk-border-default);
  border-radius: var(--gk-radius-sm, 3px);
  cursor: pointer;
  transition: background-color var(--gk-duration-fast, 150ms), border-color var(--gk-duration-fast, 150ms);
}
.bb-share-picker__item:hover:not(.bb-share-picker__item--disabled) {
  background-color: var(--gk-color-primary-transparent75);
  border-color: var(--gk-color-primary-500);
}
.bb-share-picker__item--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--gk-surface-secondary);
}
.bb-share-picker__name {
  font-size: var(--gk-text-sm, 14px);
  font-weight: var(--gk-weight-semibold, 600);
  color: var(--gk-text-primary);
}
.bb-share-picker__desc {
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  margin-top: 2px;
}
.bb-share-picker__badge {
  position: absolute;
  top: var(--gk-space-2);
  right: var(--gk-space-2);
  font-size: var(--gk-text-xs, 12px);
  color: var(--gk-text-tertiary);
  font-weight: var(--gk-weight-semibold, 600);
}

.bb-invite-hint,
.bb-invite-empty {
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
  margin: 0 0 var(--gk-space-3);
}

.bb-invite-link {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
}
.bb-invite-link__input {
  flex: 1;
  font-family: var(--gk-font-mono, monospace);
  font-size: var(--gk-text-sm, 14px);
}

.bb-invite-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--gk-space-3);
}

.bb-setlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-2);
}

.bb-setlist {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-1);
  padding: var(--gk-space-2) 0;
  border-bottom: 1px solid var(--gk-border-default);
  font-size: var(--gk-text-sm, 14px);
}
.bb-setlist:last-child {
  border-bottom: none;
}
.bb-setlist__name {
  color: var(--gk-text-primary);
}
.bb-setlist__desc {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
}
.bb-setlist--clickable {
  cursor: pointer;
  padding-left: var(--gk-space-2);
  padding-right: var(--gk-space-2);
  margin-left: calc(var(--gk-space-2) * -1);
  margin-right: calc(var(--gk-space-2) * -1);
  border-radius: 3px;
  transition: background-color 120ms;
}
.bb-setlist--clickable:hover {
  background-color: var(--gk-surface-hover, rgba(0, 0, 0, 0.04));
}

.bb-sl-song {
  display: flex;
  flex-direction: column;
}

.bb-sl-files {
  list-style: none;
  margin: 0 0 var(--gk-space-2) calc(var(--gk-space-4) + 40px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bb-sl-file-btn {
  display: flex;
  align-items: center;
  gap: var(--gk-space-2);
  width: 100%;
  padding: var(--gk-space-1) var(--gk-space-2);
  background: transparent;
  border: 1px solid var(--gk-border-default);
  border-radius: 3px;
  color: var(--gk-text-primary);
  font-size: var(--gk-text-sm, 14px);
  cursor: pointer;
  text-align: left;
}
.bb-sl-file-btn:hover:not([disabled]) {
  background-color: var(--gk-surface-hover, rgba(0, 0, 0, 0.04));
}
.bb-sl-file-btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.bb-sl-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-sl-file-size {
  color: var(--gk-text-tertiary);
  font-size: var(--gk-text-xs, 12px);
}

.bb-sl-file-icon {
  color: var(--gk-text-tertiary);
}

.bb-sl-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.bb-sl-fixed {
  flex-shrink: 0;
  container-type: inline-size;
}

.bb-sl-fixed .sr-budget {
  margin: var(--gk-space-2, 8px) var(--gk-space-4, 16px);
}

.bb-sl-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.bb-phase-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: wrap;
  padding: var(--gk-space-2, 8px) var(--gk-space-4, 16px);
  background: var(--sr-accent-light);
  color: var(--gk-text-primary);
  font-size: var(--gk-text-sm, 14px);
  line-height: var(--gk-text-base);
}

.bb-phase-banner__header {
  font-weight: 600;
  font-size: var(--gk-text-base);
}

.bb-phase-banner__checks {
  display: flex;
  flex-direction: row;
  gap: var(--gk-space-6, 4px);
  flex-wrap: wrap;
  margin-top: 8px;
}

.bb-phase-banner__done {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-1, 4px);
  white-space: nowrap;
  cursor: pointer;
}

.bb-ordering-hint {
  padding: var(--gk-space-2, 8px) var(--gk-space-4, 16px);
  color: var(--gk-text-secondary);
  font-size: var(--gk-text-sm, 14px);
}

@container (max-width: 500px) {
  .bb-setlist-detail-page .bb-phase-banner__header,
  .bb-setlist-detail-page .bb-phase-banner__greeting,
  .bb-setlist-detail-page .bb-phase-banner__hint {
    display: none;
  }
  .bb-setlist-detail-page .sr-song-row .gkit-list__drag_handle--reserved {
    display: none;
  }
  .bb-setlist-detail-page .sr-song-row__artist--block {
    display: block;
  }
  .bb-setlist-detail-page .sr-song-row__properties {
    display: none;
  }
}

/*# sourceMappingURL=sr.css.map */