/*************************************************************************************
 *                           GLOBAL RESET & NORMALIZE
 *************************************************************************************/
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Compact project manager list and clearer editor hierarchy. */
.projects-page-shell:not(.project-editor-mode) .project-cards-grid-compact { gap:5px; }
.projects-page-shell:not(.project-editor-mode) .project-card-compact {
  padding:5px 8px; min-height:48px; border-radius:10px; box-shadow:none;
  background:rgba(255,255,255,.035);
}
.projects-page-shell:not(.project-editor-mode) .project-card-summary { min-height:38px; gap:8px; cursor:pointer; }
.projects-page-shell:not(.project-editor-mode) .project-card-identity { gap:9px; }
.projects-page-shell:not(.project-editor-mode) .project-card-cover {
  width:38px; height:38px; flex-basis:38px; border-radius:8px; font-size:.7rem;
}
.projects-page-shell:not(.project-editor-mode) .project-card-title-row { margin:0; gap:6px; }
.projects-page-shell:not(.project-editor-mode) .project-card-title-row h3 { font-size:.92rem; }
.projects-page-shell:not(.project-editor-mode) .project-current-pill { padding:2px 6px; font-size:.58rem; }
.projects-page-shell:not(.project-editor-mode) .project-card-summary:hover { color:var(--songbook-accent); }
.projects-page-shell.project-editor-mode .project-card-focused .project-editor-shell { padding:12px; border-radius:13px; }
.projects-page-shell.project-editor-mode .project-editor-toolbar { margin:0 0 7px; padding:0 0 7px; }
.projects-page-shell.project-editor-mode .project-editor-kicker { font-size:.62rem; }
.projects-page-shell.project-editor-mode .project-editor-toolbar h3 { font-size:1.05rem; margin-top:2px; }
.projects-page-shell.project-editor-mode .project-editor-nav { order:0; margin:0 0 8px; padding:3px; gap:3px; }
.projects-page-shell.project-editor-mode .project-editor-nav-btn { min-height:30px; padding:4px 8px; border-radius:7px; font-size:.72rem; }
.projects-page-shell.project-editor-mode .project-editor-stack { gap:7px; }
.projects-page-shell.project-editor-mode .project-block-card { padding:9px; border-radius:10px; }
.projects-page-shell.project-editor-mode .project-block-card-head { margin-bottom:6px; }
.projects-page-shell.project-editor-mode .project-block-card-head h4 { font-size:.88rem; margin:0; }
.projects-page-shell.project-editor-mode .project-section-note { font-size:.68rem; margin:2px 0 0; }

.tv-desktop-zoom-control { display:none; }
@media (min-width:1101px) { .tv-desktop-zoom-control { display:grid; } }

/* 20260902 - Books profile visibility and compact responsive deck */
.bookpage-root .bookpage-source-tabbar {
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 3px 8px;
}
.bookpage-root .bookpage-source-tabs {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  overflow: visible;
}
.bookpage-root .bookpage-source-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: auto;
  height: 36px;
  min-height: 36px;
  padding: 5px 11px;
}
.bookpage-root .bookpage-deck-sort-controls {
  margin-left: 0;
}
.bookpage-root .bookpage-columns-button,
.bookpage-root .bookpage-add-song-button {
  flex: 0 0 auto;
  min-width: 36px;
  width: 36px;
  height: 34px;
  padding: 0;
  font-size: 1.05rem;
}
.book-deck-line-artist {
  grid-column: 1;
  grid-row: 2;
  color: #ffc95f;
  font-size: .84rem;
  font-weight: 750;
  line-height: 1.2;
}
.book-deck-line-meta { grid-row: 3; }
.book-deck-actions { grid-row: 1 / span 3; }

@media (max-width: 980px) {
  .bookpage-root .bookpage-source-tabbar {
    width: 100%;
    overflow: hidden;
    gap: 4px;
    padding-inline: 2px;
  }
  .bookpage-root .bookpage-source-tabs {
    flex: 0 0 auto;
    overflow: visible;
  }
  .bookpage-root .bookpage-source-tab {
    min-width: 34px;
    height: 32px;
    min-height: 32px;
    padding: 3px 8px;
  }
  .bookpage-root .bookpage-deck-sort-controls {
    flex: 1 1 auto;
    min-width: 0;
    gap: 3px;
  }
  .bookpage-root .bookpage-deck-sort-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 32px;
    min-height: 32px;
  }
  .bookpage-root .bookpage-columns-button { display: none !important; }
  .bookpage-root .bookpage-add-song-button {
    min-width: 32px;
    width: 32px;
    height: 32px;
  }
  .book-deck-card,
  .deck-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 3px 6px;
    padding: 7px 8px;
  }
  .book-deck-line-main {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .book-deck-line-artist {
    grid-column: 1 / -1;
    grid-row: 2;
    color: #ffc95f;
  }
  .book-deck-line-meta { display: none; }
  .book-deck-actions,
  .deck-actions {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: auto;
    flex-wrap: nowrap;
    gap: 3px;
    margin: 0;
  }
  .book-deck-actions .sp-btn,
  .deck-card .sp-btn,
  .sp-btn.bookpage-playlist-plus-btn {
    min-width: 25px !important;
    width: 25px !important;
    min-height: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    font-size: .7rem;
  }
}

/* 20260902 - final Books and Tabs alignment */
#current-song-title-artist.workspace-song-title {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff8ec;
  box-shadow: none;
  text-align: left;
}
.bookpage-mobile-label { display: none; }
.bookpage-root .bookpage-source-tabbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 5px;
  min-height: 44px;
}
.bookpage-root .bookpage-source-tabs { display: flex; flex: 0 0 auto; gap: 3px; }
.bookpage-root .bookpage-source-tab { min-width: 0; height: 34px; min-height: 34px; padding: 5px 10px; }
.bookpage-root .bookpage-source-tab strong { font-size: .78rem; white-space: nowrap; }
.bookpage-root .bookpage-book-search {
  flex: 1 1 260px;
  width: min(320px, 24vw);
  min-width: 150px;
  height: 34px;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 10px;
}
.bookpage-root .bookpage-deck-sort-controls {
  display: flex !important;
  flex: 0 1 320px;
  width: auto;
  min-width: 180px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
}
.bookpage-root .bookpage-deck-sort-controls.hidden { display: none !important; }
.bookpage-root .bookpage-deck-sort-label { margin: 0 7px 0 0; font-size: .68rem; white-space: nowrap; }
.bookpage-root .bookpage-deck-sort-select {
  flex: 1 1 auto;
  width: auto;
  min-width: 110px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px 0 0 10px;
  border-right: 0;
}
.bookpage-root .bookpage-deck-sort-direction {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 0 10px 10px 0;
}
.bookpage-root .bookpage-columns-button { margin-left: 0; }
.tv-song-title { font-size: clamp(20px, 2vw, 28px); }
.tv-song-live-actions { gap: 4px; }
.tv-song-live-actions .tv-btn { min-height: 25px; padding: 4px 7px; font-size: 9px; }

@media (max-width: 560px) {
  .bookpage-desktop-label { display: none; }
  .bookpage-mobile-label { display: inline; }
  .bookpage-root .bookpage-source-tabbar { gap: 3px; min-height: 36px; height: 36px; padding: 2px; }
  .bookpage-root .bookpage-source-tab { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; }
  .bookpage-root .bookpage-book-search { flex: 1 1 90px; width: auto; min-width: 70px; height: 30px; min-height: 30px; padding: 3px 6px; font-size: .7rem; }
  .bookpage-root .bookpage-deck-sort-controls { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .bookpage-root .bookpage-deck-sort-label { display: none; }
  .bookpage-root .bookpage-deck-sort-select { min-width: 0; height: 30px; min-height: 30px; padding: 2px 4px; }
  .bookpage-root .bookpage-deck-sort-direction { flex-basis: 30px; width: 30px; height: 30px; min-height: 30px; }
  .bookpage-root .bookpage-add-song-button { width: 30px; min-width: 30px; height: 30px; }
  .workspace-nav-strip,
  .tv-floating-live-tools {
    top: auto !important;
    bottom: calc(3px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
  }
  .tv-floating-live-tools { justify-content: flex-start !important; gap: 2px !important; padding: 4px !important; }
  #tab-key-chip { border-radius: 8px; min-width: 64px; }
  .tv-floating-stepper, .tv-floating-control-chip, .tv-setlist-switch-btn { margin: 0 !important; border-radius: 8px; }
  .tv-mobile-menu-return.header-nav-btn {
    display: inline-flex;
    margin: 0 0 0 auto !important;
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    height: 32px;
    min-height: 32px;
    border-radius: 9px;
    font-size: .62rem;
  }
}

/*************************************************************************************
 *                           CSS VARIABLES (LIGHT MODE)
 *************************************************************************************/
:root {
    /* Global Colors */
    --body-bg-color: #f5f5f5;
    --text-color: #000000;

    /* Container Colors */
    --main-bg-color: #ffffff;
    --panel-bg-color: #ffffff;
    --panel-border-color: #ccc;
    --bar-bg-color: #f0f0f0;
    --bar-text-color: #000000;

    /* Header Colors */
    --header-bg-color: #ffffff;
    --header-text-color: #000000;

    /* Button Colors */
    --button-bg-color: #007bff;
    --button-text-color: #ffffff;
    --button-hover-bg-color: #0056b3;

    /* Link Colors */
    --link-color: #007bff;
    --link-hover-color: #0056b3;

    /* Tab Button Colors */
    --tab-btn-bg-color: rgb(56, 120, 238);
    --tab-btn-text-color: #ffffff;
    --tab-btn-hover-bg-color: #345bd0;

    /* Input Colors */
    --input-bg-color: #ffffff;
    --input-text-color: #000000;
    --input-border-color: #ccc;

    /* Chord Colors */
    --chord-bg-color: #dfdfdf;
    --chord-text-color: #000000;

    /* Transpose Bar Colors */
    --transpose-bar-bg-color: #f0f0f0;
    --transpose-bar-text-color: #000000;

    /* Preformatted Text Colors */
    --pre-bg-color: #f8f9fa;
    --pre-text-color: #000000;
    --pre-border-color: #ddd;

    /* Pages Container */
    --pages-container-bg-color: #f9f9f9;

    /* tabs page */
    --tab-item-text-color: #333;
    --tab-item-hover-bg-color: #f0f0f0;
    --tab-item-hover-text-color: #000;
    --list-item-border-color: #ddd; /* Light gray for borders in light mode */

    --book-item-active-background-color: red;

    --btn-pages-background-color: white;
    --btn-pages-background-hover-color: white;
}

/*************************************************************************************
 *                           DARK MODE OVERRIDES
 *************************************************************************************/
body.dark-mode {
    --body-bg-color: #121212;
    --text-color: #ffffff;

    --main-bg-color: #2e2e2e;
    --panel-bg-color: #3e3e3e;
    --panel-border-color: #4a4a4a;
    --bar-bg-color: #4a4a4a;
    --bar-text-color: #ffa500;

    --header-bg-color: #3a3a3a;
    --header-text-color: #ffa500;

    --button-bg-color: #ffa500;
    --button-text-color: #000000;
    --button-hover-bg-color: #ff7f00;

    --link-color: #ffa500;
    --link-hover-color: #ff7f00;

    --tab-btn-bg-color: #ffa500;
    --tab-btn-text-color: #000000;
    --tab-btn-hover-bg-color: #ff7f00;

    --input-bg-color: #2e2e2e;
    --input-text-color: #ffffff;
    --input-border-color: #555;

    --chord-bg-color: #2b2b2b;
    --chord-text-color: #ffffff;

    --transpose-bar-bg-color: #4a4a4a;
    --transpose-bar-text-color: #ffffff;

    --pre-bg-color: #343434;
    --pre-text-color: #ffffff;
    --pre-border-color: #444;

    --pages-container-bg-color: #343434;

    --tab-item-text-color: #ffffff;
    --tab-item-hover-bg-color: #555555;
    --tab-item-hover-text-color: #ffa500;
    --list-item-border-color: #555; /* Darker gray for borders in dark mode */

    --book-item-active-background-color: #313131; /* Darker gray for borders in dark mode */
    --btn-pages-background-color: none;
    --btn-pages-background-hover-color: black;
}

/*************************************************************************************
 *                           GLOBAL STYLES
 *************************************************************************************/

/* Main body + font settings */
body {
    font-family: Arial, sans-serif;
    background-color: var(--body-bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    overflow: visible;
}

/* Main Container for entire layout */
.main-container {
    width: 90%;
    background-color: var(--main-bg-color);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

/* Header styling */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Left section (buttons) in header */
.header-left {
    display: flex;
    gap: 10px;
}

/* Right section (auth links) */
.auth-links {
    white-space: nowrap;
    text-align: right;
}

/* Styling for index button (blue by default) */
.index-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 10px 20px;
    border-radius: 5px;
    margin: 4px;
    border: none;
    cursor: pointer;
}

.index-btn:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           BOTTOM BAR
 *************************************************************************************/




/* Toggle left panel button */
#toggle-left-panel-btn {
    width: 80px !important; 
    flex: none !important;
}

/* Ensure the image inside also scales properly */
#toggle-left-panel-img {
    width: 15px;
    height: 15px;
}

/* Specific styles for the refresh button */
#refresh-button {
    width: 80px !important;
    flex: none !important;
}

/* Style the image inside the refresh button */
#refresh-button img {
    width: 15px;
    height: 15px;
}

/*************************************************************************************
 *                           TRANSPOSE & SCROLL SPEED INDICATORS


/*************************************************************************************
 *                           MEDIA QUERIES
 *                           (TABLET AND SMALLER SCREENS)
 *************************************************************************************/
@media (max-width: 1000px) {
    .main-container {
        width: 100%;
        margin: 0;
    }

    .header-left {
        display: none; /* Hide header buttons on tablets */
    }

    /* Keep auth links aligned to the right */
    .auth-links {
        margin-left: auto;
        text-align: right;
    }
}

/*************************************************************************************
 *                           CONTENT CONTAINER
 *************************************************************************************/
.content-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 150px);
    padding-bottom: 80px; /* Add bottom padding (>= bottom bar height) */
}

.main-container.tabviewer-live-mode .index-current-song-container {
    display: none;
}

.main-container.tabviewer-live-mode .content-container {
    min-height: calc(100vh - 110px);
    padding-bottom: 0;
}

.main-container.tabviewer-live-mode .right-panel {
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.main-container.workspace-flat-mode .right-panel {
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.main-container.workspace-flat-mode #dynamic-content-right {
    width: 100%;
}

.main-container.workspace-flat-mode .pages-container {
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.main-container.workspace-flat-mode .song-details-shell .section-title {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(241, 233, 221, 0.64);
}

.main-container.workspace-flat-mode .song-details-shell .song-info-display {
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}

.main-container.workspace-flat-mode .song-details-shell .song-info-item:last-child {
    border-bottom: none;
}

/*************************************************************************************
 *                           LEFT PANEL
 *************************************************************************************/
.left-panel {
    width: 26%; /* Default width when visible */
    padding: 10px;
    background-color: var(--panel-bg-color);
    border: 1px solid var(--panel-border-color);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;  
    transition: width 0.3s ease, padding 0.3s ease;
}

#dynamic-content {
    max-height: 2000px;  
    overflow-y: auto;    
    flex-grow: 1;        
    padding: 10px;       
}

/* Collapsed Left Panel */
.left-panel.collapsed {
    width: 0;
    padding: 0;
    overflow: hidden;
}

/*************************************************************************************
 *                           RIGHT PANEL
 *************************************************************************************/
.right-panel {
    width: 72%; /* Default width when left panel is visible */
    padding: 10px;
    background-color: var(--panel-bg-color);
    border: 1px solid var(--panel-border-color);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    height: auto;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease; 
}

/* Full Width Right Panel */
.right-panel.full-width {
    width: 100%;
}

/* Common transition for left & right panels */
.left-panel, .right-panel {
    transition: width 0.5s ease-in-out;
}

/*************************************************************************************
 *                           PANEL BARS (LEFT/RIGHT/CURRENT SONG INFO)
 *************************************************************************************/
.left-panel-bar,
.right-panel-bar,
#current-song-info {
    width: 100%;
    background-color: var(--bar-bg-color);
    color: var(--bar-text-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    font-size: 15px;
}

/*************************************************************************************
 *                           TAB BUTTON STYLES
 *************************************************************************************/
.tab-btn {
    background-color: var(--tab-btn-bg-color);
    color: var(--tab-btn-text-color);
    font-size: 16px;
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-btn:hover {
    background-color: var(--tab-btn-hover-bg-color);
}

/*************************************************************************************
 *                           INPUTS & TEXTAREAS
 *************************************************************************************/
input[type="text"],
input[type="date"],
input[type="url"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

/*************************************************************************************
 *                           GLOBAL BUTTON STYLING
 *************************************************************************************/
button {
    padding: 10px 20px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           LINKS
 *************************************************************************************/
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Auth Links */
.auth-links {
    font-size: 14px;
    white-space: nowrap;
    text-align: right;
}

/*************************************************************************************
 *                           SONG LIST & BOOK LIST
 *************************************************************************************/
.song-list,
.ul.book-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.song-item,
.book-item {
    list-style-type: none; 
    margin-bottom: 10px;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid var(--list-item-border-color);
    cursor: pointer;
}

.song-item a,
.book-item a {
    text-decoration: none;
    color: #333;
}

.song-item a:hover,
.song-item.active,
.book-item:hover,
.book-item.active {
    background-color: var(--book-item-active-background-color);
}

/*************************************************************************************
 *                           FORM LABELS
 *************************************************************************************/
label {
    font-weight: bold;
}

/*************************************************************************************
 *                           BACK BUTTON
 *************************************************************************************/
.btn-back {
    display: block;
    margin-top: 20px;
    text-align: center;
}

/*************************************************************************************
 *                           NAVIGATION BAR
 *************************************************************************************/
.nav-bar {
    display: flex;
    justify-content: center;
    background-color: var(--bar-bg-color);
    color: var(--bar-text-color);
    padding: 10px;
    border-bottom: 1px solid #ddd;
    gap: 20px;
}

.nav-bar button {
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    color: #555;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-bar button.active {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border-radius: 5px;
}

.nav-bar button:hover {
    color: var(--link-color);
    background-color: #e0e0e0;
}

/*************************************************************************************
 *                           DROPDOWN STYLES
 *************************************************************************************/
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--main-bg-color);
    color: var(--text-color);
    min-width: 300px;
    max-width: 500px;
    max-height: 200px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1;
    overflow-y: auto;
}

.dropdown-content.show {
    display: block;
}

/*************************************************************************************
 *                           TAB EDITOR (CodeMirror, etc.)
 *************************************************************************************/
.tab-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--main-bg-color);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.CodeMirror {
    height: 850px !important;
    width: min(100%, 88ch);
    margin: 0 auto;
    border: 1px solid rgba(255, 191, 71, 0.2);
    box-sizing: border-box;
    background-image: linear-gradient(
      to right,
      transparent 0,
      transparent calc(84ch - 1px),
      rgba(255, 191, 71, 0.18) calc(84ch - 1px),
      rgba(255, 191, 71, 0.18) 84ch,
      transparent 84ch
    );
}

#tab-editor {
    height: 850px !important; 
}

.editor-section {
    overflow-x: auto;
}

.tab-width-guide {
    width: min(100%, 88ch);
    margin: 0 auto 8px;
    color: rgba(255, 198, 110, 0.82);
    font-size: 12px;
    letter-spacing: 0.04em;
}

/*************************************************************************************
 *                           ACTION SECTION (Buttons)
 *************************************************************************************/
.tab-actions {
    text-align: right;
    margin-bottom: 15px;
}

.action-btn {
    background-color: var(--button-bg-color);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.action-btn:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           BOOKS CONTAINER
 *************************************************************************************/
.books-container {
    max-height: 100%;
    overflow-y: auto;
}

/* Books Top Bar */
.books-top-bar {
    position: sticky;
    top: 0;
    background-color: var(--panel-bg-color);
    padding: 10px;
    display: flex;
    align-items: center;
    z-index: 1; 
}

.books-top-bar .btn-add-song {
    margin-right: 10px;
}

.books-top-bar .search-bar {
    flex-grow: 1;
}

/* Books Search */
.books-search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.books-search-container input#book-search-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 16px;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    margin-right: 10px;
    height: 40px;
    box-sizing: border-box;
}

.books-action-buttons button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    height: 40px;
    box-sizing: border-box;
}

.books-action-buttons button:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           TABS PAGE CONTAINER
 *************************************************************************************/
.tabs-container {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    max-width: 1000px;
}

/* Create Tab Button */
.create-tab-btn {
    padding: 10px 20px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 20px;
    display: block;
}

.create-tab-btn:hover {
    background-color: var(--button-hover-bg-color);
}

/* Section Titles */
.section-title {
    font-size: 18px;
    color: var(--link-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

/*************************************************************************************
 *                           TABS LIST
 *************************************************************************************/
.tabs-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}

.tab-version-item {
    color: var(--tab-item-text-color);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab-version-item:hover {
    background-color: var(--tab-item-hover-bg-color);
    color: var(--tab-item-hover-text-color); 
}

/*************************************************************************************
 *                           SONG DETAILS
 *************************************************************************************/
.song-details-container .section-title {
    font-size: 18px;
    color: var(--link-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.song-info-display {
    list-style-type: none;
    padding: 0;
}

.song-info-item {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    display: flex;
    align-items: left;
    flex-wrap: wrap;
    transition: background-color 0.3s ease;
}

.song-info-item strong {
    font-weight: bold;
    margin-right: 5px;
}

.song-info-item span,
.song-info-item a {
    flex-grow: 1;
    word-wrap: break-word;
    white-space: normal;
}

.song-info-edit-btn,
.song-info-link-btn {
    background: none;
    border: 1px solid var(--link-color);
    color: var(--link-color);
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    padding: 0;
    height: auto;
    width: 50px;
    line-height: inherit;
    border-radius: 4px;
}

.song-info-edit-btn:hover,
.song-info-link-btn:hover {
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
}

.song-info-inline-btn {
    background: none;
    border: none;
    color: var(--link-color);
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    padding: 0;
    line-height: inherit;
    width: 100px;
    height: auto;
}

.song-info-inline-btn:hover {
    color: var(--link-hover-color);
}

/*************************************************************************************
 *                           ADD SONG SECTION
 *************************************************************************************/
.add-song-container .section-title {
    font-size: 18px;
    color: var(--link-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.add-song-display {
    list-style-type: none;
    padding: 0;
}

.add-song-item {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    margin: 12px 0 9px 0;
    display: block;
}

.add-song-item strong {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

.add-song-item input,
.add-song-item textarea {
    width: 100%;
    margin: 0;
    padding: 5px;
    height: auto;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
    display: block;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
}

.add-song-item + .add-song-item {
    margin-top: 0;
    padding-top: 0;
}

.add-song-item strong span {
    white-space: nowrap;
}

/*************************************************************************************
 *                           TAB VIEWER (tabviewer.html)
 *************************************************************************************/
.tabviewer-title {
    font-size: 20px;
    color: var(--link-color);
    margin: 17px 0;
}

/* Metadata Section inside tabviewer */
.metadata-section {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.metadata-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.metadata-section,
.metadata-item {
    line-height: 1.2;
}

.metadata-item strong {
    font-weight: bold;
    margin-right: 5px;
}

.metadata-item span {
    flex-grow: 1;
    word-wrap: break-word;
    white-space: normal;
}

/* Tab Content area */
.tabviewer-content {
    margin-top: 20px;
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
}

.tabviewer-content h2 {
    font-size: 15px;
    color: var(--link-color);
    margin-bottom: 10px;
}

/* Pre block styling for tab content */
.tabviewer-pre {
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(30, 30, 30, 0.96));
    color: var(--pre-text-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 18px 18px;
    border-radius: 18px;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
    overflow-x: hidden;
    overflow-y: visible;
    text-wrap: nowrap;
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    margin: 0;
}

.tab-content-stack {
    width: max-content;
    min-width: 100%;
    position: relative;
}

.tab-content-stack.has-presentation-bar {
    box-sizing: border-box;
    padding: 16px 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(30, 30, 30, 0.96));
}

.tab-content-stack.has-presentation-bar .tab-content-presentation-bar {
    margin: 0 0 14px;
}

.tab-content-stack.has-presentation-bar .tabviewer-pre {
    padding: 0 0 calc(18px + 10em);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tabviewer-page-shell.setlist-mode-active .tab-content-stack {
    width: 100%;
    min-width: 100%;
}

.setlist-mode-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    padding: 16px 18px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(39, 39, 39, 0.98), rgba(28, 28, 28, 0.96));
    color: var(--pre-text-color);
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    white-space: normal;
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.setlist-mode-content.is-loading {
    display: block;
}

.tv-setlist-loading-state {
    min-height: 320px;
}

.setlist-mode-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 100%;
}

.setlist-mode-flow-spacer {
    flex: 0 0 auto;
    height: calc(1.45em * 10);
}

.setlist-mode-anchor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(48, 48, 48, 0.96), rgba(36, 36, 36, 0.94));
    scroll-margin-top: 8px;
}

.tab-content-presentation-bar {
    margin-bottom: 14px;
}

.setlist-mode-anchor-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.setlist-mode-anchor-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    width: 100%;
    justify-content: space-between;
}

.setlist-mode-anchor-meta-main {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.setlist-mode-anchor-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
}

.setlist-mode-inline-action {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.setlist-mode-on-air-btn {
    border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.52) !important;
    background: linear-gradient(135deg, rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.24), rgba(255, 255, 255, 0.04)) !important;
}

.setlist-mode-on-air-btn.is-confirmed {
    border-color: rgba(92, 230, 157, 0.62) !important;
    color: #dfffea !important;
    background: linear-gradient(135deg, rgba(92, 230, 157, 0.24), rgba(255, 255, 255, 0.04)) !important;
}

.setlist-mode-version-btn {
    max-width: min(260px, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
}

.setlist-mode-version-btn.is-personal {
    border-color: rgba(255, 191, 71, 0.72) !important;
    background: rgba(255, 191, 71, 0.15) !important;
    color: #ffd058 !important;
    font-weight: 900;
}

.setlist-mode-version-modal-content {
    width: min(560px, calc(100vw - 28px));
}

.setlist-mode-version-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.setlist-mode-version-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 247, 234, 0.9);
    text-align: left;
    cursor: pointer;
}

.setlist-mode-version-option:hover,
.setlist-mode-version-option.is-active {
    border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.52);
    background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.12);
}

.setlist-mode-version-option-main {
    min-width: 0;
    overflow: hidden;
    color: #fff7ea;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setlist-mode-version-option-main em {
    color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.9);
    font-style: normal;
}

.setlist-mode-version-option-creator {
    color: rgba(255, 247, 234, 0.58);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.setlist-mode-request-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding-top: 2px;
}

.tv-request-context-row {
    margin-top: 10px;
}

.setlist-mode-request-item,
.setlist-mode-request-more {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 10px;
    background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.08);
    color: rgba(255, 247, 234, 0.78);
    font-size: 12px;
    line-height: 1.35;
}

.setlist-mode-requester {
    color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.9);
    font-weight: 800;
}

.setlist-mode-request-comment {
    color: rgba(255, 247, 234, 0.88);
}

.setlist-mode-request-more {
    color: rgba(255, 247, 234, 0.6);
}

.setlist-mode-notes-pill {
    cursor: pointer;
    border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.45);
    color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.96);
}

.setlist-mode-notes-pill:focus-visible {
    outline: 2px solid rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.75);
    outline-offset: 2px;
}

.setlist-mode-notes-modal-content {
    width: min(1120px, calc(100vw - 28px));
    min-width: min(88ch, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
}

.setlist-mode-notes-modal-body {
    max-height: min(62vh, 560px);
    overflow: auto;
    margin: 10px 0 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(12, 12, 12, 0.72);
    color: rgba(255, 247, 234, 0.92);
    font: 13px/1.5 'Roboto Mono', monospace;
    white-space: pre;
    min-width: 100%;
}

.setlist-mode-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(48, 48, 48, 0.96), rgba(36, 36, 36, 0.94));
}

.setlist-mode-section-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.setlist-mode-section-index {
    color: rgba(255, 198, 110, 0.78);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.setlist-mode-section-title {
    color: #fff7ea;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    word-break: break-word;
}

.setlist-mode-section-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.setlist-mode-section-meta .tv-version-pill {
    min-height: 30px;
}

.setlist-mode-tempo-pill {
    --setlist-led-ms: 750ms;
}

.setlist-mode-tempo-pill .tempo-led {
    margin-left: 4px;
    animation: setlist-tempo-pulse var(--setlist-led-ms, 750ms) linear infinite;
}

.setlist-mode-pre {
    margin: 0;
    padding: 0 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    white-space: pre;
    word-wrap: normal;
    overflow-wrap: normal;
    overflow: visible;
    text-wrap: nowrap;
    font-family: inherit;
    font-size: inherit;
}

.setlist-mode-pre .line {
    display: block;
    width: max-content;
    min-width: 0;
    white-space: pre;
}

@keyframes setlist-tempo-pulse {
    0%, 82%, 100% {
        opacity: 0.28;
        background-color: #888;
        border-color: rgba(255, 255, 255, 0.12);
    }
    85%, 95% {
        opacity: 1;
        background-color: #ffbf47;
        border-color: rgba(255, 191, 71, 0.72);
    }
}

.tabcontent-viewport {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 42vh;
    height: calc(100vh - 220px);
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    overflow-anchor: none;
    border-radius: 18px;
}

.tabcontent-stage {
    position: relative;
    width: fit-content;
    min-width: 100%;
    transform-origin: top left;
    overflow-anchor: none;
}

.tabviewer-pre .line {
    display: block;
    width: max-content;
    min-width: 100%;
    white-space: pre;
}

.tabviewer-edit-btn {
    margin-top: 10px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border-radius: 5px;
    cursor: pointer;
}

.tabviewer-edit-btn:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           PAGE BUTTONS
 *************************************************************************************/
.btn-pages {
    background-color: var(--btn-pages-background-color);
    color: var(--button-bg-color);
    padding: 10px 20px;
    border: 2px solid var(--button-bg-color);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    margin-left: 2px;
    margin-right: 2px;
}

.btn-pages:hover {
    background-color: var(--btn-pages-background-hover-color);
    color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           CHORD STYLING
 *************************************************************************************/
.chord {
    color: var(--chord-text-color);
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 200;
    background-color: rgba(30, 30, 30, 0.9);
    position: relative;
    line-height: 1;
    z-index: 1;
}

.chord::before,
.chord::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.25em;
    background-color: rgba(30, 30, 30, 0.9);
    z-index: -1;
}

.chord::before {
    left: -0.25em;
}

.chord::after {
    right: -0.25em;
}

.chord.overlap {
    background-color: rgba(42, 42, 42, 0.94);
    color: var(--chord-text-color);
}

/*************************************************************************************
 *                           TABVIEWER TRANSPOSE BAR
 *************************************************************************************/
.tabviewer-transpose-bar {
    display: flex;  
    justify-content: space-evenly;  
    align-items: center;
    flex-wrap: wrap;  
    background-color: var(--transpose-bar-bg-color);
    color: var(--transpose-bar-text-color);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;  
    max-width: 100%;
    box-sizing: border-box;
}

.tabviewer-transpose-bar button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1;
    max-width: 120px;
}

.tabviewer-transpose-bar button:hover {
    background-color: var(--button-hover-bg-color);
}

.tabviewer-transpose-bar #transpose-indicator {
    font-size: 14px;
    margin: 0 10px;
}

/*************************************************************************************
 *                           SCROLL CONTROLS (TAB VIEWER)
 *************************************************************************************/
.tab-viewer-scroll-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.tab-viewer-scroll-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 15px;
    margin: 0 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tab-viewer-scroll-btn:hover {
    background-color: var(--button-hover-bg-color);
}

.tab-viewer-scroll-speed {
    background-color: #d3d3d3;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

/*************************************************************************************
 *                           TOGGLE SWITCH (ACCOUNT THEME)
 *************************************************************************************/
.account-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.account-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.account-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}

.account-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .account-slider {
    background-color: #2196F3;
}

input:checked + .account-slider:before {
    transform: translateX(26px);
}

.account-slider.round {
    border-radius: 34px;
}

.account-slider.round:before {
    border-radius: 50%;
}

/*************************************************************************************
 *                           PAGES CONTAINER
 *************************************************************************************/
.pages-container {
    margin: 0 auto;
    padding: 20px;
    background-color: var(--pages-container-bg-color);
    color: var(--text-color);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tabviewer-page-shell {
    padding: 6px 0 0;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/*************************************************************************************
 *                           LIST ITEM
 *************************************************************************************/
.list-item {
    border-bottom: 1px solid var(--list-item-border-color);
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/*************************************************************************************
 *                           DATATABLES (OVERRIDES)
 *************************************************************************************/
table.dataTable {
    background-color: var(--main-bg-color);
    color: var(--text-color);
    table-layout: fixed;
}

table.dataTable thead {
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
}

table.dataTable thead th {
    border-bottom: 1px solid var(--panel-border-color);
    position: sticky;
    top: 0;
    background: #222; /* or something */
    z-index: 10;
}

/* Style the DataTables buttons */
.dataTables_wrapper .dt-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
}

.dataTables_wrapper .dt-button:hover {
    background-color: var(--button-hover-bg-color);
}

/* Adjust pagination controls */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--button-hover-bg-color);
}

/* Adjust search input */
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    padding: 5px;
    border-radius: 4px;
}

/* Adjust length select */
.dataTables_wrapper .dataTables_length select {
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    padding: 5px;
    border-radius: 4px;
}

/* Move horizontal scrollbar to the top */
.dataTables_wrapper .dataTables_scroll {
    position: relative;
}

.dataTables_wrapper .dataTables_scrollHead {
    overflow: auto;
    overflow-y: hidden;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow: auto;
    overflow-x: inherit;
}

.dataTables_wrapper .dataTables_scrollHead table {
    margin-bottom: -1px;
}

table.dataTable th,
table.dataTable td {
    border-color: var(--panel-border-color);
}

/* Set font size and reduce padding for table cells */
table.dataTable td, table.dataTable th {
    font-size: 13px;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style specific columns */
td.column-artist {
    color: orange;
    font-weight: bold;
}

td.column-title {
    color: white;
    font-weight: bold;
}

td {
    color: white;
    font-weight: normal;
}

/* Add tooltip on hover */
td[title] {
    cursor: pointer;
}

td[title]:hover::after {
    content: attr(title);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px;
    z-index: 9999;
    white-space: normal;
    max-width: 300px;
}

/* Remove alternating row colors */
table.dataTable tbody tr {
    background-color: var(--main-bg-color);
}

/* Remove vertical borders, add horizontal lines */
table.dataTable th,
table.dataTable td {
    border: none;
}

table.dataTable tbody tr {
    border-bottom: 1px solid #555;
}

table.dataTable tbody tr:last-child {
    border-bottom: none;
}

/*************************************************************************************
 *                           MODAL STYLING
 *************************************************************************************/
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: var(--main-bg-color);
    margin: 10% auto;
    padding: 20px;
    border: 1px solid var(--panel-border-color);
    width: 300px;
    color: var(--text-color);
    border-radius: 8px;
}

.modal-content h3 {
    margin-top: 0;
}

.modal-content .close {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover {
    color: var(--link-hover-color);
}

#applySearchColumns {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#applySearchColumns:hover {
    background-color: var(--button-hover-bg-color);
}

/*************************************************************************************
 *                           TABVIEWER DROPDOWN
 *************************************************************************************/
.tabviewer-dropdown-content {
    position: absolute;
    background-color: rgb(182, 19, 19);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.tabviewer-dropdown-item {
    padding: 8px;
    cursor: pointer;
}

.tabviewer-dropdown-item:hover {
    background-color: #f1f1f1;
}

.tabviewer-btn {
    padding: 10px;
    background-color: #007bff;
    color: rgb(0, 0, 0);
    border: none;
    cursor: pointer;
    border-radius: 3px;
}

.tabviewer-btn:hover {
    background-color: #0056b3;
}

/*************************************************************************************
 *                           TABS.HTML STYLES
 *************************************************************************************/
.tabs-list .tab-version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tabs-list .tabs-version-name {
    flex-grow: 1;
    cursor: pointer;
}

.tabs-list .tabs-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tabs-list .tabs-ref-button {
    margin-right: 10px;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.tabs-list .tabs-ref-button.ref-active {
    background-color: orange;
}

.tabs-list .tabs-ref-button.ref-inactive {
    background-color: grey;
}

.tabs-list .tabs-delete-button {
    color: red;
    cursor: pointer;
}

/*************************************************************************************
 *                           COLLAPSED PANELS
 *************************************************************************************/
/* Collapsed Right Panel */
.right-panel.collapsed {
    width: 0; 
    padding: 0;
    display: none; 
}

/* Full Width Left Panel */
.left-panel.full-width {
    width: 100%;
}

/*************************************************************************************
 *                           SMOOTH SLIDING TRANSITIONS
 *************************************************************************************/
.left-panel,
.right-panel {
    transition: width 0.3s ease, padding 0.3s ease;
}

/*************************************************************************************
 *                           VERSIONS LIST CONTAINER (TABVIEWER)
 *************************************************************************************/
#versions-list-container ul {
    list-style-type: none;
    padding-left: 0;
}

/*************************************************************************************
 *                           ACTIVE ON-AIR BUTTON
 *************************************************************************************/
.btn-pages.active-on-air {
    background-color: var(--button-text-color);
    color: var(--button-bg-color);
}

.btn-pages.active {
    background-color: var(--button-text-color);
    color: var(--button-bg-color);
}

/*************************************************************************************
 *                           SEARCH SUGGESTIONS
 *************************************************************************************/
 .search-suggestions {
    position: absolute;
    top: 100%; /* Ensures it appears below the search bar */
    left: 0;
    width: calc(100% - 2px); /* Matches the search bar width */
    max-width: 600px;
    z-index: 1000;
    background-color: var(--panel-bg-color);
    border: 1px solid var(--panel-border-color);
    border-top: none; /* Avoid double border with search bar */
    padding: 5px;
}


.search-suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--list-item-border-color);
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.search-suggestion-item:hover {
    background-color: var(--tab-item-hover-bg-color);
    color: var(--tab-item-hover-text-color);
}

.search-song-info {
    flex-grow: 1;
    font-size: 14px;
    color: var(--bar-text-color);
}

/*************************************************************************************
 *                           SETLIST_CURRENT PAGE
 *************************************************************************************/
.setlist_current-section-title {
    font-size: 18px;
    color: var(--link-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

.setlist_current-tabs-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 20px;
}

.setlist_current-tab-version-item {
    color: var(--tab-item-text-color);
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setlist-add-btn {
    background-color: grey;
    color: white;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 10px;
}

.setlist-add-btn:hover {
    background-color: orange;
}

/* Repeated modal styling for setlist if needed */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    background-color: var(--main-bg-color);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid var(--panel-border-color);
    width: 400px;
    max-width: 90%;
    color: var(--text-color);
    border-radius: 8px;
    position: relative;
}

.modal-content .close {
    color: var(--text-color);
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover {
    color: var(--link-hover-color);
}

#setlist-search-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Suggestions list */
.search-suggestions {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.search-suggestion-item {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--list-item-border-color);
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.search-suggestion-item:hover {
    background-color: var(--tab-item-hover-bg-color);
    color: var(--tab-item-hover-text-color);
}

/*************************************************************************************
 *                           BOOK ITEM & SETLIST BUTTONS
 *************************************************************************************/
.book-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--list-item-border-color);
    padding: 8px 0;
}

.song-info {
    flex-grow: 1;
}

.setlist-add-btn {
    background-color: grey;
    color: orange;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

.setlist-button {
    background-color: grey;
    color: orange;
    padding: 8px 8px;
}

.setlist-button.active {
    background-color: orange;
    color: grey;
}

.drag-handle {
    cursor: grab;
    background-color: #ccc;
    border: none;
    padding: 5px;
    margin-left: 10px;
}

.drag-handle:active {
    cursor: grabbing;
}

/*************************************************************************************
 *                           SETLIST SONG ITEM
 *************************************************************************************/
.tabs-list .tab-version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.tabs-list .tab-version-item:hover {
    background-color: var(--tab-item-hover-bg-color);
    color: var(--tab-item-hover-text-color);
}

.tabs-version-name {
    flex-grow: 1;
    cursor: pointer;
}

.tabs-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.setlist-dnd-button {
    background-color: grey;
    color: white;
    border: none;
    padding: 5px 8px;
    cursor: grab; 
    font-size: 12px;
    border-radius: 3px;
    margin-left: 10px;
}

.setlist-dnd-button:hover {
    background-color: orange;
}

.setlist-dnd-button:active {
    cursor: grabbing;
}

/*************************************************************************************
 *                           .SETLIST-VERSION-BUTTON
 *************************************************************************************/
.setlist-version-button {
    background-color: grey;
    color: white;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 10px;
}

.setlist-version-button:hover {
    background-color: orange;
}

/*************************************************************************************
 *                           DROPDOWN STYLING
 ************************************************************************************/
/* (from the code snippet near "tab-version-dropdown") */
.tab-version-dropdown {
    position: absolute;
    background-color: #333; 
    color: orange;
    font-size: 14px;
    border: 1px solid #444; 
    padding: 5px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    width: 200px;
}

.tab-version-dropdown-item {
    padding: 5px;
    cursor: pointer;
}

.tab-version-dropdown-item:hover {
    background-color: #555;
}

/*************************************************************************************
 *                           ACTION-BTN & INDICATORS
 *************************************************************************************/
.action-btn {
    /* Existing styles */
    background-color: var(--button-bg-color);
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.action-btn:hover {
    background-color: var(--button-hover-bg-color);
}

.tab-indicator, .setlist-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border: 1px solid orange;
    border-radius: 3px;
    color: orange;
    cursor: pointer;
    margin: auto;
}

.tab-indicator:hover, .setlist-indicator:hover {
    background-color: orange;
    color: white;
}

.tabview-button:hover, .setlist-button:hover {
    color: blue;
}

.tab-indicator, .setlist-indicator {
    color: orange;
    cursor: pointer;
}

.tab-indicator:hover, .setlist-indicator:hover {
    text-decoration: underline;
}

/*************************************************************************************
 *                           SETLIST-DELETE-BUTTON
 *************************************************************************************/
.setlist-delete-button {
    background: none;
    border: none;
    color: red;
    font-size: 8px;
    max-height: 12px;
    cursor: pointer;
    margin-left: 5px;
    vertical-align: center;
}

.setlist-delete-button:hover {
    color: darkred;
}

/*************************************************************************************
 *                           TITLE TEXT
 *************************************************************************************/
.title-text {
    font-weight: bold;
    color: orange;
    font-size: 1.3em;
    display: block;
}

/*************************************************************************************
 *                           BOOKPAGE STYLE (Dedicated Section)
 *************************************************************************************/
.bookpage_style-body {
    font-family: Arial, sans-serif;
    background-color: var(--main-bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
}

.bookpage_style-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--link-color);
    margin-bottom: 20px;
}

.bookpage_style-scroll-container {
    position: relative; /* <--- CRUCIAL !!! */
    max-height: 90vh;
    overflow-y: auto;
    /* existing styling below... */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.94), rgba(22, 22, 22, 0.96));
    padding: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  }
  

/* Table Styles */
.bookpage_style-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.bookpage_style-table th {
    background: rgba(18, 18, 18, 0.96);
    color: rgba(255, 247, 234, 0.88);
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    margin: 0;
    background-clip: padding-box;
    text-align: center;
    font-weight: bolder;
    font-size: 14px;
}

.bookpage_style-table td {
    border: 1px solid rgba(255, 255, 255, 0.055);
    background: rgba(255, 255, 255, 0.022);
    color: rgba(255, 247, 234, 0.82);
    padding: 6px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Specific Column Styles */
.bookpage_style-table td:nth-child(2) {
    font-size: 8px;
}
.bookpage_style-table td:nth-child(3) {
    color: #ffd08a;
    font-weight: bold;
}
.bookpage_style-table td:nth-child(4) {
    font-weight: bold;
}
.bookpage_style-table td:nth-child(5) {
    font-size: 9px;
}

.bookpage_style-table th.sort-asc::after {
    content: " ▲";
}
.bookpage_style-table th.sort-desc::after {
    content: " ▼";
}

.bookpage_style-table tbody tr:hover {
    background: rgba(255, 191, 71, 0.07);
    color: #fff7ec;
}

.bookpage_style-table tbody tr:hover td {
    background: rgba(255, 191, 71, 0.055);
}

.bookpage_style-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
}
.bookpage_style-resizer:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Dialog Styles */
.bookpage-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--panel-bg-color);
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 8px;
    width: 450px;
    max-width: 90%;
}

.bookpage-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bookpage-dialog-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--header-text-color);
    margin-bottom: 15px;
}

.bookpage-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.bookpage-checkbox-container {
    display: flex;
    align-items: center;
}

.bookpage-checkbox-label {
    font-size: 14px;
    color: var(--text-color);
}

/* Dialog Actions */
.bookpage-dialog-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
}

.bookpage-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

.bookpage-btn:not(:last-child) {
    margin-right: 10px;
}

.bookpage-btn:hover {
    background-color: var(--button-hover-bg-color);
}

.bookpage_style-edit-input {
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: inherit;
    font-family: inherit;
    color: var(--text-color);
    background-color: var(--main-bg-color);
    outline: none;
    padding: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
















/*************ACTION BUTTON IN BOOKPAGE*****/

.sp-btn {
    margin: 0 2px;
    padding: 3px 6px;  /* smaller than default */
    font-size: 12px;
    background-color: #666;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}
.sp-btn:hover {
    background-color: #333;
}

.btn-playlist-active {
    background-color: orange;
    color: #fff;
  }
  
  



/*************************************************************************************
 *                           BTN-DANGER (ERASE SONG, ETC.)
 *************************************************************************************/
.btn.btn-danger {
    background-color: #ffa347;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    float: right;
    margin-left: auto;
    margin-right: 0;
}

.btn.btn-danger:hover {
    background-color: #ff7300;
}

/*************************************************************************************
 *                           INDEX-CURRENT-SONG-CONTAINER
 *************************************************************************************/
.index-current-song-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    position: relative;
}

.search-bar {
    width: 65%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.current-song-info {
    width: 35%;
    text-align: right;
    font-size: 14px;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*************************************************************************************
 *                           HIDDEN CLASS
 *************************************************************************************/
.hidden {
    display: none;
}












/*************************************************************************************
 *                           PLAYLIST MODAL
 *************************************************************************************/
 .playlist-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    box-sizing: border-box;
    padding: clamp(12px, 2vh, 24px);
    background-color: rgba(0, 0, 0, 0.74);
    backdrop-filter: blur(7px);
    z-index: 1000;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

.playlist-modal-content {
    background-color: var(--panel-bg-color);
    color: var(--text-color);
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

html.songbook-modal-html-open,
body.songbook-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.playlist-hidden {
    display: none;
}

/* Search input styling */
.playlist-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    background-color: var(--input-bg-color);
    color: var(--input-text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

/* Playlist search results */
.playlist-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.playlist-search-results li {
    padding: 10px;
    margin-bottom: 5px;
    cursor: default;
    font-size: 14px;
    color: var(--tab-item-text-color);
    background-color: var(--panel-bg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    border-bottom: 1px solid var(--list-item-border-color);
}

.playlist-search-results li:hover {
    background-color: var(--tab-item-hover-bg-color);
    color: var(--tab-item-hover-text-color);
}

/* First list item border for visual separation */
.playlist-search-results li:first-child {
    border-top: 1px solid var(--list-item-border-color);
}

/* Scrollbar for dark mode */
body.dark-mode .playlist-search-results {
    scrollbar-color: var(--tab-item-hover-bg-color) var(--panel-bg-color);
    scrollbar-width: thin;
}

/* Style for active users */
#playlist-user-search-results li.active {
    font-weight: bold;
    color: orange;
}

/* Style the checkboxes to increase size */
#playlist-search-results li input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin-right: 10px;
    vertical-align: middle;
}








/*************************************************************************************
 *                           PLAYLIST MANAGE SECTION
 *************************************************************************************/
.playlist-info-display {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.playlist-info-item {
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--list-item-border-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.playlist-info-item strong {
    margin-right: 5px;
}

.playlist-info-edit-btn {
    background: none;
    border: 1px solid var(--link-color);
    color: var(--link-color);
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    padding: 0 8px;
    border-radius: 4px;
}

.playlist-info-edit-btn:hover {
    color: var(--link-hover-color);
    border-color: var(--link-hover-color);
}













/* Shared styles for the condition rows in both modals: */
.condition-row,
.auto-sync-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.condition-row select,
.condition-row input,
.auto-sync-row select,
.auto-sync-row input {
    padding: 6px;
    font-size: 14px;
}
.condition-row button,
.auto-sync-row button {
    background-color: #666;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    padding: 4px 8px;
}
.condition-row button:hover,
.auto-sync-row button:hover {
    background-color: #333;
}































.admin-btn {
    background-color: rgb(249, 151, 24); /* Red background */
    color: #000000; /* White text */
    border: none;
    padding: 3px 5px;
    cursor: pointer;
    border-radius: 2px;
}

.admin-btn:hover {
    background-color: rgb(241, 151, 77);  /* Darker red on hover */
}



















/* New styles for the Book Deck modal */
.modal-deck {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 11000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .modal-deck-content {
    background-color: var(--panel-bg-color);
    margin: 8% auto;
    padding: 20px;
    border: 1px solid var(--panel-border-color);
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
  }
  
  .modal-deck-close {
    color: var(--text-color);
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .modal-deck-close:hover {
    color: var(--link-hover-color);
  }
  
  .modal-deck-details p {
    margin: 6px 0;
    line-height: 1.4;
  }
  
  .modal-deck-details p strong {
    margin-right: 4px;
  }
  
  .modal-deck-edit-btn {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
  }
  
  .modal-deck-edit-btn:hover {
    background-color: var(--button-hover-bg-color);
  }
  



  /* Request page styles (moved from old requests.html <style> block) */

.requests_container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}
/* The normal .requests_card you presumably already have: */
.requests_card {
    background-color: var(--panel-bg-color);
    /* your existing styling from old code */
    border: 1px solid var(--panel-border-color);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px; /* optional spacing */
  }
  
  /* The alt row => #343434 background, maybe white text */
  .requests_card-alt {
    background-color: #343434;
    color: #fff; 
  }
  
.requests_song-info {
    font-size: 16px;
    font-weight: bold;
    color: orange;
}
.requests_requester-line {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.4;
}
.requests_time {
    font-size: 12px;
    color: #999;
}
.requests_actions {
    margin-top: 6px; 
    display: flex;
    gap: 10px; 
}
.requests_actions button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 6px 10px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.requests_actions button:hover {
    background-color: var(--button-hover-bg-color);
}







/* ================================================================
 *  SET‑LIST BARS  –  layout left‑aligned, one single horizontal row
 * ================================================================ */

/* 1) High & low bars : single row, no wrap, stuck to left margin */
/* 1) Setlist bars : CACHÉES par défaut */
#setlist-nav-container,
#setlist-nav-container-bottom{
    display:none;              /* <-- caché par défaut */
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    margin:0;
}

/* Optionnel : une classe utilitaire pour afficher proprement
   si tu veux piloter à la classe plutôt qu’en style inline */
.setlist-visible{
    display:flex !important;   /* à utiliser seulement si besoin */
}


/* 2) Song box : two lines, centred text, fixed width                          */
.setlist-label-box{
    display:flex;
    flex-direction:column;       /* title on top, artist below                 */
    justify-content:center;      /* vertical centring                          */
    align-items:center;          /* horizontal centring                        */
    min-width:18em;
    max-width:18em;
    padding:6px 10px;
    border:1px solid var(--panel-border-color);
    border-radius:6px;
    background:var(--panel-bg-color);
    overflow:hidden;             /* clip over‑long text                        */
    text-align:center;
}

/* 3) “– / +” buttons : same height as the song box, never wrap                */
#setlist-nav-container .btn-pages,
#setlist-nav-container-bottom .btn-pages{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 14px;
    font-size:1.1rem;
    height:calc(0.9rem + 0.8rem + 12px);  /* 2 lines + total vertical padding  */
    line-height:1;
    white-space:nowrap;          /* ensure the sign itself never wraps         */
}

/* 4) Text inside the box                                                       */
.setlist-title{
    font-weight:600;
    font-size:0.9rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.setlist-artist{
    font-size:0.8rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}























/* LED tempo */
.tempo-led {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  flex: 0 0 14px;
  border-radius: 50%;
  background-color: #888;
  opacity: 0.3;
  box-sizing: border-box;
  transition: opacity 0.08s ease-in-out, background-color 0.08s ease-in-out, border-color 0.08s ease-in-out;
  vertical-align: middle;
  transform: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
.tempo-led.on {
  background-color: #ffbf47;
  opacity: 1;
  border-color: rgba(255, 191, 71, 0.72);
  transform: none;
}

.tempo-led.tempo-led-small {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-left: 2px;
  box-shadow: none;
}

.tempo-led.tempo-led-small.on {
  transform: none;
}


/* Start tempo button */
.tempo-btn {
  margin-left: 6px;
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}





























/* 2 colonnes fixes (gauche = participation, droite = à la carte) */
.requests_columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}

/* Garder 2 colonnes jusqu'à des écrans assez étroits.
   On ne passe à 1 colonne QUE sous 640px (mobile), 
   donc les tablettes (>= 640px, ex: 768px) restent en 2 colonnes. */
@media (max-width: 640px) {
  .requests_columns {
    grid-template-columns: 1fr;
  }
}

/* Titres colonnes */
.requests_col_title {
  font-size: 16px;
  color: var(--link-color);
  margin-bottom: 8px;
}

/* Un peu d'air entre cartes */
.requests_col .requests_card {
  margin-bottom: 12px;
}

/* Lignes compactes à l’intérieur des cartes : pas de <br>, pas d’espaces inutiles */
.requests_lines .req-line {
  margin: 2px 0;
  line-height: 1.25;
}
























/* Bouton "jouée" ✔ en haut à droite des vignettes */
.req-played-btn {
  position: absolute;
  top: 5px;
  right: 36px;          /* laisse la place du X à droite */
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: #777;     /* gris = éteint */
  color: #fff;
  font-weight: 700;
  line-height: 26px;
  cursor: pointer;
  opacity: 0.95;
}
.req-played-btn.on {
  background: #2ecc71;  /* vert = ON */
}

/* X delete à droite du ✔ */
.req-delete-x {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 20px;
  color: #e74c3c;
  cursor: pointer;
}

/* Colonnes requests (2 colonnes jusqu’à <640px) */
.requests_columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .requests_columns { grid-template-columns: 1fr; }
}

.requests_col_title { font-size: 16px; color: var(--link-color); margin-bottom: 8px; }
.requests_subtitle  { font-size: 14px; opacity: .9; margin: 6px 0; }
.requests_col .requests_card { margin-bottom: 12px; }

.requests_lines .req-line { margin: 2px 0; line-height: 1.25; }


















/* Laisse de la place en haut des cartes pour les actions (toggle + X) */
.requests_card .requests_lines {
  padding-top: 34px; /* ~hauteur des boutons fixes en haut */
}

/* Toggle on/off (remplace l'ancien bouton 'req-played-btn') */
.req-switch {
  position: absolute;
  top: 6px;
  right: 40px;               /* on laisse la place pour le X à droite */
  width: 42px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.req-switch .track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #7a7a7a;       /* gris = off */
  transition: background 0.2s ease;
}
.req-switch .thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: left 0.2s ease;
}
.req-switch.on .track {
  background: #2ecc71;       /* vert = on (jouée) */
}
.req-switch.on .thumb {
  left: 22px;
}

/* X delete (rouge pas trop flash) */
.req-delete-x {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 20px;
  color: #d15b5b;            /* rouge doux */
  cursor: pointer;
}
.req-delete-x:hover {
  color: #c04848;
}






















/* On Air reprend la grille des requests, mais on force un comportement responsive serré */
.onair-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Ajuste un peu la typo interne */
.onair-card .onair-line {
  margin: 2px 0;
  line-height: 1.25;
}
.onair-card .onair-line.small {
  font-size: 0.9em;
  opacity: 0.85;
}





/* === On Air cards, palette "requests" réutilisée === */
.onair-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.onair-card {
  background: #2f2f2f;                 /* proche du fond requests en dark */
  border: 1px solid #444;
  border-left: 5px solid #fa6400;       /* accent orange (requests) */
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease, border-color .2s ease;
}

.onair-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  border-left-color: #ffc336;           /* jaune à hover (requests) */
}

.onair-card .onair-line {
  margin: 2px 0;
  line-height: 1.25;
  color: #fff;
}

.onair-card .onair-line.small {
  font-size: 0.92em;
  opacity: 0.85;
}

/* Accents typographiques harmonisés avec requests */
.onair-card strong { color: #fa6400; }      /* username en orange */
.onair-card em    { color: #ffcf6e; }       /* version name en jaune doux */






















/* ================================================================
   Requests : style identique à On Air (cartes sombres + accents)
   ================================================================ */

.requests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Carte Request = clone d'On Air mais avec zone message */
.requests-card {
  background: #2f2f2f;
  border: 1px solid #444;
  border-left: 5px solid #fa6400;   /* accent orange */
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  position: relative;
  padding-top: 36px;                /* réserve pour boutons */
  transition: transform .1s ease, box-shadow .1s ease, border-color .2s ease;
}

.requests-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  border-left-color: #ffc336;       /* hover jaune */
}

/* Typo harmonisée */
.requests-card .req-line {
  margin: 2px 0;
  line-height: 1.25;
  color: #fff;
}

.requests-card .req-user   { color: #fa6400; font-weight: 600; } /* nom */
.requests-card .req-title  { color: #ffc336; font-size: 1.05em; font-weight: 600; } /* chanson */
.requests-card .req-msg    { color: #ffcf6e; font-size: 0.92em; white-space: normal; } /* message long */
.requests-card .req-date   { font-size: 0.85em; opacity: 0.8; }

/* Zone actions (switch + X) */
.requests-card .request-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Switch on/off (jouée) */
.requests-card .request-toggle {
  appearance: none;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #666;
  position: relative;
  cursor: pointer;
}
.requests-card .request-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ddd;
  transition: left .15s;
}
.requests-card .request-toggle:checked { background: #32d296; }
.requests-card .request-toggle:checked::after { left: 20px; }

/* Croix rouge douce */
.requests-card .request-delete {
  font-size: 18px;
  color: #e28080;
  cursor: pointer;
}
.requests-card .request-delete:hover { color: #ff9494; }












/* ===== Tabviewer Cards ===== */
.tv-btn {
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff7ea;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.tv-btn:hover {
  border-color: rgba(255, 191, 71, 0.34);
  background: rgba(255, 191, 71, 0.1);
}

.tv-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tv-btn:disabled:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.tv-btn-onair {
  border-color: rgba(255, 191, 71, 0.28);
  background: rgba(255, 191, 71, 0.12);
  color: #fff3dd;
}

.tv-btn-onair:hover {
  border-color: rgba(255, 191, 71, 0.44);
  background: rgba(255, 191, 71, 0.18);
}

.tv-btn-onair.active {
  border-color: rgba(255, 191, 71, 0.7);
  background: rgba(255, 191, 71, 0.2);
  color: #fff8ee;
}

.tv-btn-tabs {
  border-color: rgba(255, 255, 255, 0.12);
}

.tv-btn-setlist.active {
  border-color: rgba(84, 214, 201, 0.4);
  background: rgba(84, 214, 201, 0.14);
  color: #dcfff9;
}

.tv-btn-secondary {
  background: rgba(255, 255, 255, 0.02);
}

.tv-info-card,
.tv-notes-shell,
.tv-versions-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
  overflow: hidden;
}

.tv-info-card {
  padding: 18px 20px;
}

.tv-onair-shell {
  margin: 0 0 12px;
}

.tv-top-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(340px, 1fr);
  gap: 16px;
  margin: 0 0 12px;
  align-items: start;
}

.tv-setlist-mode-shell {
  margin: 0 0 12px;
  overflow: visible;
  padding-top: 4px;
  position: relative;
}

.tv-setlist-mode-shell > .tv-card-header {
  padding: 18px 20px 10px;
  margin-bottom: 0;
  align-items: flex-start;
}

.tv-setlist-mode-shell .tv-card-subtitle {
  line-height: 1.24;
  padding-top: 4px;
}

.tv-setlist-mode-shell .tv-card-heading {
  padding-top: 4px;
}

.tv-setlist-mode-shell .tv-versions-summary {
  padding-top: 22px;
  padding-bottom: 20px;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.tv-setlist-mode-shell .tv-versions-summary-title {
  line-height: 1.16;
  padding-top: 4px;
}

.tv-setlist-mode-shell .tv-info-kicker {
  line-height: 1.2;
  padding-top: 2px;
}

.tv-setlist-mode-shell[hidden] {
  display: none !important;
}

.tv-setlist-list .tab-version-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.tv-setlist-jump {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tv-setlist-jump-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tv-setlist-jump-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tv-setlist-jump-index {
  color: rgba(255, 198, 110, 0.78);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.tv-setlist-jump-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tv-setlist-jump-title {
  color: #fff8ec;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-setlist-jump-subtitle {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-setlist-jump.is-active .tv-setlist-jump-title {
  color: #ffc669;
}

.tv-setlist-jump.is-active {
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 191, 71, 0.18);
}

.tv-setlist-mode-shell .tv-versions-summary:active {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 191, 71, 0.12);
}

.tabviewer-page-shell.setlist-mode-active .tv-song-card,
.tabviewer-page-shell.setlist-mode-active .tv-current-tab-shell,
.tabviewer-page-shell.setlist-mode-active .tv-notes-shell-centered,
.tabviewer-page-shell.setlist-mode-active .tv-setup-shell {
  display: none;
}

.tabviewer-page-shell.setlist-mode-active .tv-setlist-mode-shell[hidden] {
  display: block;
}

.tv-current-tab-shell {
  margin: 0;
}

.tv-current-tab-shell > .tv-card-header {
  padding: 18px 20px 0;
  margin-bottom: 10px;
}

.tv-current-tab-info {
  padding: 0 20px 10px;
}

.tv-current-tab-info-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.tv-current-tab-info-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff7ea;
  line-height: 1.1;
  word-break: break-word;
}

.tv-current-tab-info-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
}

.tv-song-card > .tv-card-header {
  margin-bottom: 12px;
}

.tv-versions-summary {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-color, #f3efe7);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}

.tv-more-tabs-toggle {
  width: calc(100% - 40px);
  margin: 0 20px 18px;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff6e8;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.tv-more-tabs-toggle:hover {
  border-color: rgba(255, 191, 71, 0.18);
  background: rgba(255, 191, 71, 0.06);
}

.tv-versions-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tv-versions-summary-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 198, 110, 0.78);
}

.tv-versions-summary-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff7ea;
  line-height: 1.1;
  word-break: break-word;
}

.tv-versions-summary-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.tv-versions-summary-arrow {
  font-size: 22px;
  color: rgba(255, 198, 110, 0.92);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tv-versions-summary[aria-expanded="true"] .tv-versions-summary-arrow {
  transform: rotate(180deg);
}

.tv-versions-panel {
  display: block;
  padding: 0 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.2s ease, opacity 0.16s ease;
}

.tv-versions-panel.is-open {
  max-height: min(60vh, 720px);
  opacity: 1;
  pointer-events: auto;
}

.tv-versions-panel.is-prewarm {
  max-height: min(60vh, 720px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.tv-setlist-mode-shell .tv-versions-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  z-index: 30;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tv-setlist-mode-shell .tv-versions-panel.is-open {
  max-height: min(48vh, 360px) !important;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 198, 110, 0.48) rgba(255, 255, 255, 0.06);
  touch-action: pan-y;
}

.tv-setlist-mode-shell .tv-versions-panel.is-open::-webkit-scrollbar {
  width: 8px;
}

.tv-setlist-mode-shell .tv-versions-panel.is-open::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.tv-setlist-mode-shell .tv-versions-panel.is-open::-webkit-scrollbar-thumb {
  background: rgba(255, 198, 110, 0.42);
  border-radius: 999px;
}

.tv-versions-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(240px, 1fr);
  gap: 14px;
  align-items: end;
  padding: 16px 0 12px;
}

.tv-versions-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-versions-context-label,
.tv-versions-search-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 198, 110, 0.72);
}

.tv-versions-context-value {
  color: #fff;
  font-size: 17px;
}

.tv-versions-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-versions-search input {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.75);
  color: #f4f1eb;
  padding: 0 14px;
}

.tv-versions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.tabs-list.tv-versions-list .tab-version-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.tabs-version-main {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabs-version-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}

.tabs-version-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff8ec;
}

.tabs-version-user {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.tabs-version-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tv-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tv-version-pill.is-current {
  border-color: rgba(84, 214, 201, 0.36);
  color: #86e5dc;
}

.tv-version-pill.is-ref {
  border-color: rgba(255, 180, 31, 0.42);
  color: #ffc669;
}

.tv-version-pill-tab-meta {
  border-color: rgba(84, 214, 201, 0.24);
  background: rgba(84, 214, 201, 0.08);
  color: rgba(207, 255, 250, 0.9);
}

.tv-empty-search {
  padding: 12px 2px 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
}

.tv-empty-version-row {
  color: rgba(255, 255, 255, 0.62);
}

.tv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 40px;
  margin-bottom: 12px;
}

.tv-card-header-compact {
  margin-bottom: 0;
}

.tv-card-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tv-card-subtitle {
  color: #fff7ea;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-card-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tv-play-tools-shell > .tv-card-header {
  margin-bottom: 12px;
}

.tv-info-kicker {
  display: inline-flex;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 198, 110, 0.78);
  margin-bottom: 0;
}

.tv-song-title {
  margin: 0;
  color: #fff6e8;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
}

.tv-meta-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tv-play-tools {
  display: none;
}

.tv-play-tools-shell {
  margin: 0 0 12px;
  padding: 14px 16px 16px;
}

.tv-play-tools-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tv-play-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tv-play-tools-row-primary {
  justify-content: flex-start;
}

.tv-setlist-transpose-box .tv-transpose-controls {
  min-height: 40px;
}

.tv-transpose-value-button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.tv-transpose-value-button:hover {
  color: #ffc669;
}

.tv-live-tool-block,
.tv-live-tool-setup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  flex-wrap: nowrap;
}

.tv-live-tool-setup {
  max-width: min(100%, 340px);
}

.tv-live-tool-setup strong {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff6e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tv-live-tool-block-tempo #tab-tempo-value {
  min-width: 2.6ch;
  text-align: center;
}

.tv-transpose-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-height: 40px;
}

.tv-transpose-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.tv-transpose-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.tv-transpose-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3ch;
  color: #fff6e8;
  font-size: 18px;
  line-height: 1;
}

.tv-control-chip {
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff6e8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.tv-control-chip:hover {
  border-color: rgba(255, 191, 71, 0.34);
  background: rgba(255, 191, 71, 0.1);
}

.tv-control-chip.is-active {
  border-color: rgba(255, 191, 71, 0.65);
  background: rgba(255, 191, 71, 0.14);
  color: #fff4dd;
}

.tv-autoscroll-box {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.tv-autoscroll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.tv-autoscroll-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tv-autoscroll-nav-btn {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff6e8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tv-autoscroll-nav-btn:hover {
  border-color: rgba(255, 191, 71, 0.34);
  background: rgba(255, 191, 71, 0.1);
}

.tv-autoscroll-head-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-left: auto;
}

.tv-return-top-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 191, 71, 0.35);
  background: rgba(26, 26, 26, 0.92);
  color: #fff6e8;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  z-index: 1200;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tv-return-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tv-return-top-btn:hover {
  border-color: rgba(255, 191, 71, 0.68);
  background: rgba(40, 40, 40, 0.96);
}

.tab-content-stack.is-busy {
  pointer-events: none;
}

.tv-tabcontent-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(24, 24, 24, 0.92), rgba(16, 16, 16, 0.88));
  border-radius: 18px;
}

.tv-tabcontent-loading-overlay.is-visible {
  display: flex;
}

.tv-tabcontent-loading-state {
  min-width: min(100%, 360px);
  min-height: 180px;
}

.tv-fine-autoscroll {
  position: fixed;
  right: 22px;
  bottom: 74px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1200;
  width: 34px;
  padding: 7px 7px;
  border-radius: 16px;
  background: rgba(18, 18, 18, 0.62);
  backdrop-filter: blur(4px);
  touch-action: none;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.tv-fine-autoscroll-hitbox {
  position: absolute;
  inset: -16px -14px;
  background: transparent;
  touch-action: none;
}

.tv-fine-autoscroll-rail {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 138px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 191, 71, 0.24), rgba(255, 255, 255, 0.06));
  cursor: ns-resize;
  touch-action: none;
}

.tv-fine-autoscroll-thumb {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(0% - 8px);
  width: 24px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(255, 191, 71, 0.42);
  background: rgba(255, 244, 228, 0.92);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

.tv-fine-autoscroll-value {
  position: relative;
  z-index: 1;
  min-width: 2.4ch;
  text-align: center;
  color: #fff6e8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tv-floating-live-tools {
  position: fixed;
  left: 18px;
  right: 84px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  z-index: 1200;
  padding: 6px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(18, 18, 18, 0.74);
  backdrop-filter: blur(6px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}

.tabviewer-floating-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1300;
}

.tabviewer-floating-host > * {
  pointer-events: auto;
}

.tv-floating-live-tools::-webkit-scrollbar {
  display: none;
}

.tv-floating-live-box,
.tv-floating-stepper,
.tv-floating-control-chip {
  box-sizing: border-box;
}

.tv-floating-inline-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.tv-floating-inline-label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.tv-floating-live-box {
  min-height: 36px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
}

.tv-floating-live-box.tv-meta-live-chip {
  padding: 3px 8px;
}

.tv-floating-live-box-main {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

#tab-key-chip {
  min-width: 108px;
}

#tab-key-chip .tv-floating-live-box-main {
  min-width: 5.2ch;
}

#tab-key-chip .tv-floating-key-stack {
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}

#tab-key-chip .tv-floating-key-stack .tv-floating-live-value {
  font-size: 12px;
  line-height: 1;
}

.tv-floating-transpose-value {
  display: block;
  min-height: 9px;
  color: rgba(255, 246, 232, 0.68);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

.tv-floating-transpose-value:empty {
  display: none;
}

.tv-floating-live-tools.is-setlist-meta-suppressed #tv-floating-tempo-group {
  display: none !important;
}

.tv-floating-live-tools.is-setlist-meta-suppressed #tab-key-chip {
  min-width: 96px;
}

.tv-floating-live-tools.is-setlist-meta-suppressed #tab-key-chip .tv-floating-live-box-main {
  min-width: 3.2ch;
}

.tv-floating-live-box-main-tempo {
  min-width: 4.4ch;
}

.tv-floating-live-value {
  color: #fff6e8;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  min-width: 2.8ch;
  user-select: none;
}

.tv-floating-stepper {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff6e8;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tv-floating-stepper:hover {
  border-color: rgba(255, 191, 71, 0.28);
  background: rgba(255, 191, 71, 0.1);
}

.tv-floating-tempo-led {
  width: 9px;
  height: 9px;
  opacity: 0.62;
}

#tab-key-value[role="button"] {
  cursor: pointer;
}

#tab-tempo-value[role="button"] {
  cursor: pointer;
}

.tv-floating-control-chip {
  min-height: 36px;
  padding: 0 11px;
  flex: 0 0 auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tv-setlist-switch-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex: 0 0 auto;
}

.tv-setlist-switch-controls[hidden] {
  display: none !important;
}

.tv-setlist-switch-btn {
  width: 45px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(84, 214, 201, 0.28);
  background: rgba(84, 214, 201, 0.12);
  color: #eafffb;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.setlist-mode-next-preview {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.setlist-mode-next-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.setlist-mode-next-card:hover {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.34);
  background:
    radial-gradient(circle at top left, rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.13), transparent 36%),
    linear-gradient(180deg, rgba(54, 54, 54, 0.98), rgba(38, 38, 38, 0.96));
}

.setlist-mode-next-lines {
  max-height: calc(1.45em * 8);
  overflow: hidden;
  opacity: 0.74;
  padding: 0 4px 10px;
}

.tv-setlist-switch-btn-next {
  border-color: rgba(var(--songbook-accent-rgb), 0.48);
  background: linear-gradient(135deg, rgba(var(--songbook-accent-rgb), 0.28), rgba(84, 214, 201, 0.18));
}

.tv-setlist-switch-btn:disabled {
  opacity: 0.36;
  cursor: default;
}

.tv-autoscroll-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tv-autoscroll-readout {
  color: #fff7ea;
  font-size: 15px;
  font-weight: 800;
}

.tv-autoscroll-slider {
  width: 100%;
  min-width: 0;
  accent-color: #ffbf47;
}

.tv-autoscroll-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 191, 71, 0.36));
}

.tv-autoscroll-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 191, 71, 0.5);
  background: #fff4dd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.tv-autoscroll-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 191, 71, 0.36));
}

.tv-autoscroll-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 191, 71, 0.5);
  background: #fff4dd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.tv-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
}

.tv-meta-pill-tempo {
  gap: 8px;
}

.tv-meta-pill-tempo-value {
  font-size: 15px;
  color: #fff6e8;
}

.tv-tempo-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 191, 71, 0.1);
  border: 1px solid rgba(255, 191, 71, 0.22);
  flex-wrap: nowrap;
  overflow: hidden;
  line-height: 1;
}

.tv-meta-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  flex-wrap: nowrap;
  overflow: hidden;
  line-height: 1;
}

.tv-meta-live-chip.is-live-changed {
  border-color: rgba(255, 191, 71, 0.65);
  background: rgba(255, 191, 71, 0.14);
  box-shadow: none;
  outline: 1px solid rgba(255, 191, 71, 0.28);
  outline-offset: -1px;
}

#tab-key-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4ch;
  text-align: center;
  line-height: 1;
}

.tv-inline-stepper {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff6e8;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.tv-inline-stepper:hover {
  border-color: rgba(255, 191, 71, 0.4);
  background: rgba(255, 191, 71, 0.12);
}

.tv-meta-reset {
  border: 1px solid rgba(255, 191, 71, 0.3);
  background: rgba(255, 191, 71, 0.12);
  color: #fff4d9;
  border-radius: 999px;
  min-height: 38px;
  min-width: 168px;
  box-sizing: border-box;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.tv-meta-reset:hover {
  background: rgba(255, 191, 71, 0.18);
}

.tv-meta-reset.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.tv-tempo-value {
  font-size: 26px;
  line-height: 1;
  display: inline-block;
}

#tab-key-value,
#tab-tempo-value {
  display: inline-block;
  line-height: 1;
}

.tv-notes-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease;
}

.tv-notes-shell-centered {
  margin: 0 0 12px;
}

.tv-view-nav-shell {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tv-view-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tv-view-nav-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.tv-notes-toggle:disabled {
  cursor: default;
  opacity: 0.72;
}

.tv-notes-toggle:active {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 191, 71, 0.12);
}

.tv-notes-toggle[aria-expanded="true"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 191, 71, 0.1);
}

.tv-notes-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-setup-shell .tv-notes-toggle {
  padding: 10px 16px;
}

.tv-setup-shell .tv-notes-body {
  padding: 0 16px 12px;
}

.tv-notes-summary {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.tv-notes-arrow {
  color: rgba(255, 198, 110, 0.92);
  font-size: 22px;
  transition: transform 0.2s ease;
}

.tv-notes-toggle[aria-expanded="true"] .tv-notes-arrow {
  transform: rotate(180deg);
}

.tv-notes-body {
  padding: 0 16px 16px;
}

.tv-notes-content {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
}

.tv-notes-content.is-collapsed {
  max-height: calc(1.5em * var(--tv-notes-max-lines, 3));
}

.tv-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
  color: #fff7ea;
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .tv-top-grid {
    grid-template-columns: 1fr;
  }

  .tabcontent-viewport {
    min-height: 48vh;
    height: calc(100vh - 260px);
    max-height: calc(100vh - 260px);
  }

  .tv-card-header,
  .tv-card-actions {
    align-items: flex-start;
  }

  .tv-card-header {
    flex-direction: column;
  }
}

.tab-permissions-shell {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.tab-permissions-summary {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}

.tab-permissions-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tab-permissions-summary-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 198, 110, 0.72);
}

.tab-permissions-summary-text {
  font-size: 16px;
  font-weight: 700;
  color: #fff3dc;
}

.tab-permissions-summary-arrow {
  color: rgba(255, 198, 110, 0.92);
  transition: transform 0.2s ease;
}

.tab-permissions-summary[aria-expanded="true"] .tab-permissions-summary-arrow {
  transform: rotate(180deg);
}

.tab-permissions-panel {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tab-permissions-panel.is-open {
  display: block;
}

.tab-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  padding-top: 16px;
}

.tab-permission-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tab-permission-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tab-permission-card-head h3 {
  margin: 0;
}

.tab-permission-card-kicker,
.tab-permission-list-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 198, 110, 0.72);
}

.tab-permission-select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  padding: 0 12px;
}

.tab-permission-custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.tab-permission-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-permission-search {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  padding: 0 12px;
}

.tab-permission-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.tab-permission-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.tab-permission-option[hidden] {
  display: none !important;
}

.tab-permission-option.is-locked {
  border: 1px solid rgba(255, 198, 110, 0.22);
  background: rgba(255, 198, 110, 0.08);
}

.tab-permission-empty {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 920px) {
  .tab-permission-grid,
  .tab-permission-custom {
    grid-template-columns: 1fr;
  }
}













.tab-version-item.tab-mine {
  background: #222; /* léger fond pour mieux voir tes tabs */
}
.tab-version-item.tab-others {
  border-top: 1px solid rgba(255,255,255,.1); /* mini séparation */
}








#setlist-mode-btn.active {
  background-color: #fa6400; /* orange pour montrer ON */
  color: #fff;
}



.tab-version-item.active-tab-version {
  color: #ff7f2f; /* orange comme tes vignettes On Air */
}








/* Ajuste l'alignement du texte */
.tabs-list .tab-version-item {
  padding: 8px 6px; /* léger padding gauche */
}

/* Mes tabs : ligne plus visible mais subtile */
.tab-version-item.tab-mine {
  border-left: 3px solid #000000; /* trait orange fin */
  background: none; /* on supprime le fond trop lourd */
  padding-left: 9px; /* compense l'espace pris par la bordure */
}

/* Les tabs des autres : simple mini séparation */
.tab-version-item.tab-others {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* La tab en cours : toujours en évidence */
.tab-version-item.active-tab-version {
  color: #ff7f2f;
  
}

.tabs-list.tv-versions-list .tab-version-item.active-tab-version {
  border-color: rgba(255, 180, 31, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 31, 0.14);
}

.tabs-list.tv-versions-list .tab-version-item.tab-mine {
  border-left: 3px solid rgba(84, 214, 201, 0.75);
  padding-left: 11px;
}

.tabs-list.tv-versions-list .tab-version-item.tab-others {
  border-left: 3px solid rgba(255, 255, 255, 0.08);
}


















/* BOOKPAGE HEADER GROUPS */
.bookpage-header {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.bp-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #424242;
}

.bp-label {
  font-weight: bold;
  margin-right: 6px;
}

/* Boutons génériques */
.bp-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

/* Codes couleur */
.bp-btn-edit { background: #4CAF50; color: white; }   /* Vert */
.bp-btn-filter { background: #2196F3; color: white; } /* Bleu */
.bp-btn-tools { background: #FF9800; color: white; }  /* Orange */

/* Groupes avec un léger ton */























/* Hide/show utility */
.hidden {
  display: none;
}

/* Deck (grid) view */
.bookpage-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 10px;
}

.book-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
  cursor: pointer;
}
.book-card:hover {
  transform: scale(1.02);
}

.book-card h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: #333;
}

.book-card p {
  margin: 2px 0;
  font-size: 14px;
  color: #666;
}





/* Forcer le hide/show (déjà recommandé) */
#bookpage-table-container.hidden { display: none !important; }
.bookpage-deck.hidden { display: none !important; }

/* Deck = liste verticale plein large */
.bookpage-deck {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Carte deck : reprend le style On Air + positionnement actions */
.deck-card {
  position: relative;
  width: 100%;             /* une seule vignette par ligne */
  box-sizing: border-box;
}

/* Ajuste un peu la typo interne si besoin */
.deck-card .deck-title {
  color: orange;           /* comme On Air “accent” */
  font-size: 1rem;
}

/* Boutons S / P en bas à droite */
.deck-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  gap: 6px;
}

/* Les sp-btn existent déjà : on les garde.
   Option : petit boost visibilité dans les cartes */
.deck-card .sp-btn {
  background: #666;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 8px;
}
.deck-card .sp-btn:hover {
  background: #333;
}

















/* --- Bookpage Deck (hérite du look On Air) --- */
.bookpage-deck .onair-card.book-deck-card {
  position: relative;
  width: 100%;
  margin: 0;
  /* .onair-card apporte déjà couleurs, padding, radius, etc. */
}

/* lignes internes (on réutilise .onair-line existant) */
.book-deck-title { font-weight: 600; }

/* Zone d'actions S/P en bas à droite */
.book-deck-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
}

/* Boutons S/P : on réutilise le code couleur du tabviewer */
.sp-btn {
  min-width: 32px; min-height: 32px;
  border-radius: 50%;
  border: 1px solid var(--panel-border-color);
  background: var(--panel-bg-color);
  color: var(--text-color);
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.sp-btn:hover { filter: brightness(1.1); }

/* Etat "actif" pour P (dans la playlist courante) */
.sp-btn.p-active,
.sp-btn.btn-playlist-active {
  background: transparent;
  color: #ffcc63;
  border-color: rgba(255,180,31,.85);
  box-shadow: inset 0 0 0 1px rgba(255,180,31,.32);
}

.sp-btn.s-active,
.sp-btn.btn-setlist-active {
  background: transparent;
  color: #7fe0d8;
  border-color: rgba(84, 214, 201, 0.9);
  box-shadow: inset 0 0 0 1px rgba(84, 214, 201, 0.26);
}

.sp-btn.btn-playlist-disabled,
.sp-btn[disabled] {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(228, 232, 236, 0.38);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  opacity: 0.72;
}

.sp-btn.btn-playlist-disabled:hover,
.sp-btn[disabled]:hover {
  filter: none;
}

.bp-search {
  min-width: 420px;
  padding: 6px 10px;
  border: 1px solid var(--panel-border-color, #444);
  background: var(--panel-bg-color, #1e1e1e);
  color: var(--text-color, #eee);
  border-radius: 6px;
  outline: none;
}
.bp-search:focus { box-shadow: 0 0 0 2px rgba(255,165,0,.25); }




























.tabviewer-pre {
    padding-bottom: 18px;
}

.tabviewer-page-shell .tabviewer-pre {
    line-height: 1.42;
    padding-top: calc(16px + 14em);
    padding-bottom: calc(18px + 14em);
}

















.project-switcher-shell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--panel-border-color);
    border-radius: 999px;
    background: var(--panel-bg-color);
}

.project-switcher-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.75;
}

.project-switcher-select {
    border: 1px solid var(--input-border-color);
    background: var(--input-bg-color);
    color: var(--input-text-color);
    border-radius: 999px;
    padding: 6px 12px;
    min-width: 190px;
}

.project-switcher-meta {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bar-bg-color);
    color: var(--bar-text-color);
}

.account-actions-row {
    margin: 18px 0;
}

.projects-page-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.projects-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.projects-page-subtitle {
    margin: 6px 0 0;
    opacity: 0.78;
}

.project-create-card,
.project-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.project-card-current {
    border-color: rgba(103, 220, 145, 0.65);
    box-shadow: 0 0 0 1px rgba(103, 220, 145, 0.2);
}

.project-form-grid,
.project-invite-row,
.project-card-top,
.project-card-meta,
.project-members-list,
.project-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-input {
    min-width: 220px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(20, 20, 20, 0.65);
    color: inherit;
}

.project-settings-grid-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.project-settings-grid-compact .project-field {
    width: 100%;
}

.project-settings-grid-compact .project-input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
}

.project-card-top {
    justify-content: space-between;
    align-items: flex-start;
}

.project-card-meta {
    margin: 6px 0 0;
}

.project-card-meta span,
.project-member-chip,
.project-current-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
}

.project-current-pill {
    background: rgba(103, 220, 145, 0.16);
    color: #c9ffd8;
}

.project-help-text {
    margin: 8px 0 0;
    opacity: 0.8;
}

.header2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.header-nav-btn {
    min-width: 128px;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.header-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(103, 220, 145, 0.45);
}

.requests-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.requests-source-switches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.requests-current-project-label {
    font-size: 0.95rem;
    opacity: 0.82;
}

.topbar-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.topbar-branding {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topbar-badge {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.92;
}

.topbar-caption {
    font-size: 0.95rem;
    opacity: 0.7;
}

.topbar-controls,
.topbar-user-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.topbar-user-pill,
.topbar-link,
.topbar-admin-btn {
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-decoration: none;
    font-size: 0.92rem;
}

.topbar-install-btn {
    border-radius: 999px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 183, 56, 0.58);
    background: linear-gradient(135deg, rgba(255, 181, 41, 0.22), rgba(255, 128, 0, 0.12));
    color: #ffd08a;
    font-weight: 800;
    font-size: 0.86rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.topbar-install-btn:hover {
    border-color: rgba(255, 183, 56, 0.9);
    background: linear-gradient(135deg, rgba(255, 181, 41, 0.34), rgba(255, 128, 0, 0.2));
    color: #ffe3b1;
}

.topbar-install-btn[hidden] {
    display: none !important;
}

.songbook-pwa-tabs-bar {
    display: none;
}

@media (display-mode: standalone) {
    .songbook-pwa-tabs-bar {
        display: flex;
    }
}

body.songbook-standalone-app .songbook-pwa-tabs-bar {
    display: flex;
}

@media (display-mode: standalone) {
    body {
        padding-top: 42px;
    }
}

body.songbook-standalone-app {
    padding-top: 42px;
}

body.songbook-pwa-embed {
    padding-top: 0 !important;
}

body.songbook-pwa-embed .songbook-pwa-tabs-bar {
    display: none !important;
}

.songbook-pwa-tabs-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 2400;
    align-items: flex-end;
    gap: 3px;
    width: 100vw;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    padding: 7px 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
    background:
        linear-gradient(180deg, rgba(44, 44, 48, 0.98) 0%, rgba(18, 18, 20, 0.98) 100%);
    border-bottom: 1px solid rgba(255, 183, 56, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    scrollbar-width: thin;
}

.songbook-pwa-tab,
.songbook-pwa-tab-add {
    flex: 0 0 auto;
    height: 35px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(70, 70, 74, 0.9), rgba(36, 36, 39, 0.92));
    color: rgba(255, 232, 199, 0.78);
    border-radius: 11px 11px 0 0;
    padding: 0 18px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.songbook-pwa-tab {
    min-width: 174px;
    max-width: 240px;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.songbook-pwa-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.songbook-pwa-tab-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    overflow: visible !important;
}

.songbook-pwa-tab.is-active {
    height: 37px;
    background: linear-gradient(180deg, rgba(58, 58, 61, 0.98), rgba(34, 34, 36, 0.98));
    border-color: rgba(255, 183, 56, 0.42);
    color: #fff2dc;
    box-shadow:
        inset 0 2px 0 rgba(255, 183, 56, 0.55),
        0 -4px 18px rgba(255, 183, 56, 0.08);
}

.songbook-pwa-tab-add {
    width: 38px;
    padding: 0;
    font-size: 1.08rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
    color: #ffd697;
}

.songbook-pwa-tab:hover,
.songbook-pwa-tab-add:hover {
    background: linear-gradient(180deg, rgba(86, 86, 90, 0.95), rgba(42, 42, 45, 0.95));
    color: #fff4df;
}

.songbook-pwa-tab-refresh,
.songbook-pwa-tab-close {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(255, 244, 223, 0.68);
    font-size: 0.72rem;
    line-height: 1;
}

.songbook-pwa-tab-refresh:hover,
.songbook-pwa-tab-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff4df;
}

.songbook-pwa-tabs-stage {
    display: none;
    position: fixed;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2300;
    background: #0c0c0c;
}

body.songbook-pwa-iframe-tab-active {
    overflow: hidden;
}

body.songbook-pwa-iframe-tab-active > .main-container {
    display: none !important;
}

body.songbook-pwa-iframe-tab-active .songbook-pwa-tabs-stage {
    display: block;
}

.songbook-pwa-tab-frame {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0c0c0c;
}

.songbook-pwa-tab-frame.is-active {
    display: block;
}

.songbook-pwa-modal-content {
    max-width: 560px;
}

.songbook-pwa-install-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.topbar-user-pill {
    font-weight: 700;
    background: rgba(103, 220, 145, 0.12);
}

.topbar-link:hover,
.topbar-admin-btn:hover {
    border-color: rgba(103, 220, 145, 0.35);
    background: rgba(255, 255, 255, 0.07);
}

.topbar-admin-btn {
    cursor: pointer;
}

.project-switcher-shell {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
}

.workspace-project-shell {
    position: relative;
    overflow: hidden;
}

.workspace-loading-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 3px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.workspace-loading-bar span {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, var(--songbook-accent, #ffb41f), transparent);
    animation: workspaceLoadingSweep 0.9s ease-in-out infinite;
}

.workspace-loading-bar.is-visible {
    opacity: 1;
}

@keyframes workspaceLoadingSweep {
    from {
        transform: translateX(-115%);
    }
    to {
        transform: translateX(280%);
    }
}

.project-switcher-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.project-switcher-select {
    min-width: 220px;
}

.project-switcher-meta {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.84rem;
}

.header2-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.header-nav-btn {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.header-nav-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(103, 220, 145, 0.35);
    background: rgba(255, 255, 255, 0.09);
}

.ghost-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.danger-btn {
    background: rgba(192, 67, 43, 0.18);
    border: 1px solid rgba(255, 120, 90, 0.35);
}

.project-create-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-create-card.is-collapsed {
    display: none;
}

.project-create-actions,
.project-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-role-select {
    max-width: 150px;
}

.requests-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.requests-picker-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 300px;
}

.requests-picker-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.72;
}

.requests-picker-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.requests-source-search {
    min-width: 180px;
    flex: 1 1 180px;
}

.requests-source-select {
    min-width: 220px;
    flex: 1 1 220px;
}

.requests-current-project-label {
    font-size: 0.95rem;
    opacity: 0.82;
}

@media (max-width: 900px) {
    .topbar-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .project-switcher-shell,
    .topbar-controls,
    .topbar-user-nav {
        width: 100%;
        justify-content: space-between;
    }
}


/* DEV refresh: cleaner shell for topbar, navigation, projects, and requests */
.topbar-shell {
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.topbar-branding {
    min-width: 170px;
    gap: 2px;
}

.topbar-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.62;
}

.topbar-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topbar-title {
    font-size: 1rem;
    font-weight: 700;
}

.topbar-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #69d98b;
    border: 1px solid rgba(105, 217, 139, 0.72);
    box-shadow: 0 0 0 6px rgba(105, 217, 139, 0.12);
}

.topbar-status-dot.is-online {
    background: #69d98b;
    border-color: rgba(105, 217, 139, 0.9);
    box-shadow: 0 0 0 6px rgba(105, 217, 139, 0.12), 0 0 14px rgba(105, 217, 139, 0.58);
}

.topbar-status-dot.is-offline {
    background: #050505;
    border: 2px solid #69d98b;
    box-shadow: 0 0 0 5px rgba(105, 217, 139, 0.16), 0 0 12px rgba(105, 217, 139, 0.42), inset 0 0 0 2px #050505;
}

.topbar-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 247, 236, 0.78);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.topbar-mode-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-color, #f0b35b);
}

.topbar-controls {
    justify-content: flex-end;
    gap: 12px;
    flex: 1 1 auto;
}

.topbar-user-nav {
    gap: 8px;
}

.topbar-user-pill,
.topbar-link,
.topbar-admin-btn {
    padding: 4px 0;
    font-size: 0.84rem;
    background: transparent;
    border: none;
    border-radius: 0;
}

.topbar-admin-btn {
    color: rgba(105, 217, 139, 0.92);
}

.topbar-link:hover,
.topbar-admin-btn:hover {
    background: transparent;
    border: none;
    text-decoration: underline;
}

.topbar-user-pill {
    color: #fff6e8;
    font-weight: 700;
}

.project-switcher-shell {
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.project-switcher-select {
    min-width: 200px;
    padding: 7px 12px;
}

.project-switcher-meta {
    font-size: 0.8rem;
    opacity: 0.88;
}

.header2-modern {
    grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.header-nav-btn {
    min-height: 40px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
}

.projects-page-shell {
    gap: 16px;
}

.project-create-card,
.project-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.project-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.project-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 220px;
}

.project-field span {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

.project-field-wide {
    flex-basis: 100%;
}

.project-section-note {
    margin: 4px 0 0;
    font-size: 0.88rem;
    line-height: 1.45;
    opacity: 0.72;
}

.project-members-list {
    gap: 8px;
}

.project-member-chip-manageable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 6px;
}

.project-member-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 130, 100, 0.32);
    border-radius: 999px;
    background: rgba(160, 45, 30, 0.2);
    color: #ffd6c9;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.project-member-remove-btn:hover {
    border-color: rgba(255, 150, 120, 0.65);
    background: rgba(190, 55, 38, 0.36);
    color: #fff3ed;
}

.project-member-chip,
.project-card-meta span,
.project-current-pill {
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.84rem;
}

.project-settings-actions,
.project-create-actions,
.project-invite-row {
    align-items: center;
}

.project-help-text {
    font-size: 0.9rem;
}

.requests-toolbar {
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
}

.requests-picker-wrap {
    min-width: min(100%, 360px);
}

.requests-source-search,
.requests-source-select {
    min-height: 42px;
}

.requests-current-project-label {
    padding-top: 10px;
    font-size: 0.92rem;
}

.requests-note {
    margin-top: 2px;
}

.requests-footer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

@media (max-width: 900px) {
    .topbar-shell {
        align-items: stretch;
    }

    .topbar-controls,
    .topbar-user-nav,
    .project-switcher-shell {
        width: 100%;
    }

    .topbar-controls {
        justify-content: stretch;
    }

    .project-switcher-shell,
    .topbar-user-nav {
        justify-content: space-between;
    }
}


.auth-shell {
    display: flex;
    justify-content: center;
    padding: 28px 12px 8px;
}

.auth-card {
    width: min(100%, 460px);
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.auth-title {
    margin: 8px 0 6px;
}

.auth-subtitle {
    margin: 0 0 16px;
    opacity: 0.78;
    line-height: 1.45;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-form input {
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
}

.auth-error,
.auth-flash {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(192, 67, 43, 0.16);
    border: 1px solid rgba(255, 120, 90, 0.32);
}


.project-command-page-box,
.project-media-block,
.project-playlists-block {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.project-command-page-box h5 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.project-media-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.project-image-preview {
  width: 160px;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  text-align: center;
  padding: 12px;
}

.project-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-linked-playlists {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.project-editor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-editor-nav-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
}

.project-editor-nav-btn.active {
  background: linear-gradient(135deg, var(--songbook-accent, #ffb41f), var(--songbook-accent-strong, #ff8a00));
  color: var(--songbook-accent-contrast, #141414);
  border-color: transparent;
}

[data-project-editor-panel][hidden] {
  display: none !important;
}

.project-playlist-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 174, 0, 0.12);
  border: 1px solid rgba(255, 174, 0, 0.28);
  color: #ffe1a3;
}

.project-playlist-row-chip {
  width: 100%;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 12px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff2cf;
}

.project-chip-remove {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.accent-btn {
  background: linear-gradient(135deg, #ffb41f, #ff8a00);
  color: #141414;
  border-color: transparent;
}

.req-meta {
  color: rgba(255,255,255,.62);
  font-size: .86rem;
}

@media (max-width: 760px) {
  .project-media-row {
    grid-template-columns: 1fr;
  }

  .project-playlist-confirmation-picker {
    grid-template-columns: 1fr;
  }

  .project-image-preview {
    width: 100%;
    max-width: 220px;
    height: 180px;
  }
}


/* DEV project cards + requests tabs refresh */
.projects-page-header-compact {
  align-items: flex-start;
}

.project-cards-grid-compact {
  grid-template-columns: minmax(0, 1fr);
}

.project-card-compact {
  padding: 14px;
}

.project-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.project-card-identity {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  flex: 1 1 240px;
}

.project-card-cover {
  width: 78px;
  height: 78px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(255,174,0,.2), rgba(255,255,255,.06));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ffe1a3;
  flex: 0 0 78px;
}

.project-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card-copy {
  min-width: 0;
}

.project-card-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.project-card-title-row h3 {
  margin: 0;
}

.project-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  font-size: .88rem;
  opacity: .76;
}

.project-card-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.project-editor-shell {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.project-editor-shell.is-collapsed {
  display: none;
}

.project-danger-zone {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 92, 61, 0.18);
}

.requests-playlist-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.requests-playlist-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  height: 44px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: inherit;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: top;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.requests-playlist-tab.active {
  background: linear-gradient(135deg, #ffb41f, #ff8a00);
  color: #111;
  border-color: rgba(255,180,31,.42);
}

.requests-tab-count {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
}

.requests-playlist-tab.active .requests-tab-count {
  background: rgba(17, 17, 17, 0.16);
}

.requests-tab-panel {
  display: none;
}

.requests-tab-panel.active {
  display: block;
}

.requests-tab-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
}

.requests-tab-panel-head h3 {
  margin: 0 0 4px;
}

.requests-panel-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .88rem;
  opacity: .75;
}

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

.requests-stream {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

.requests_stream_title {
  margin: 0 0 12px;
}

.requests-card-modern {
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.requests-card-modern.request-vote-strength-medium {
  border-color: rgba(255, 185, 79, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(255, 185, 79, 0.12), rgba(0,0,0,0.16));
}

.requests-card-modern.request-vote-strength-high {
  border-color: rgba(255, 158, 45, 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(255, 147, 37, 0.2), rgba(0,0,0,0.22));
}

.requests-card-modern.request-vote-strength-huge {
  border-color: rgba(255, 118, 43, 0.46);
  box-shadow: 0 0 0 1px rgba(255, 118, 43, 0.16), 0 18px 42px rgba(0,0,0,0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.022)),
    linear-gradient(180deg, rgba(255, 118, 43, 0.3), rgba(0,0,0,0.3));
}

.requests-card-modern.is-played {
  opacity: .86;
}

.requests-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.requests-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  font-size: .8rem;
}

.requests-card-badge-requester,
.req-requester-id {
  color: #9ff2e8;
  border: 1px solid rgba(93, 214, 204, 0.24);
  background: rgba(93, 214, 204, 0.1);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.req-requester-id {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1.25;
}

.requests-card-badge-book {
  background: rgba(255,174,0,.12);
  color: #ffe1a3;
  border: 1px solid rgba(255,174,0,.22);
}

.requests-empty-state {
  margin: 0;
  opacity: .72;
}

@media (max-width: 820px) {
  .requests-streams-grid {
    grid-template-columns: 1fr;
  }

  .project-card-summary-actions {
    width: 100%;
    justify-content: flex-start;
  }
}


/* DEV fullscreen project editor */
.projects-page-shell.project-editor-mode .project-create-shell {
  display: none;
}

.projects-page-shell.project-editor-mode .project-cards-grid {
  display: block;
}

.projects-page-shell.project-editor-mode [data-project-card] {
  display: none;
}

.projects-page-shell.project-editor-mode [data-project-card].project-card-focused {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.projects-page-shell.project-editor-mode .project-card-focused .project-card-summary {
  display: none;
}

.projects-page-shell.project-editor-mode .project-card-focused .project-editor-shell {
  display: block;
  width: 100%;
  margin-top: 0;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(44,44,46,.96), rgba(26,26,28,.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.project-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.project-editor-toolbar > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.project-editor-toolbar h3 {
  margin: 4px 0 0;
}

.project-editor-toolbar > .btn-pages,
.account-toolbar-save-btn {
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
  min-width: 0;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.project-editor-kicker {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.project-editor-stack {
  display: grid;
  gap: 14px;
}

.project-members-block {
  order: -40;
}

.project-media-block {
  order: -30;
}

.project-settings-block {
  order: -20;
}

.project-inbox-options-block {
  order: -40;
}

.project-inbox-settings-block {
  order: -30;
}

.project-danger-zone {
  justify-items: end;
  margin-top: 18px;
}

.project-danger-zone .danger-btn {
  width: auto;
  min-width: 150px;
}

.project-members-block .project-members-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.project-members-block .project-member-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  box-sizing: border-box;
}

.project-members-actions,
.project-permissions-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.project-members-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.project-permissions-actions-row .btn-pages {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 12px;
}

.project-invite-modal-content {
  max-width: 680px;
}

.project-block-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.project-block-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.project-block-card h4,
.project-block-card h5 {
  margin: 0;
}

.project-autosave-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(241, 233, 221, 0.68);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.project-autosave-status.is-saving {
  color: #ffe0a8;
  border-color: rgba(255,191,71,.2);
  background: rgba(255,191,71,.14);
}

.project-autosave-status.is-saved {
  color: #cff7da;
  border-color: rgba(83,194,125,.2);
  background: rgba(83,194,125,.14);
}

.project-autosave-status.is-pending {
  color: #ffe7bb;
  border-color: rgba(255, 191, 71, 0.2);
  background: rgba(255, 191, 71, 0.1);
}

.project-autosave-status.is-error {
  color: #ffd0cb;
  border-color: rgba(201,96,88,.2);
  background: rgba(201,96,88,.16);
}

.project-textarea {
  min-height: 96px;
  resize: vertical;
}

.project-richtext-field {
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(0,0,0,.12);
}

.project-field-heading {
  display: grid;
  gap: 3px;
}

.project-field-heading .project-field-help {
  margin: 0;
}

.project-inbox-save-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.project-inbox-save-actions-top {
  margin: 0 0 12px;
}

.project-inbox-save-actions-bottom {
  margin: 14px 0 0;
}

.project-richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}

.project-richtext-toolbar-label {
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.project-richtext-toolbar-btn {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1;
}

.project-field-help {
  display: block;
  margin-top: 4px;
  color: rgba(241, 233, 221, 0.6);
  font-size: .76rem;
  line-height: 1.4;
}

.project-field-help-inline {
  margin-top: 0;
}

.project-playlist-confirmation-picker {
  display: grid;
  grid-template-columns: auto minmax(220px, 360px);
  align-items: center;
  gap: 8px;
  width: min(100%, 520px);
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255,185,79,.16);
  background: rgba(255,185,79,.06);
}

.project-playlist-confirmation-picker > span {
  color: rgba(255, 231, 190, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-playlist-confirmation-picker .project-input {
  min-height: 32px;
  padding: 6px 9px;
}

.playlist-workspace.is-loading #playlist-name-input {
  color: rgba(255, 224, 168, 0.92);
  border-color: rgba(255, 191, 71, 0.28);
  background: rgba(255, 191, 71, 0.08);
}

.project-playlist-display-field {
  max-width: 340px;
}

.project-permissions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.project-permission-source-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

.project-permission-source-card .btn-pages {
  justify-self: start;
}

.project-permission-picker-card {
  position: relative;
  width: 100%;
  min-height: 132px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-permission-picker-card strong {
  color: rgba(255, 209, 141, 0.96);
  font-size: 1.05rem;
}

.project-permission-picker-card small {
  max-width: 520px;
  color: rgba(241, 233, 221, 0.62);
  line-height: 1.45;
}

.project-permission-picker-card .tv-versions-summary-arrow {
  position: absolute;
  top: 12px;
  right: 14px;
}

.project-permission-source-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.project-permission-source-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 0 2px;
}

.project-permission-source-list-head span {
  color: rgba(255, 209, 141, 0.94);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-permission-source-list-head small {
  color: rgba(241, 233, 221, 0.55);
  font-size: 0.76rem;
}

.project-permission-source-row,
.project-permission-source-empty {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(12, 12, 14, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.project-permission-source-row.is-missing {
  border-color: rgba(255, 130, 100, 0.28);
  background: rgba(130, 50, 32, 0.16);
}

.project-permission-source-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-permission-source-row-main strong {
  color: rgba(241, 233, 221, 0.94);
  font-size: 0.95rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-permission-source-row-main small,
.project-permission-source-empty {
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.82rem;
}

.project-permission-source-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 70px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 130, 100, 0.26);
  border-radius: 999px;
  background: rgba(160, 45, 30, 0.13);
  color: rgba(255, 214, 201, 0.9);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.project-permission-source-remove:hover {
  border-color: rgba(255, 150, 120, 0.65);
  background: rgba(190, 55, 38, 0.28);
  color: #fff3ed;
}

.account-user-permissions-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 14px;
}

.account-user-permissions-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.account-user-permission-source-list {
  margin-top: 14px;
}

@media (max-width: 720px) {
  .account-user-permissions-toolbar {
    grid-template-columns: 1fr;
  }

  .account-user-permissions-actions {
    justify-content: stretch;
  }

  .account-user-permissions-actions .btn-pages {
    flex: 1 1 160px;
  }
}

.project-permission-source-modal-content .playlist-library-list {
  margin-top: 10px;
}

.project-permission-source-item {
  width: 100%;
}

@media (max-width: 820px) {
  .project-editor-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

.playlist-workspace {
  width: auto;
  padding: 8px 0 24px;
  margin-inline: -10px;
}

.playlist-shell {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 20px;
}

.setlist-shell {
  grid-template-columns: minmax(0, 1fr);
}

.setlist-workspace {
  width: auto;
  padding: 8px 0 20px;
  margin-inline: -10px;
}

.setlist-workspace .playlist-editor-shell,
.setlist-workspace .playlist-editor-header-card,
.setlist-workspace .playlist-editor-card,
.setlist-workspace .setlist-library-summary,
.setlist-workspace .setlist-library-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.playlist-sidebar-card,
.playlist-editor-header-card,
.playlist-editor-card {
  background: linear-gradient(180deg, rgba(54, 54, 58, 0.92), rgba(38, 38, 42, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.playlist-sidebar-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.playlist-editor-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.playlist-editor-header-card {
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.playlist-editor-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.playlist-section-title,
.playlist-editor-title {
  margin: 6px 0 8px;
  font-size: 1.8rem;
  line-height: 1.1;
  color: #fff8ec;
}

.playlist-section-copy,
.playlist-editor-copy,
.playlist-panel-note,
.playlist-library-empty {
  color: rgba(241, 233, 221, 0.78);
  line-height: 1.5;
}

.playlist-create-box,
.playlist-search-box,
.playlist-panel {
  background: rgba(21, 21, 24, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 16px;
}

.playlist-create-box {
  display: grid;
  gap: 12px;
}

.playlist-field {
  display: grid;
  gap: 8px;
}

.playlist-field span {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 232, 211, 0.78);
}

.playlist-textarea {
  resize: vertical;
  min-height: 96px;
}

.playlist-create-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.playlist-library-list {
  display: grid;
  gap: 10px;
}

.playlist-library-item {
  width: 100%;
  text-align: left;
  background: rgba(15, 15, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #fff8ec;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.playlist-library-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 181, 33, 0.45);
}

.playlist-library-item.active {
  border-color: rgba(255, 181, 33, 0.68);
  background: rgba(255, 181, 33, 0.12);
}

.playlist-library-main,
.playlist-library-meta {
  display: grid;
  gap: 6px;
}

.playlist-library-main span,
.playlist-library-meta span {
  color: rgba(241, 233, 221, 0.76);
  font-size: 0.92rem;
}

.playlist-library-meta {
  min-width: 88px;
  justify-items: end;
  font-size: 0.82rem;
}

.playlist-empty-state {
  padding: 30px 26px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 24px;
}

.playlist-editor-card {
  padding: 22px 24px;
}

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

.playlist-panel-main,
.playlist-panel-wide {
  grid-column: 1 / -1;
}

.playlist-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.playlist-modal-title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #fff8ec;
}

.playlist-panel-head .playlist-panel-note {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.playlist-panel h3 {
  margin: 0;
  color: #fff8ec;
}

.playlist-inline-hints,
.playlist-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.playlist-stat-chip,
.playlist-user-chip,
.playlist-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff8ec;
}

.playlist-chip-list-empty {
  color: rgba(241, 233, 221, 0.72);
}

.playlist-project-links {
  display: grid;
  gap: 10px;
}

.playlist-project-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(12, 12, 15, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.playlist-project-option strong {
  display: block;
  color: #fff8ec;
}

.playlist-project-option span {
  color: rgba(241, 233, 221, 0.72);
  font-size: 0.9rem;
}

.playlist-autosync-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.playlist-panel-danger {
  border-color: rgba(255, 128, 128, 0.16);
}

.playlist-users-modal-content,
.playlist-autosync-modal-content {
  width: min(760px, 100%);
}

.playlist-user-results li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.playlist-user-results li.active {
  background: rgba(255, 181, 33, 0.12);
  border-left: 3px solid rgba(255, 181, 33, 0.7);
}

@media (max-width: 1100px) {
  .playlist-shell {
    grid-template-columns: 1fr;
  }

  .playlist-editor-header-card {
    flex-direction: column;
  }

  .playlist-editor-toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .playlist-workspace {
    padding: 14px 10px 24px;
  }

  .setlist-workspace {
    padding: 6px 0 18px;
    margin-inline: -10px;
  }

  .playlist-editor-grid {
    grid-template-columns: 1fr;
  }

  .playlist-library-item {
    flex-direction: column;
  }

  .playlist-library-meta {
    justify-items: start;
  }
}


.index-current-song-container {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.workspace-search-shell {
    position: relative;
    min-width: 0;
}

.workspace-search-shell .search-bar {
    width: 100%;
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: #f7f3eb;
    padding: 14px 42px 14px 16px;
}

.workspace-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(247, 243, 235, 0.72);
    font-size: 0.82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.workspace-search-clear.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.workspace-search-clear:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff7ec;
}

.workspace-status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, .91fr));
    gap: 10px;
    align-items: stretch;
}

.workspace-status-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 84px;
    overflow: hidden;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}

.workspace-status-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(241, 233, 221, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-status-value {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: #fff8ec;
    font-size: clamp(.72rem, .62rem + .42vw, .95rem);
    font-weight: 600;
    line-height: 1.24;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    text-wrap: balance;
}


.current-song-info {
    width: auto;
    text-align: left;
    color: inherit;
}

@media (max-width: 980px) {
    .index-current-song-container {
        grid-template-columns: 1fr;
    }

    .workspace-status-strip {
        grid-template-columns: 1fr;
    }
}

.topbar-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.topbar-branding {
    min-width: 0;
    justify-self: start;
}

.topbar-branding-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    display: grid;
    gap: 2px;
}

.topbar-branding-button:hover .topbar-title {
    color: #fff4dc;
}

.topbar-user-nav {
    margin-left: 0;
    align-self: center;
    justify-self: end;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex: 0 0 auto;
    white-space: nowrap;
    gap: 6px;
}

.workspace-control-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.55fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.workspace-project-shell {
  min-width: 0;
  min-height: 40px;
  margin-top: 0;
  padding: 6px 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.project-switcher-label-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(241, 233, 221, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.project-switcher-label-btn:hover {
    background: transparent;
    color: #fff6e8;
}

.workspace-song-shell {
    display: grid;
    grid-template-columns: minmax(145px, 0.62fr) minmax(230px, 1.38fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 40px;
    padding: 6px 9px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}

#current-song-info.workspace-song-shell {
    width: auto;
    margin-bottom: 0;
    display: grid;
    justify-content: stretch;
    padding: 6px 9px;
    background: rgba(255,255,255,.04);
    color: inherit;
    position: static;
    z-index: auto;
    font-size: inherit;
}

.workspace-song-line {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
}

.workspace-song-title {
    display: inline-block;
    min-width: 0;
    color: #fff8ec;
    font-size: clamp(.72rem, .68rem + .18vw, .86rem);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.workspace-song-line .workspace-status-label {
    margin: 0;
    white-space: nowrap;
}

.workspace-status-link {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.workspace-status-link:hover {
    color: #fff6e8;
    background: transparent;
}

.workspace-project-shell .project-switcher-select {
  min-width: 0;
  width: 100%;
  min-height: 28px;
  height: 28px;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.86rem;
  line-height: 1.1;
}

.workspace-song-shell .workspace-search-shell .search-bar {
  min-height: 28px;
  margin: 0;
  padding: 4px 32px 4px 10px;
  border-radius: 14px;
  font-size: 0.84rem;
}

.workspace-song-shell .workspace-search-clear {
  right: 8px;
  width: 20px;
  height: 20px;
  font-size: 0.74rem;
}

.workspace-nav-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 8px;
}

.workspace-nav-strip .header-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 38px;
    padding: 5px 8px 6px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 1px;
    text-align: center;
    border-radius: 10px;
    color: rgba(255, 248, 236, 0.88);
    background: rgba(23, 23, 24, 0.58);
    border: 1px solid rgba(255,255,255,.075);
}

.header-nav-btn-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.1;
    min-height: 1.15em;
    color: rgba(255, 248, 236, 0.92);
}

.header-nav-btn-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: rgba(241, 233, 221, 0.62);
    font-size: 0.61rem;
    line-height: 1.1;
    min-height: 1.15em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.header-nav-btn-meta.is-placeholder {
    visibility: hidden;
}

.header-nav-btn-copy-single {
    grid-row: 1 / -1;
    align-self: center;
}

.workspace-nav-strip .header-nav-btn:hover {
    transform: none;
    border-color: rgba(255, 191, 71, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.workspace-nav-strip .header-nav-btn.is-active {
    border-color: rgba(255, 191, 71, 0.45);
    background: linear-gradient(180deg, rgba(255, 191, 71, 0.16), rgba(255, 191, 71, 0.06));
    color: #fff6e8;
}

.workspace-nav-strip .header-nav-btn.is-active .header-nav-btn-copy {
    color: #fff9ef;
}

.workspace-nav-strip .header-nav-btn.is-active .header-nav-btn-meta {
    color: rgba(255, 243, 217, 0.82);
}

.main-container.tabviewer-live-mode .workspace-control-strip,
.main-container.tabviewer-live-mode .workspace-nav-strip {
    display: grid;
}

@media (max-width: 1100px) {
    .topbar-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        padding: 8px 12px;
    }

    .topbar-branding {
        min-width: 0;
    }

    .topbar-title {
        font-size: 0.96rem;
    }

    .topbar-user-nav {
        gap: 5px;
        width: auto;
        justify-self: end;
    }

    .topbar-user-pill,
    .topbar-link,
    .topbar-admin-btn {
        font-size: 0.8rem;
    }

    .workspace-control-strip {
        grid-template-columns: minmax(0, 1.42fr) minmax(155px, 0.58fr);
        gap: 8px;
    }

    .workspace-project-shell,
    #current-song-info.workspace-song-shell {
      min-height: 38px;
      padding: 5px 8px;
    }

    .workspace-song-shell {
        grid-template-columns: minmax(125px, 0.6fr) minmax(175px, 1.4fr);
        gap: 8px;
    }

    .workspace-project-shell .project-switcher-select {
        min-height: 27px;
        height: 27px;
        padding: 3px 9px;
        font-size: 0.84rem;
    }

    .workspace-song-shell .workspace-search-shell .search-bar {
        min-height: 27px;
        padding: 3px 30px 3px 9px;
        font-size: 0.82rem;
    }

    .workspace-nav-strip {
        gap: 6px;
    }

    .workspace-nav-strip .header-nav-btn {
        min-height: 36px;
        padding: 5px 7px;
    }

    .header-nav-btn-copy {
        font-size: 0.81rem;
    }

    .header-nav-btn-meta {
        font-size: 0.59rem;
    }
}

.tv-mobile-menu-return {
    display: none;
}

@media (max-width: 560px) {
    body {
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    }

    .topbar-branding {
        display: none !important;
    }

    .topbar-shell {
        justify-content: flex-end !important;
    }

    .workspace-nav-strip {
        position: fixed;
        z-index: 1250;
        left: 4px;
        right: 4px;
        bottom: calc(3px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        margin: 0;
        padding: 4px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 13px;
        background: rgba(18, 18, 18, 0.94);
        backdrop-filter: blur(8px);
    }

    .main-container.tabviewer-live-mode:not(.mobile-tab-menu-open) .workspace-nav-strip {
        display: none;
    }

    .main-container.tabviewer-live-mode.mobile-tab-menu-open .workspace-nav-strip {
        display: grid;
    }

    body.mobile-tab-menu-open .tv-floating-live-tools {
        display: none !important;
    }

    .tv-return-top-btn {
        display: none !important;
    }

    .tv-floating-live-tools {
        left: 4px;
        right: 4px;
        bottom: calc(3px + env(safe-area-inset-bottom, 0px));
        justify-content: space-between;
        gap: 3px;
        padding: 3px 4px;
        overflow: hidden;
        touch-action: manipulation;
    }

    .tv-floating-inline-label,
    #tv-floating-tempo-group {
        display: none !important;
    }

    .tv-floating-inline-group {
        min-width: 0;
    }

    #tab-key-chip {
        min-width: 72px;
        min-height: 27px;
        padding: 1px 3px;
        gap: 2px;
    }

    #tab-key-chip .tv-floating-live-box-main {
        min-width: 2.5ch;
    }

    .tv-floating-stepper {
        width: 19px;
        height: 19px;
    }

    .tv-floating-control-chip,
    .tv-setlist-switch-btn,
    .tv-mobile-menu-return {
        min-width: 29px;
        min-height: 27px;
        height: 27px;
        padding: 0 6px;
        font-size: 0.6rem;
    }

    .tv-mobile-menu-return {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 29px;
        border: 1px solid rgba(255, 191, 71, 0.35);
        border-radius: 999px;
        background: rgba(255, 191, 71, 0.1);
        color: #fff6e8;
        font-size: 17px;
    }

    .tabcontent-viewport {
        overflow-x: auto;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .tab-content-stack.has-presentation-bar {
        padding-left: 6px;
    }

    .tabviewer-pre,
    .tabviewer-page-shell .tabviewer-pre {
        padding-left: 6px;
        font-size: 8px;
    }

    .topbar-shell {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .topbar-user-nav {
        margin-left: 0;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .workspace-control-strip {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .workspace-song-shell {
        grid-template-columns: 1fr;
        min-height: 36px;
        padding: 5px 6px;
        gap: 6px;
        border-radius: 12px;
    }

    .workspace-project-shell {
        min-height: 36px;
        padding: 5px 6px;
        gap: 6px;
        border-radius: 12px;
    }

    .workspace-song-line {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .workspace-nav-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
    }

    .workspace-nav-strip .header-nav-btn {
        min-height: 32px;
        padding: 4px 3px;
        gap: 0;
        grid-template-rows: 1fr;
    }

    .header-nav-btn-copy {
        font-size: 0.66rem;
        line-height: 1.05;
        white-space: normal;
        word-break: break-word;
    }

    .header-nav-btn-meta {
        display: none;
    }

    .header-nav-btn-copy-single {
        grid-row: auto;
    }

    .workspace-song-title {
        font-size: 0.74rem;
    }

    .workspace-project-shell .project-switcher-label-btn {
        font-size: 0.68rem;
    }

    .workspace-project-shell .project-switcher-select,
    .workspace-song-shell .workspace-search-shell .search-bar {
        min-height: 26px;
        height: 26px;
        font-size: 0.74rem;
    }

    .workspace-song-shell .workspace-search-shell .search-bar {
        padding-right: 28px;
    }

    .workspace-song-line .workspace-status-label {
        font-size: 0.66rem;
        letter-spacing: 0.06em;
    }

    .tv-current-tab-shell > .tv-card-header {
        padding: 12px 12px 0;
        margin-bottom: 6px;
    }

    .tv-current-tab-info {
        padding: 0 12px 8px;
    }

    .tv-current-tab-info-title,
    .tv-versions-summary-title {
        font-size: clamp(1rem, 5.6vw, 1.28rem);
    }

    .tv-versions-summary {
        padding: 12px;
        gap: 8px;
    }

    .tv-more-tabs-toggle {
        width: calc(100% - 24px);
        margin: 0 12px 12px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.68rem;
    }

    .tv-card-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .tv-card-actions .tv-btn {
        width: 100%;
        min-height: 34px;
        padding: 0 8px;
        font-size: 0.64rem;
        line-height: 1.1;
        letter-spacing: 0.05em;
        white-space: normal;
    }

    .tv-versions-toolbar {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 0 10px;
    }

    .tv-versions-context {
        gap: 4px;
    }

    .tv-versions-context-value {
        font-size: 0.92rem;
        line-height: 1.24;
        word-break: break-word;
    }

    .tv-versions-context-label,
    .tv-versions-search-label {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .tabcontent-viewport {
        min-height: 56vh;
        height: calc(100vh - 210px);
        max-height: calc(100vh - 210px);
        border-radius: 14px;
    }

    .tabviewer-pre,
    .tabviewer-page-shell .tabviewer-pre {
        font-size: 0.76rem;
        line-height: 1.28;
    }

    .tv-floating-live-tools {
        left: 10px;
        right: 54px;
        gap: 4px;
        padding: 4px 6px;
        border-radius: 14px;
    }

    .tv-floating-inline-label {
        font-size: 9px;
        letter-spacing: 0.08em;
    }

    .tv-floating-live-box {
        min-height: 30px;
        padding: 2px 6px;
        gap: 4px;
    }

    .tv-floating-live-box.tv-meta-live-chip {
        padding: 2px 6px;
    }

    .tv-floating-live-value {
        font-size: 12px;
        min-width: 2.4ch;
    }

    #tab-key-chip .tv-floating-key-stack .tv-floating-live-value {
        font-size: 10.5px;
    }

    .tv-floating-transpose-value {
        min-height: 8px;
        font-size: 9.5px;
    }

    .tv-floating-stepper {
        width: 20px;
        height: 20px;
        font-size: 13px;
    }

    .tv-floating-control-chip {
        min-height: 30px;
        padding: 0 8px;
        font-size: 0.62rem;
    }

    #tab-key-chip {
        min-width: 92px;
    }

    .tv-fine-autoscroll {
        right: 10px;
        bottom: 66px;
        width: 28px;
        padding: 5px 4px;
        gap: 6px;
        border-radius: 14px;
    }

    .tv-fine-autoscroll-hitbox {
        inset: -10px;
    }

    .tv-fine-autoscroll-rail {
        width: 12px;
        height: 112px;
    }

    .tv-fine-autoscroll-thumb {
        width: 20px;
        height: 12px;
    }

    .tv-fine-autoscroll-value {
        font-size: 9px;
    }
}


.bookpage-toolbar-grid {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}

.bookpage-toolbar-tabs {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.bookpage-source-tabbar {
  display: flex;
  align-items: flex-end;
  margin: 4px 0 -1px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bookpage-source-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.bookpage-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  justify-self: end;
}

.bookpage-toolbar-summary {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(241,233,221,.64);
  font-size: .78rem;
}

.bookpage-picker-modal-content {
  width: min(720px, calc(100vw - 24px));
  max-height: min(90vh, 840px);
  overflow: auto;
  display: grid;
  gap: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(22, 22, 22, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.bookpage-inline-panel {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.bookpage-inline-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 700;
  color: #fff8ec;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bookpage-inline-summary::-webkit-details-marker {
  display: none;
}

.bookpage-inline-panel[open] .bookpage-inline-summary {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.bookpage-inline-panel-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}

.bookpage-inline-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(241,233,221,.68);
}

.bookpage-inline-search {
  width: 100%;
}

.bookpage-source-options {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.bookpage-source-section {
  margin: 10px 0 1px;
  color: rgba(255, 244, 225, 0.72);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bookpage-source-section:first-child {
  margin-top: 0;
}

.bookpage-source-option {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 4px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff8ec;
}

.bookpage-source-option.active {
  border-color: rgba(255,180,31,.42);
  background: rgba(255,180,31,.12);
}

.bookpage-source-option span {
  color: rgba(241,233,221,.68);
  font-size: .88rem;
}

.bookpage-columns-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.bookpage-inline-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.bookpage-inline-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bookpage-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.bp-search {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff8ec;
  padding: 12px 14px;
}

@media (max-width: 980px) {
  .bookpage-toolbar-grid {
    grid-template-columns: 1fr;
  }
}


.bookpage-inline-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bookpage-inline-summary-kicker {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(241,233,221,.56);
}

.bookpage-inline-summary::after {
  content: "▾";
  font-size: .95rem;
  color: rgba(241,233,221,.72);
  transition: transform .18s ease;
}

.bookpage-inline-panel[open] .bookpage-inline-summary::after {
  transform: rotate(180deg);
}

.bookpage-source-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bookpage-source-shortcut {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 4px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff8ec;
}

.bookpage-source-tab {
  position: relative;
  width: auto;
  min-width: 118px;
  max-width: 210px;
  min-height: 32px;
  align-content: center;
  padding: 6px 11px 7px;
  border-radius: 11px 11px 0 0;
  border-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  transform: translateY(1px);
}

.bookpage-source-tab strong,
.bookpage-source-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookpage-source-shortcut span {
  color: rgba(241,233,221,.68);
  font-size: .68rem;
  line-height: 1.05;
}

.bookpage-source-shortcut.active {
  z-index: 2;
  color: #fff9ef;
  border-color: rgba(var(--songbook-accent-rgb), .48);
  border-bottom-color: rgba(38, 38, 38, 0.98);
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb), .22), rgba(38, 38, 38, .98));
  box-shadow: 0 -8px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(1px);
}

.bookpage-source-shortcut.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgba(38, 38, 38, 0.98);
}

.bookpage-playlist-picker {
  gap: 12px;
}

.bookpage-playlist-picker.is-open {
  display: grid;
}

.bookpage-source-option {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: #fff8ec;
}

.bookpage-source-option input {
  margin-top: 3px;
  accent-color: #ffb41f;
}

.bookpage-source-option.active {
  border-color: rgba(255,180,31,.42);
  background: rgba(255,180,31,.12);
}

.bookpage-source-option-copy {
  display: grid;
  gap: 4px;
}

.bookpage-root .bp-group {
  padding: 0;
  gap: 0;
  border-radius: 0;
  background: transparent;
}

.bookpage-root .bp-label {
  display: none;
}

.bookpage-root .bp-btn {
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.1;
}

.bookpage-root .bp-btn-edit {
  background: rgba(255, 191, 71, 0.14);
  border: 1px solid rgba(255, 191, 71, 0.3);
  color: #fff6e8;
}

.bookpage-root .bp-btn-filter {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff6e8;
}

#bookpage-current-playlist-span.section-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.15;
}

@media (max-width: 980px) {
  .bookpage-toolbar-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
  }

  .bookpage-source-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .bookpage-toolbar-actions {
    justify-content: space-between;
  }

  .bp-edit {
    align-self: stretch;
    display: flex;
  }

  .bp-edit .bp-btn {
    min-width: 0;
    white-space: nowrap;
  }

  .bookpage-inline-summary {
    min-height: 36px;
    padding: 8px 12px;
  }

  .bookpage-inline-summary-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .bookpage-inline-summary-kicker {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }

  .bookpage-inline-summary-copy > span:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bookpage-inline-panel-body {
    padding: 10px 12px 12px;
    gap: 10px;
  }

  .bookpage-source-shortcuts {
    grid-template-columns: 1fr;
  }
}

/* Setlist workspace */
.setlist-sidebar-card {
  gap: 14px;
}

.setlist-sidebar-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setlist-sidebar-topline .project-section-label {
  margin: 0;
}

.setlist-library-empty-state {
  min-height: 0;
  padding: 4px 2px 0;
  background: transparent;
  border: none;
  color: rgba(241, 233, 221, 0.56);
}

.setlist-current-header-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.setlist-current-shell {
  margin: 0 0 12px;
  overflow: hidden;
}

.setlist-current-shell > .tv-card-header {
  padding: 20px 20px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.setlist-current-header-copy {
  min-width: 0;
  display: contents;
}

.setlist-current-shell > .tv-card-header .tv-card-heading {
  min-width: 0;
}

.setlist-inline-hints {
  gap: 10px;
  margin: 0;
  padding: 0 20px 18px;
}

.setlist-current-info {
  padding: 0 20px 10px;
  padding-bottom: 10px;
}

.setlist-current-title {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.18;
  padding-top: 6px;
  word-break: break-word;
  text-align: left;
}

.setlist-inline-hints .playlist-stat-chip {
  min-height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
}

.setlist-library-summary {
  width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
  overflow: hidden;
}

.setlist-library-toggle-inline {
  width: calc(100% - 40px);
  margin: 0 20px 18px;
}

#setlist-create-box[hidden],
#setlist-library-panel[hidden] {
  display: none !important;
}

.setlist-library-panel {
  margin-top: -2px;
  display: block;
}

.setlist-current-shell .setlist-library-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.setlist-inline-search-box {
  margin-bottom: 10px;
}

.setlist-inline-search-box .playlist-input {
  width: 100%;
  min-height: 46px;
  margin-bottom: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.75);
  color: #f4f1eb;
  padding: 0 14px;
}

.setlist-editor-card {
  padding: 18px 20px;
}

.setlist-editor-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.setlist-workspace .playlist-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.setlist-permissions-modal-content {
  width: min(980px, calc(100vw - 28px));
  max-height: min(88vh, 960px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(24, 24, 24, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.setlist-library-modal-content {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(88vh, 960px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(24, 24, 24, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.tabviewer-permissions-modal-content {
  width: min(980px, calc(100vw - 28px));
  max-height: min(88vh, 960px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(24, 24, 24, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.tabviewer-permissions-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.tab-permission-grid-view-only {
  grid-template-columns: minmax(0, 1fr);
}

.tab-permission-grid-legacy-hidden {
  display: none !important;
}

.permission-role-shell {
  display: grid;
  gap: 14px;
}

.permission-role-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  gap: 16px;
  align-items: end;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.permission-role-head h3,
.permission-role-head p {
  margin: 0;
}

.permission-role-head h3 {
  color: #fff7ec;
  font-size: 1.05rem;
}

.permission-role-head p {
  margin-top: 5px;
  color: rgba(241, 233, 221, 0.66);
  font-size: 0.86rem;
  line-height: 1.35;
}

.permission-role-global {
  display: grid;
  gap: 5px;
  color: rgba(241, 233, 221, 0.64);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.permission-role-search {
  width: 100%;
}

.permission-role-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 3px;
}

.permission-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.permission-role-row.is-active {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.24);
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.07);
}

.permission-role-row.is-inherited {
  opacity: 0.72;
}

.permission-role-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.permission-role-copy strong {
  color: #fff7ec;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.permission-role-copy small {
  color: rgba(241, 233, 221, 0.58);
  font-weight: 700;
}

.permission-role-select {
  min-height: 34px;
}

.tab-permission-fixed-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.22);
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.08);
  color: rgba(255, 248, 236, 0.78);
  font-size: 0.86rem;
  line-height: 1.4;
}

#setlist-permissions-launch {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
  margin: 0;
  align-self: center;
}

#setlist-permissions-launch[disabled],
#setlist-tags-launch[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
}

#setlist-permissions-launch.is-open,
#setlist-tags-launch.is-open {
  border-color: rgba(255, 181, 33, 0.4);
  background: rgba(255, 181, 33, 0.1);
}

#setlist-tags-launch {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
  margin: 0;
  align-self: center;
}

.setlist-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 18px;
  align-items: center;
}

.setlist-secondary-actions .tv-btn {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  margin: 0;
}

.setlist-secondary-actions .tv-btn[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
}

.setlist-mode-launch-btn {
  margin-left: auto !important;
  border-color: rgba(var(--songbook-accent-rgb), 0.58) !important;
  background: linear-gradient(135deg, rgba(var(--songbook-accent-rgb), 0.34), rgba(84, 214, 201, 0.16)) !important;
  color: #fff8ec !important;
  box-shadow: 0 12px 28px rgba(var(--songbook-accent-rgb), 0.16);
}

.setlist-reorder-lock-btn {
  width: 30px;
  min-width: 30px;
  padding: 4px !important;
  justify-content: center;
}

.setlist-add-section-btn {
  width: 30px;
  min-width: 30px;
  min-height: 30px !important;
  padding: 0 !important;
  justify-content: center;
  color: #ffd58f;
  font-size: 1.05rem !important;
  font-weight: 900;
}

.setlist-section-tabs,
.tv-setlist-section-tabs {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.setlist-section-tabs {
  padding: 0 16px 10px;
}

.setlist-section-tab,
.tv-setlist-section-tab {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 191, 71, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 247, 236, 0.76);
  padding: 4px 9px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.setlist-section-tab.is-active,
.tv-setlist-section-tab.is-active,
.tv-setlist-section-tab:hover {
  border-color: rgba(255, 191, 71, 0.72);
  background: rgba(255, 191, 71, 0.16);
  color: #ffd58f;
}

.setlist-section-card {
  border-color: rgba(255, 191, 71, 0.34);
  background: linear-gradient(90deg, rgba(255, 181, 33, 0.13), rgba(255, 255, 255, 0.025));
}

.setlist-section-name-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 191, 71, 0.22);
  background: transparent;
  color: #ffd58f;
  padding: 4px 2px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
}

.setlist-section-name-input:disabled { opacity: 1; }

.setlist-song-actions .setlist-version-trigger {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 0.62rem;
}

.setlist-song-actions .setlist-song-remove-btn {
  width: 27px;
  min-width: 27px;
  min-height: 27px;
  padding: 0;
  font-size: 0.82rem;
}

.tv-setlist-name-sections-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tv-setlist-name-sections-row > strong { flex: 0 1 auto; }

.setlist-reorder-lock-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setlist-reorder-lock-btn.is-locked {
  color: rgba(255, 244, 232, 0.68);
  background: rgba(255, 255, 255, 0.04);
}

.setlist-reorder-lock-btn.is-unlocked {
  color: #18120a;
  border-color: rgba(255, 191, 71, 0.86);
  background: #ffbf47;
  box-shadow: 0 0 0 3px rgba(255, 191, 71, 0.14);
}

.setlist-reorder-locked .setlist-song-grip {
  opacity: 0.34;
  cursor: not-allowed;
  pointer-events: none;
}

.setlist-reorder-locked [data-setlist-version],
.setlist-reorder-locked [data-setlist-remove],
.setlist-reorder-locked [data-setlist-position] {
  opacity: 0.34;
  cursor: not-allowed;
}

.setlist-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 16px;
}

.setlist-tags-modal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 26px;
  margin-bottom: 16px;
}

.setlist-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 181, 33, 0.08);
  border: 1px solid rgba(255, 181, 33, 0.2);
  color: rgba(255, 243, 220, 0.88);
  font-size: 0.8rem;
  font-weight: 700;
}

.setlist-tag-chip-editable {
  gap: 8px;
  padding-right: 6px;
}

.setlist-tag-chip-label {
  min-width: 0;
}

.setlist-tag-remove-btn {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 243, 220, 0.92);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.setlist-tag-remove-btn:hover {
  background: rgba(0, 0, 0, 0.34);
}

.setlist-tags-modal-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.playlist-library-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.playlist-library-quick-create {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.playlist-library-tag-filters {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.playlist-library-tag-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 247, 236, 0.72);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.playlist-library-tag-clear {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
}

.playlist-library-tag-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.playlist-library-tag-filter {
  cursor: pointer;
}

.playlist-library-tag-filter.is-active {
  background: rgba(255, 181, 33, 0.18);
  border-color: rgba(255, 181, 33, 0.34);
  color: #fff6e4;
}

.playlist-library-tag-count {
  margin-left: 6px;
  opacity: 0.72;
  font-size: 0.72rem;
}

.setlist-library-tag-nav {
  cursor: pointer;
}

.setlist-tags-editor-field {
  flex: 1 1 auto;
  min-width: 0;
}

.setlist-populate-modal-content {
  display: grid;
  gap: 14px;
}

.setlist-populate-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setlist-populate-mode {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 247, 236, 0.74);
  font-weight: 800;
  cursor: pointer;
}

.setlist-populate-mode.is-active {
  border-color: rgba(255, 181, 33, 0.32);
  background: rgba(255, 181, 33, 0.12);
  color: #fff4df;
}

.setlist-populate-source-list {
  max-height: min(44vh, 460px);
  overflow: auto;
  padding-right: 4px;
}

.setlist-populate-source-item {
  cursor: pointer;
}

.setlist-populate-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 247, 236, 0.78);
  font-size: 0.86rem;
  font-weight: 800;
}

.setlist-populate-actions {
  margin-top: 0;
}

.setlist-library-mainline-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setlist-library-mainline-block > .playlist-library-mainline-meta,
.setlist-library-tags-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.permission-bulk-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.permission-bulk-actions .btn-pages {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  margin: 0;
}

.playlist-user-chip-more {
  color: rgba(255, 243, 217, 0.8);
}

.setlist-song-list {
  display: grid;
  gap: 6px;
  padding: 0 16px 14px;
}

.setlist-song-card {
  display: grid;
  grid-template-columns: 32px 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.setlist-song-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
  outline: none;
  appearance: none;
}

.setlist-song-main:focus-visible {
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255, 191, 71, 0.32);
}

.setlist-song-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlist-song-copy {
  min-width: 0;
}

.setlist-song-copy strong {
  font-size: 0.88rem;
  color: #fff7ec;
}

.setlist-song-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  margin-top: 4px;
}

.setlist-song-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 247, 236, 0.72);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.setlist-song-request-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  margin-top: 4px;
}

.setlist-song-request-chip {
  max-width: min(100%, 260px);
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(var(--songbook-accent-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--songbook-accent-rgb), 0.08);
  color: rgba(255, 247, 236, 0.78);
  font-size: 0.67rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setlist-song-setup-chip {
  cursor: pointer;
}

.setlist-song-setup-chip:hover {
  color: #fff7ec;
  border-color: rgba(255, 191, 71, 0.3);
}

.setlist-song-tempo-chip .tempo-led {
  margin-left: 0;
}

.setlist-setup-modal-content {
  max-width: min(560px, calc(100vw - 28px));
}

.setlist-setup-full {
  max-height: min(52vh, 440px);
  margin: 12px 0 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 247, 236, 0.88);
  white-space: pre-wrap;
  font: 0.9rem/1.45 "Roboto Mono", monospace;
}

.setlist-song-position {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #ffba52;
  background: rgba(255, 186, 82, 0.12);
  border: 1px solid rgba(255, 186, 82, 0.22);
  flex-shrink: 0;
}

.setlist-song-position-input {
  padding: 0;
  text-align: center;
  font: inherit;
  appearance: textfield;
}

.setlist-song-position-input::-webkit-outer-spin-button,
.setlist-song-position-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.setlist-song-grip {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 244, 232, 0.7);
  border-radius: 10px;
  padding: 8px 7px;
  cursor: grab;
  font-size: 0.9rem;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.setlist-song-grip:active {
  cursor: grabbing;
}

.setlist-song-touch-moving {
  position: relative;
  z-index: 20;
  border-color: rgba(255, 191, 71, 0.8);
  background: rgba(255, 191, 71, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.setlist-song-touch-placeholder {
  opacity: 0.24;
  border-color: rgba(255, 191, 71, 0.9);
  border-style: dashed;
  background: rgba(255, 191, 71, 0.08);
}

.setlist-song-touch-clone {
  position: fixed !important;
  z-index: 100000 !important;
  margin: 0 !important;
  pointer-events: none !important;
  opacity: 0.96;
  border-color: rgba(255, 191, 71, 0.95) !important;
  background: #28231f !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58), 0 0 0 3px rgba(255, 191, 71, 0.18) !important;
  transform: translate3d(0, 0, 0);
  transition: none !important;
  will-change: transform;
}

@media (pointer: coarse) {
  .setlist-song-grip {
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.setlist-song-chosen {
  border-color: rgba(255, 191, 71, 0.32);
}

.setlist-song-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  justify-self: end;
  margin-left: auto;
  width: max-content;
}

.setlist-song-actions .btn-pages,
.setlist-song-remove-btn {
  margin: 0;
}

.setlist-library-panel .playlist-library-list,
.setlist-library-modal-content .playlist-library-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.setlist-library-panel .playlist-library-item,
.setlist-library-modal-content .playlist-library-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff7ec;
  text-align: left;
}

.setlist-library-panel .playlist-library-item.active,
.setlist-library-panel .playlist-library-item:hover,
.setlist-library-modal-content .playlist-library-item.active,
.setlist-library-modal-content .playlist-library-item:hover {
  border-color: rgba(255, 191, 71, 0.22);
  background: rgba(255, 191, 71, 0.08);
}

.playlist-library-mainline {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-library-mainline-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff8ec;
}

.playlist-library-mainline-meta,
.playlist-library-mainline-count,
.setlist-library-panel .playlist-library-main span,
.setlist-library-panel .playlist-library-meta span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
}

.playlist-library-mainline-count {
  justify-self: end;
}

.setlist-songs-shell,
.setlist-danger-shell {
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(39, 39, 41, 0.94), rgba(30, 30, 32, 0.9));
}

.setlist-songs-shell > .tv-card-header,
.setlist-danger-shell > .tv-card-header {
  padding: 18px 20px 10px;
  margin-bottom: 0;
}

.setlist-songs-shell #setlist-song-empty {
  padding: 0 20px 14px;
}

.setlist-danger-shell .tv-card-header {
  padding: 18px 20px 10px;
}

.setlist-version-trigger {
  min-height: 28px;
  width: 154px;
  min-width: 154px;
  max-width: 154px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setlist-user-version-trigger {
  opacity: 0.58;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 247, 236, 0.72) !important;
}

.setlist-user-version-trigger.is-active {
  opacity: 1;
  border-color: rgba(255, 191, 71, 0.72) !important;
  background: rgba(255, 191, 71, 0.15) !important;
  color: #ffd058 !important;
  font-weight: 900;
}

.setlist-version-trigger.has-options::after {
  content: " ▾";
  opacity: 0.72;
}

.setlist-song-remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 130, 130, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #ffb0b0;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.setlist-danger-shell,
.playlist-danger-shell {
  margin-top: 8rem;
}

.setlist-danger-shell > .tv-card-header,
.playlist-danger-shell > .tv-card-header {
  justify-content: flex-end;
  text-align: right;
}

.setlist-danger-shell .tv-card-heading,
.playlist-danger-shell .tv-card-heading {
  margin-right: auto;
  text-align: left;
}

.danger-ghost {
  border-color: rgba(255, 130, 130, 0.22) !important;
  color: #ffb0b0 !important;
}

.setlist-song-ghost {
  opacity: 0.35;
}

.setlist-song-dragging {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.setlist-version-picker {
  position: absolute;
  z-index: 9999;
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #202024;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.setlist-version-option {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff7ec;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.setlist-version-option:last-child {
  margin-bottom: 0;
}

.setlist-version-option:hover {
  border-color: rgba(255, 186, 82, 0.3);
  background: rgba(255, 186, 82, 0.08);
}

.setlist-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  margin-bottom: 10px;
}

.setlist-user-row.active {
  border-color: rgba(255, 186, 82, 0.2);
  background: rgba(255, 186, 82, 0.06);
}

.setlist-user-row-copy {
  min-width: 0;
}

.setlist-user-row-copy strong,
.setlist-user-row-copy span {
  display: block;
}

.setlist-user-row-copy span {
  margin-top: 4px;
  color: rgba(255, 244, 232, 0.64);
}

.setlist-role-select {
  min-width: 120px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #26262c;
  color: #fff7ec;
  padding: 10px 12px;
}

.playlist-user-chip-owner {
  border-color: rgba(255, 186, 82, 0.28);
  background: rgba(255, 186, 82, 0.12);
  color: #ffd58f;
}

/* Playlist workspace refresh */
.playlist-workspace-modern .playlist-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.playlist-shell-modern {
  grid-template-columns: minmax(0, 1fr);
}

.playlist-loader-shell,
.playlist-current-shell {
  margin: 0 0 12px;
  overflow: hidden;
}

.playlist-loader-shell > .tv-card-header,
.playlist-current-shell > .tv-card-header {
  padding: 20px 20px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.playlist-library-launch {
  width: calc(100% - 40px);
  margin: 0 20px 18px;
}

.playlist-current-info {
  padding: 0 20px 10px;
}

.playlist-current-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.playlist-current-title-field {
  gap: 4px;
}

.playlist-current-title-field > span,
.playlist-current-field > span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.62);
}

.playlist-current-title-input {
  min-height: 0;
  padding: 6px 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #fff8ec;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.18;
  box-shadow: none;
}

.playlist-current-title-input:focus {
  outline: none;
  box-shadow: none;
}

.playlist-current-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.playlist-current-field .playlist-input {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.75);
  color: #f4f1eb;
  padding: 0 14px;
}

.playlist-current-field .playlist-input:disabled,
.playlist-current-title-input:disabled {
  opacity: 1;
  color: rgba(244, 241, 235, 0.72);
  -webkit-text-fill-color: rgba(244, 241, 235, 0.72);
  cursor: default;
}

.playlist-inline-hints-modern {
  gap: 10px;
  margin: 0;
  padding: 0 20px 18px;
}

.playlist-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 16px;
}

#playlist-permissions-launch,
#playlist-tags-launch {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  white-space: nowrap;
  margin: 0;
  align-self: center;
}

#playlist-permissions-launch[disabled],
#playlist-tags-launch[disabled] {
  opacity: 0.56;
  cursor: not-allowed;
}

#playlist-permissions-launch.is-open,
#playlist-tags-launch.is-open {
  border-color: rgba(255, 181, 33, 0.4);
  background: rgba(255, 181, 33, 0.1);
}

.playlist-share-modal-content {
  width: min(980px, calc(100vw - 28px));
  max-height: min(88vh, 960px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(24, 24, 24, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.playlist-create-modal-content {
  width: min(680px, calc(100vw - 28px));
}

.playlist-create-field {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.playlist-create-field > span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.62);
}

.playlist-create-feedback {
  min-height: 24px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(241, 233, 221, 0.76);
  background: rgba(255, 255, 255, 0.04);
}

.playlist-create-feedback:empty {
  display: none;
}

.playlist-create-feedback.is-error {
  color: #ffcbc6;
  background: rgba(186, 68, 68, 0.16);
}

.playlist-create-feedback.is-warning {
  color: #ffe0a8;
  background: rgba(255, 191, 71, 0.14);
}

.playlist-create-feedback.is-saving {
  color: #ffe0a8;
  background: rgba(255, 191, 71, 0.1);
}

.playlist-create-feedback.is-saved,
.playlist-create-feedback.is-info {
  color: #d9f2ff;
  background: rgba(115, 180, 255, 0.12);
}

.playlist-create-modal-actions {
  margin-top: 14px;
  justify-content: flex-end;
}

.playlist-library-modal-content-modern {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(88vh, 960px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(24, 24, 24, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.playlist-share-projects-shell {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-autosync-shell,
.playlist-danger-shell {
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-autosync-shell {
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
}

.playlist-danger-shell {
  background: linear-gradient(180deg, rgba(39, 39, 41, 0.94), rgba(30, 30, 32, 0.9));
}

.playlist-autosync-shell > .tv-card-header,
.playlist-danger-shell > .tv-card-header {
  padding: 12px 16px;
  margin-bottom: 0;
}

.playlist-autosync-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 20px 18px;
}

.playlist-current-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
}

.playlist-current-title {
  color: #fff7ec;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.15;
}

.playlist-current-public-name {
  margin-top: 4px;
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.86rem;
  font-weight: 700;
}

.playlist-current-copy > .playlist-current-field,
.playlist-current-copy > .playlist-current-meta-grid {
  display: none;
}

.playlist-content-modal-content {
  width: min(760px, calc(100vw - 28px));
}

.playlist-content-launch-btn {
  min-width: 178px;
  padding: 11px 20px;
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.48) !important;
  background: linear-gradient(135deg, rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.22), rgba(255, 255, 255, 0.035)) !important;
  box-shadow: 0 12px 28px rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.11);
  font-size: 0.96rem;
}

.playlist-secondary-actions .playlist-content-launch-btn {
  min-width: 148px;
  justify-content: center;
}

.playlist-content-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.playlist-content-modal-actions-bottom {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-content-modal-status {
  min-height: 18px;
  margin: 4px 0 8px;
  color: rgba(255, 244, 225, 0.72);
  font-size: 0.86rem;
  font-weight: 800;
}

.playlist-content-modal-status.is-pending,
.playlist-content-modal-status.is-saving {
  color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.92);
}

.playlist-content-modal-status.is-error {
  color: #ffb4a8;
}

.playlist-content-search-shell {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.playlist-content-search-field {
  margin: 0;
}

.playlist-content-filter-field {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}

.playlist-content-search-field span,
.playlist-content-filter-field span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 247, 236, 0.66);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playlist-content-search-results {
  display: grid;
  gap: 6px;
  max-height: min(30vh, 300px);
  overflow: auto;
}

.playlist-content-search-empty {
  padding: 8px 10px;
  color: rgba(255, 244, 225, 0.62);
  font-size: 0.84rem;
  font-weight: 800;
}

.playlist-content-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.playlist-content-search-row:not(:disabled):hover {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.34);
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.09);
}

.playlist-content-search-row:disabled {
  cursor: default;
  opacity: 0.7;
}

.playlist-content-search-row.is-in-playlist {
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.07);
}

.playlist-content-search-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.playlist-content-search-copy strong {
  overflow: hidden;
  color: #fff7ec;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-content-search-copy small {
  color: rgba(241, 233, 221, 0.62);
}

.playlist-content-search-action {
  min-width: 72px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.16);
  color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.96);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.playlist-content-list {
  display: grid;
  gap: 7px;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 3px;
}

.playlist-content-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.playlist-content-row.is-selected {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.35);
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.12), rgba(255, 255, 255, 0.035));
}

.playlist-content-row.is-deselected {
  opacity: 0.58;
}

.playlist-content-row:disabled {
  cursor: default;
}

.playlist-content-index {
  color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.86);
  font-weight: 900;
  text-align: center;
}

.playlist-content-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.playlist-content-copy strong {
  color: #fff7ec;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
  padding: 1px 7px 2px;
  border-radius: 8px;
}

.playlist-content-row.is-selected .playlist-content-copy strong {
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.24);
  box-shadow: inset 0 -2px 0 rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.62);
}

.playlist-content-row.is-deselected .playlist-content-copy strong {
  color: rgba(255, 247, 236, 0.58);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.playlist-content-copy small {
  color: rgba(241, 233, 221, 0.62);
}

.playlist-content-row-state {
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 244, 225, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.playlist-content-row.is-selected .playlist-content-row-state {
  color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.92);
}

.playlist-content-row.is-deselected .playlist-content-row-state {
  color: #ffb4a8;
}

.playlist-notes-modal-content {
  max-height: min(58vh, 520px);
  overflow: auto;
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 247, 236, 0.88);
  white-space: pre-wrap;
  font: 0.92rem/1.45 "Roboto Mono", monospace;
}

.playlist-notes-modal-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  outline: none;
}

.playlist-notes-modal-textarea:focus {
  border-color: rgba(var(--songbook-accent-rgb), 0.38);
  box-shadow: 0 0 0 2px rgba(var(--songbook-accent-rgb), 0.12);
}

.playlist-create-modal-actions .playlist-modal-action-btn {
  width: auto;
  min-width: 132px;
  max-width: 220px;
  flex: 0 0 auto;
  justify-content: center;
}

.playlist-workspace-modern .playlist-current-shell,
.playlist-workspace-modern .playlist-autosync-shell {
  margin-bottom: 12px;
}

.playlist-workspace-modern .playlist-autosync-shell .tv-card-actions {
  margin-left: auto;
}

.playlist-content-summary-shell {
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(22, 22, 22, 0.96));
}

.playlist-content-summary-shell > .tv-card-header {
  padding: 12px 16px 8px;
  margin-bottom: 0;
}

.playlist-content-summary-pills {
  padding: 0 16px 14px;
}

.playlist-secondary-actions {
  padding-top: 2px;
}

.playlist-secondary-actions .setlist-mode-launch-btn {
  min-width: 148px;
  justify-content: center;
}

.playlist-autosync-note {
  margin: 0;
  color: rgba(241, 233, 221, 0.72);
  font-size: 0.88rem;
  line-height: 1.45;
}

.playlist-autosync-token-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
}

.playlist-autosync-token-label {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.6);
}

.playlist-autosync-token {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff3dc;
  font-size: 0.82rem;
  font-weight: 700;
}

.playlist-autosync-summary-modern {
  display: block;
  padding: 0;
}

.playlist-autosync-explainer {
  display: grid;
  gap: 14px;
  width: 100%;
}

.playlist-autosync-explainer-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(255, 191, 71, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.035);
}

.playlist-autosync-explainer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.playlist-autosync-explainer-head strong {
  color: #fff3dc;
  font-size: 0.92rem;
}

.playlist-autosync-explainer-head span {
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playlist-autosync-rule-list {
  display: grid;
  gap: 8px;
}

.playlist-autosync-rule-line {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.12);
}

.playlist-autosync-rule-connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 191, 71, 0.1);
  color: #ffd58f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.playlist-autosync-rule-text {
  color: rgba(255, 247, 236, 0.9);
  font-size: 0.9rem;
  line-height: 1.35;
}

.playlist-autosync-rule-help {
  margin: 0;
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.82rem;
  line-height: 1.45;
}

.playlist-autosync-source-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.13);
  overflow: hidden;
}

.playlist-autosync-source-card.is-autosync {
  border-color: rgba(116, 214, 168, 0.16);
}

.playlist-autosync-source-card.is-manual {
  border-color: rgba(255, 191, 71, 0.18);
}

.playlist-autosync-source-card.is-removed {
  border-color: rgba(255, 115, 115, 0.16);
}

.playlist-autosync-source-card-head,
.playlist-autosync-source-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}

.playlist-autosync-source-card summary {
  cursor: pointer;
  list-style: none;
}

.playlist-autosync-source-card summary::-webkit-details-marker {
  display: none;
}

.playlist-autosync-source-card-head strong,
.playlist-autosync-source-card summary strong {
  color: #fff6e8;
  font-size: 0.88rem;
}

.playlist-autosync-source-card-head span,
.playlist-autosync-source-card summary em {
  color: rgba(241, 233, 221, 0.7);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.playlist-autosync-source-card summary > span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.playlist-autosync-source-card summary small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.72rem;
  font-weight: 700;
}

.playlist-autosync-source-card summary small span {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-autosync-source-card p {
  margin: -2px 12px 12px;
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.8rem;
  line-height: 1.4;
}

.playlist-autosync-source-card ol {
  display: grid;
  gap: 5px;
  max-height: 260px;
  margin: 0;
  padding: 0 12px 12px 34px;
  overflow: auto;
  color: rgba(255, 247, 236, 0.82);
  font-size: 0.82rem;
}

.playlist-library-modal-content-modern .playlist-library-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.playlist-library-modal-content-modern .playlist-library-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff7ec;
  text-align: left;
}

.playlist-library-modal-content-modern .playlist-library-item.active,
.playlist-library-modal-content-modern .playlist-library-item:hover {
  border-color: rgba(255, 191, 71, 0.22);
  background: rgba(255, 191, 71, 0.08);
}

.playlist-project-links-modal {
  display: grid;
  gap: 10px;
}

.playlist-autosync-modal-modern {
  width: min(1120px, calc(100vw - 28px));
}

.playlist-autosync-editor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.playlist-autosync-modal-modern .auto-sync-row {
  margin: 0;
  display: grid;
  grid-template-columns: 108px 158px 168px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.playlist-autosync-connector-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 198, 110, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.playlist-autosync-modal-modern .auto-sync-row select,
.playlist-autosync-modal-modern .auto-sync-row input {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.7);
  color: #f4f1eb;
  font-size: 0.86rem;
}

.playlist-autosync-resource-picker {
  position: relative;
  min-width: 0;
}

.playlist-autosync-resource-options {
  position: absolute;
  z-index: 1008;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(280px, 42vh);
  overflow: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 24, 24, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.playlist-autosync-resource-options[hidden] {
  display: none;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-resource-option {
  width: 100%;
  min-height: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 10px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
}

.playlist-autosync-resource-option strong {
  color: #fff6e8;
  font-size: 0.86rem;
}

.playlist-autosync-resource-option span,
.playlist-autosync-resource-empty {
  color: rgba(255, 247, 236, 0.66);
  font-size: 0.75rem;
  font-weight: 700;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-resource-option:hover,
.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-resource-option.is-selected {
  border-color: rgba(255, 181, 33, 0.3);
  background: rgba(255, 181, 33, 0.1);
}

.playlist-autosync-modal-modern .auto-sync-row button {
  min-height: 40px;
  margin: 0;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 181, 33, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: #fff3dc;
  font-size: 0.8rem;
  font-weight: 700;
}

.playlist-autosync-modal-modern .auto-sync-row button:hover {
  background: rgba(255, 181, 33, 0.08);
  border-color: rgba(255, 181, 33, 0.28);
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-connector,
.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-connector-placeholder {
  order: 1;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-column {
  order: 2;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-operator {
  order: 3;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-value-control,
.playlist-autosync-modal-modern .auto-sync-row > .playlist-autosync-value {
  order: 4;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-remove {
  order: 5;
}

.playlist-autosync-modal-modern .auto-sync-row.is-membership-rule .playlist-autosync-operator {
  order: 2;
}

.playlist-autosync-modal-modern .auto-sync-row.is-membership-rule .playlist-autosync-column {
  order: 3;
}

.playlist-autosync-source-choice {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-autosync-source-choice.has-value {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.36) !important;
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.11) !important;
}

.playlist-rule-source-picker-modal-content {
  width: min(980px, calc(100vw - 28px));
}

.playlist-rule-source-picker-item.active {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.55);
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.12);
}

.playlist-autosync-actions {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-autosync-import-shell {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.playlist-autosync-import-head {
  margin-bottom: 10px;
}

.playlist-manual-import-summary {
  margin-top: 12px;
  color: rgba(241, 233, 221, 0.72);
  font-size: 0.84rem;
}

.playlist-autosync-top-actions,
.playlist-autosync-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.playlist-autosync-row-actions {
  justify-content: flex-start;
  margin-top: -4px;
}

.playlist-manual-import-options {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: 280px;
  overflow: auto;
  padding-right: 2px;
}

.playlist-manual-import-option {
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.playlist-manual-import-option.is-selected {
  border-color: rgba(255, 191, 71, 0.26);
  background: rgba(255, 191, 71, 0.08);
}

.playlist-manual-import-option input[type="checkbox"] {
  margin-top: 3px;
}

.playlist-manual-import-option span {
  display: block;
  margin-top: 4px;
}

.playlist-manual-import-meta {
  color: rgba(241, 233, 221, 0.64);
}

.playlist-autosync-import-actions {
  margin-top: 14px;
  justify-content: flex-end;
}

.playlist-workspace-modern .playlist-rule-chip {
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.playlist-workspace-modern .playlist-rule-chip em {
  color: #ffd58f;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 900px) {
  .setlist-current-header-card {
    display: flex;
  }

  .setlist-inline-hints {
    justify-content: flex-start;
  }

  .setlist-song-card {
    grid-template-columns: 36px 26px minmax(0, 1fr) auto;
  }

  .setlist-song-actions {
    justify-content: flex-end;
  }

  .setlist-current-shell > .tv-card-header {
    align-items: center;
  }

  .playlist-loader-shell > .tv-card-header,
  .playlist-current-shell > .tv-card-header,
  .playlist-autosync-shell > .tv-card-header,
  .playlist-danger-shell > .tv-card-header {
    padding: 16px 16px 10px;
    gap: 10px;
    flex-wrap: wrap;
  }

  #setlist-permissions-launch,
  #setlist-tags-launch,
  #playlist-permissions-launch,
  #playlist-tags-launch {
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  .setlist-library-panel .playlist-library-item,
  .setlist-library-modal-content .playlist-library-item,
  .playlist-library-modal-content-modern .playlist-library-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: flex-start;
  }

  .playlist-library-mainline-count {
    justify-self: start;
  }

  .playlist-library-launch {
    width: calc(100% - 32px);
    margin: 0 16px 16px;
  }

  .playlist-current-meta-grid {
    grid-template-columns: 1fr;
  }

  .playlist-current-info,
  .playlist-inline-hints-modern,
  .playlist-tags-row,
  .playlist-autosync-body {
    padding-left: 16px;
    padding-right: 16px;
  }

  .playlist-autosync-modal-modern .auto-sync-row,
  .playlist-autosync-modal-modern .auto-sync-row.is-first {
    grid-template-columns: 1fr;
  }

  .playlist-autosync-modal-modern .auto-sync-row button {
    width: 100%;
    justify-content: center;
  }

  .playlist-autosync-rule-line,
  .playlist-autosync-source-card-head,
  .playlist-autosync-source-card summary {
    grid-template-columns: 1fr;
  }

  .playlist-create-modal-actions,
  .playlist-autosync-import-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .playlist-manual-import-options {
    max-height: 220px;
  }
}

@media (max-width: 680px) {
  .setlist-song-card {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
  }

  .setlist-song-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .setlist-song-card {
    grid-template-columns: 32px 20px minmax(0, 1fr);
    gap: 6px;
    padding: 8px 9px;
    border-radius: 12px;
  }

  .setlist-song-list {
    padding: 0 12px 14px;
  }

  .setlist-song-main {
    align-items: flex-start;
    gap: 8px;
  }

  .setlist-song-mainline {
    gap: 4px;
  }

  .setlist-song-title {
    font-size: 0.88rem;
  }

  .setlist-song-copy strong,
  .setlist-song-request-chip,
  .setlist-song-meta-chip {
    white-space: normal;
  }

  .setlist-song-meta-row,
  .setlist-song-request-row {
    gap: 4px;
    align-items: flex-start;
  }

  .setlist-song-actions {
    gap: 4px;
    width: 100%;
    justify-content: space-between;
  }

  .setlist-song-meta {
    gap: 4px;
    font-size: 0.72rem;
  }
}

/* Books tablet deck */
.bookpage-deck-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}

.bookpage-deck-sort-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.bookpage-deck-sort-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.6);
}

.bookpage-deck-sort-select {
  min-width: 156px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(17, 17, 17, 0.72);
  color: #f4f1eb;
}

.bookpage-deck-sort-direction {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
}

.bookpage-deck-genre-panel {
  display: grid;
  gap: 10px;
  margin: -2px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(35, 35, 38, 0.98), rgba(22, 22, 24, 0.96));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.bookpage-deck-genre-panel.hidden {
  display: none !important;
}

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

.bookpage-deck-genre-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.64);
}

.bookpage-deck-genre-reset {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.76rem;
}

.bookpage-deck-genre-reset[disabled] {
  opacity: 0.42;
  cursor: default;
}

.bookpage-deck-genre-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bookpage-deck-genre-chip {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f4f1eb;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.bookpage-deck-genre-chip:hover {
  border-color: rgba(255, 191, 71, 0.3);
  background: rgba(255, 191, 71, 0.08);
}

.bookpage-deck-genre-chip.is-active {
  border-color: rgba(255, 191, 71, 0.62);
  background: rgba(255, 191, 71, 0.16);
  color: #fff1d4;
}

#bookpage-deck-container.bookpage-deck {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0;
}

.bookpage-deck-viewport {
  position: relative;
  width: 100%;
  min-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  overflow-anchor: none;
  transform: translateZ(0);
}

.bookpage-deck-viewport.hidden {
  display: none !important;
}

.book-deck-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  width: 100%;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(36, 36, 39, 0.98), rgba(24, 24, 27, 0.96));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.bookpage-deck .onair-card.book-deck-card:hover,
.bookpage-deck .onair-card.book-deck-card:active,
.bookpage-deck .onair-card.book-deck-card:focus-within {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.book-deck-line-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #fff7ec;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.book-deck-line-main:hover {
  color: #ffd58f;
}

.book-deck-line-meta {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  color: rgba(241, 233, 221, 0.72);
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-deck-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.book-deck-actions .sp-btn {
  min-width: 30px;
  min-height: 30px;
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sp-btn.bookpage-playlist-plus-btn {
  min-width: 30px !important;
  width: 30px !important;
  padding: 0 !important;
  letter-spacing: -0.04em;
  font-size: 0.72rem !important;
}

.book-playlist-plus-modal-content {
  width: min(720px, calc(100vw - 24px));
  max-height: min(92vh, 900px);
  overflow: auto;
  display: grid;
  gap: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(22, 22, 22, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.book-playlist-plus-modal-content .tv-card-action-muted {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 247, 236, 0.72);
}

.book-playlist-plus-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.book-playlist-plus-actions-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.book-playlist-plus-status {
  min-height: 20px;
  margin: 10px 0;
  color: rgba(255, 244, 225, 0.78);
  font-size: 0.9rem;
}

.book-playlist-plus-status.is-error {
  color: #ffb4a8;
}

.book-playlist-plus-list {
  display: grid;
  gap: 8px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 2px;
}

.book-playlist-plus-section {
  margin: 10px 0 1px;
  color: rgba(255, 244, 225, 0.72);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-playlist-plus-section:first-child {
  margin-top: 0;
}

.book-playlist-plus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 11px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.book-playlist-plus-row.is-active {
  border-color: rgba(var(--songbook-accent-rgb), 0.44);
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb), .16), rgba(255,255,255,.03));
}

.book-playlist-plus-row.is-changed {
  box-shadow: inset 3px 0 0 var(--accent-color, #ffb224);
}

.book-playlist-plus-row.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.book-playlist-plus-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.book-playlist-plus-copy strong,
.book-playlist-plus-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-playlist-plus-copy small,
.book-playlist-plus-change {
  color: rgba(255, 244, 225, 0.68);
  font-size: 0.78rem;
}

.book-deck-action-edit {
  min-width: 46px !important;
  width: auto !important;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem !important;
}

.book-song-modal-content {
  width: min(1080px, calc(100vw - 24px));
  max-height: min(92vh, 980px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(22, 22, 22, 0.97));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.song-info-page-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.song-info-page-hero {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(40, 40, 40, 0.98), rgba(22, 22, 22, 0.97));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.song-info-page-hero > .tv-card-header {
  margin-bottom: 0;
  padding: 12px 14px 9px;
}

.book-song-modal-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 14px;
}

.song-info-page-body {
  padding: 0;
}

@media (max-width: 900px) {
  .bookpage-deck-header-row {
    align-items: flex-start;
  }

  .bookpage-deck-sort-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .bookpage-deck-genre-panel {
    padding: 10px 12px;
  }
}

.book-song-modal-section {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(35, 35, 35, 0.98), rgba(23, 23, 23, 0.95));
}

.book-song-modal-section > .tv-card-header {
  padding: 12px 14px 8px;
  margin-bottom: 0;
}

.book-song-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.book-song-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.book-song-modal-field.is-wide {
  grid-column: 1 / -1;
}

.book-song-modal-field-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.book-song-modal-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 233, 221, 0.6);
}

.book-song-modal-field-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.book-song-modal-field-actions .tv-card-action {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.76rem;
}

.song-info-field-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(241, 233, 221, 0.62);
  background: rgba(255, 255, 255, 0.04);
}

.song-info-field-status:empty {
  display: none;
}

.song-info-field-status.is-saving {
  color: #ffe0a8;
  background: rgba(255, 191, 71, 0.14);
}

.song-info-field-status.is-saved {
  color: #c6ffd9;
  background: rgba(72, 194, 124, 0.16);
}

.song-info-field-status.is-error {
  color: #ffcbc6;
  background: rgba(186, 68, 68, 0.18);
}

.book-song-modal-value {
  min-height: 22px;
  color: #fff7ec;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.book-song-modal-link-text {
  color: #fff7ec;
}

.book-song-modal-editor {
  width: 100%;
  min-height: 38px;
}

.book-song-modal-editor.is-live {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.42);
  color: #fff7ec;
}

.book-song-modal-editor.is-multiline {
  min-height: 88px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.book-song-modal-readonly {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.book-song-modal-danger {
  border-color: rgba(255, 128, 128, 0.16);
}

.book-song-modal-danger-body {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 18px;
}

.tv-card-action-danger {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 138, 128, 0.26);
  background: rgba(140, 36, 36, 0.14);
  color: #ffb7b1;
}

.tv-card-action-danger:hover {
  background: rgba(140, 36, 36, 0.22);
}

@media (max-width: 980px) {
  .bookpage-deck-header-row {
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
  }

  .bookpage-deck-sort-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .bookpage-deck-sort-select {
    flex: 1 1 180px;
    min-height: 32px;
    font-size: 0.8rem;
  }

  .bookpage-deck-sort-direction {
    min-width: 32px;
    min-height: 32px;
  }

  .bookpage-deck-sort-label {
    font-size: 0.68rem;
  }

  .book-song-modal-grid {
    grid-template-columns: 1fr;
  }

  .book-song-modal-content {
    width: min(100vw - 18px, 1080px);
  }

  .song-info-page-hero > .tv-card-header,
  .book-song-modal-body {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 560px) {
  .playlist-library-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .playlist-library-quick-create {
    width: 100%;
    justify-self: stretch;
  }

  .bookpage_style-body {
    padding: 8px;
  }

  .bookpage_style-scroll-container {
    padding: 6px;
    border-radius: 12px;
  }

  .bookpage-deck-viewport {
    padding-right: 0;
  }

  #bookpage-deck-container.bookpage-deck {
    gap: 6px;
  }

  .book-deck-card,
  .deck-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
    padding: 10px 9px;
  }

  .book-deck-line-main {
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.92rem;
  }

  .book-deck-line-meta {
    grid-column: 1;
    grid-row: 2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .book-deck-actions,
  .deck-actions {
    position: static;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }

  .book-deck-actions .sp-btn,
  .deck-card .sp-btn {
    min-width: 32px;
    min-height: 32px;
    width: auto;
    height: 32px;
    padding: 0 10px;
  }
}

/* DEV 2026-04-10: project toggle, requests refresh, song info compaction, tab edit cleanup */
.project-toggle-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
}

.project-toggle-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #ffb54a;
}

.project-toggle-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-toggle-copy strong {
  font-size: 0.95rem;
  color: #fff7ea;
}

.project-toggle-copy small {
  color: rgba(241, 233, 221, 0.7);
  line-height: 1.45;
}

.requests-page-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.requests-shell-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(50, 50, 54, 0.94), rgba(28, 28, 32, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  padding: 14px 16px;
}

.requests-tabs-shell {
  padding-bottom: 10px;
}

.requests-playlist-tabs {
  margin: 0;
}

.requests-card-header {
  margin-bottom: 4px;
}

.requests-toolbar {
  margin-bottom: 0;
}

.requests-tab-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.requests-tab-panel {
  padding: 16px;
}

.requests-streams-grid {
  gap: 12px;
}

.requests-streams-grid-participation {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.requests-stream-played {
  grid-column: 1 / -1;
}

.requests-stream {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}

.requests-stream-stack {
  display: grid;
  gap: 18px;
}

.requests-stream-shell {
  padding: 14px;
}

.requests_stream_title {
  margin: 0 0 10px;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 214, 152, 0.82);
}

.requests-card-modern {
  margin-bottom: 8px;
  padding: 12px 13px 11px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  ),
  linear-gradient(
    180deg,
    rgba(255, 185, 79, var(--request-demand-strength, 0.04)),
    rgba(0, 0, 0, calc(0.08 + var(--request-demand-strength, 0.04)))
  );
}

.requests-card-modern:last-child {
  margin-bottom: 0;
}

.requests-card-modern.is-played {
  opacity: 0.78;
}

.requests-card .req-line {
  margin: 3px 0;
  line-height: 1.35;
}

.requests-card .req-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffe5b7;
  cursor: pointer;
}

.requests-card .req-user {
  color: #ffb95b;
  font-weight: 700;
}

.requests-card .req-msg {
  color: rgba(241, 233, 221, 0.78);
}

.requests-card .req-date {
  color: rgba(241, 233, 221, 0.56);
}

.requests-card .request-actions {
  align-items: center;
  gap: 10px;
}

.requests-card .request-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}

.requests-footer-actions {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.requests-session-banner {
  display: grid;
  gap: 4px;
  border-color: rgba(255, 185, 79, 0.2);
  background: linear-gradient(180deg, rgba(255, 185, 79, 0.08), rgba(255, 255, 255, 0.025));
}

.requests-session-banner strong {
  color: #ffd08a;
  font-size: 1.05rem;
}

.requests-session-banner span:last-child {
  color: rgba(255, 247, 234, 0.68);
  font-size: 0.88rem;
}

.requests-session-modal-content {
  display: grid;
  gap: 14px;
}

.requests-session-name-input,
.requests-session-search {
  width: 100%;
}

.requests-session-list {
  max-height: min(58vh, 520px);
  overflow: auto;
}

.requests-session-item[hidden] {
  display: none;
}

.requests-sort-controls {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.requests-sort-btn.active {
  background: linear-gradient(135deg, #ffb94f, #ff8d22);
  color: #111;
  border-color: rgba(255,185,79,.42);
}

.requests-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.requests-group-card {
  position: relative;
}

.requests-card-badge-multi {
  background: rgba(255, 255, 255, 0.08);
  color: #fff7ea;
}

.requests-card-badge-votes {
  background: linear-gradient(135deg, rgba(255,185,79,.24), rgba(255,141,34,.12));
  color: #ffe2ad;
  border: 1px solid rgba(255, 185, 79, 0.28);
  font-weight: 800;
}

.request-card-footer-actions {
  margin-top: 9px;
  display: flex;
  justify-content: flex-end;
}

.request-add-setlist-btn {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.req-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(241, 233, 221, 0.6);
  font-size: 0.86rem;
}

.requests-group-details {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.req-detail-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.req-detail-row.is-extra-detail {
  display: none;
}

.requests-group-card.is-details-expanded .req-detail-row.is-extra-detail {
  display: grid;
}

.req-detail-head {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.req-mode-chip {
  color: rgba(241, 233, 221, 0.54);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: none;
}

.req-extra {
  justify-self: start;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(241, 233, 221, 0.72);
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.req-extra:hover {
  border-color: rgba(var(--songbook-accent-rgb), 0.3);
  background: rgba(var(--songbook-accent-rgb), 0.08);
  color: color-mix(in srgb, var(--songbook-accent) 74%, #fff 26%);
}

.requests-toolbar-compact {
  align-items: center;
  padding: 8px 10px;
}

.requests-picker-dropdown {
  min-width: min(310px, 100%);
}

.requests-source-current {
  min-height: 36px;
  padding: 6px 9px;
}

.requests-sort-controls {
  align-items: center;
}

.requests-sort-btn {
  min-height: 32px;
  padding: 5px 10px;
}

.requests-tabs-shell {
  padding: 8px 10px;
}

.requests-playlist-tabs {
  gap: 7px;
}

.requests-playlist-tab {
  height: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 11px;
  font-size: 0.82rem;
}

.requests-tab-count {
  min-width: 20px;
  height: 20px;
  font-size: 0.72rem;
}

.requests-tab-panel {
  padding: 10px;
}

.requests-stream:not(.requests-stream-played) {
  padding: 0;
  border: 0;
  background: transparent;
}

.requests-stream:not(.requests-stream-played) .requests_stream_title {
  margin-left: 2px;
}

.requests-stream-played-shell {
  margin-top: 20px;
}

.requests-streams-grid,
.requests-streams-grid-participation,
.requests-streams-grid-single {
  grid-template-columns: 1fr;
}

.requests-stream-played {
  grid-column: auto;
}

.requests-card-modern {
  padding: 9px 10px;
}

.requests-card-modern.request-vote-strength-medium,
.requests-card-modern.request-vote-strength-high,
.requests-card-modern.request-vote-strength-huge {
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

.requests-card .req-line {
  margin: 2px 0;
  line-height: 1.24;
}

.requests-card .req-title {
  font-size: 0.92rem;
}

.req-title-button {
  width: fit-content;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.req-title-display {
  width: fit-content;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  cursor: default;
}

.req-user-comment-btn {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.18em;
}

.req-user-comment-btn::after {
  content: " msg";
  margin-left: 3px;
  color: rgba(255, 244, 220, 0.52);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.requests-card-badge-requester,
.req-requester-id {
  color: color-mix(in srgb, var(--songbook-accent) 72%, #fff 28%);
  border-color: rgba(var(--songbook-accent-rgb), 0.24);
  background: rgba(var(--songbook-accent-rgb), 0.1);
}

.requests-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.request-card-footer-actions {
  gap: 7px;
  flex-wrap: wrap;
}

.request-card-footer-actions-top {
  margin-top: 0;
  flex: 0 0 auto;
  align-items: center;
}

.request-action-btn,
.request-add-setlist-btn {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

.req-playlist-source {
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.78rem;
}

.request-like-badge {
  margin-left: 2px;
}

.requests-group-details {
  gap: 3px;
}

.req-detail-row {
  grid-template-columns: 1fr;
  align-items: start;
  gap: 2px;
  min-height: 0;
  padding: 5px 7px;
}

.req-detail-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.req-requester-inline {
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.72rem;
  font-weight: 700;
}

.req-comment-preview {
  justify-self: stretch;
  max-width: 100%;
  border: 0;
  padding: 0 28px 0 0;
  background: transparent;
  color: rgba(241, 233, 221, 0.78);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.req-comment-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-comment-preview.is-expanded {
  padding-right: 28px;
}

.req-comment-preview.is-expanded .req-comment-text {
  white-space: pre-wrap;
  overflow: visible;
}

.req-comment-cue::after {
  content: "⌄";
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--songbook-accent-rgb), 0.22);
  color: color-mix(in srgb, var(--songbook-accent) 76%, #fff 24%);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
}

.req-comment-preview.is-expanded .req-comment-cue::after {
  content: "⌃";
}

.requests-group-card.is-card-expanded {
  border-color: rgba(var(--songbook-accent-rgb), 0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.026)),
    linear-gradient(180deg, rgba(var(--songbook-accent-rgb), 0.11), rgba(0,0,0,0.18));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.requests-requester-group {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(var(--songbook-accent-rgb), 0.18);
  background: rgba(var(--songbook-accent-rgb), 0.045);
}

.requests-requester-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: color-mix(in srgb, var(--songbook-accent) 72%, #fff 28%);
  font-size: 0.82rem;
}

.requests-requester-group-list {
  display: grid;
  gap: 7px;
}

.requests-requester-originals {
  display: none !important;
}

.requests-requester-card {
  display: block;
}

.requests-requester-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.requests-requester-card-head strong {
  color: color-mix(in srgb, var(--songbook-accent) 72%, #fff 28%);
  font-size: .96rem;
  font-weight: 950;
}

.requests-requester-card-head span {
  color: rgba(255,247,234,.58);
  font-size: .72rem;
  font-weight: 800;
}

.requests-requester-song-list {
  display: grid;
  gap: 4px;
}

.requests-requester-song-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  padding: 4px 5px;
  min-width: 0;
}

.requests-requester-song-row .req-detail-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.requests-requester-song-title {
  color: #fff2d6;
  font-weight: 700;
}

.requests-requester-song-list .req-detail-head,
.requests-requester-song-list .req-user,
.requests-requester-song-list .req-user-comment-btn,
.requests-requester-song-list .req-requester-inline {
  min-width: 0;
  max-width: 100%;
}

.requests-requester-song-list .req-user,
.requests-requester-song-list .req-user-comment-btn {
  overflow-wrap: anywhere;
  white-space: normal;
}

.requests-requester-song-row .req-comment-preview {
  grid-column: 1 / -1;
}

.requester-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
}

.requests-requester-song-list .req-detail-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.requests-requester-song-list .req-comment-preview {
  grid-column: 1 / -1;
}

.requests-card-modal,
.requests-comment-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.64);
  z-index: 2500;
}

.requests-card-modal-content,
.requests-comment-modal-content {
  width: min(720px, calc(100vw - 24px));
  max-height: min(86vh, 760px);
  overflow: auto;
  border-radius: 20px;
  border: 1px solid rgba(var(--songbook-accent-rgb), 0.2);
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(20, 20, 20, 0.98));
  color: #fff7ec;
  padding: 14px;
}

.requests-card-modal-close {
  float: right;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff7ec;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.requests-card-modal-card {
  margin: 42px 0 0;
}

.requests-comment-modal-content {
  width: min(520px, calc(100vw - 24px));
}

.requests-comment-modal-content h3 {
  margin: 0 42px 4px 0;
  color: #fff2d6;
}

.requests-comment-modal-meta {
  margin: 0 0 14px;
  color: rgba(255, 244, 220, 0.62);
  font-size: 0.82rem;
  font-weight: 700;
}

.requests-comment-modal-text {
  white-space: pre-wrap;
  color: rgba(255, 247, 234, 0.88);
  line-height: 1.5;
}

.book-song-modal-content {
  width: min(1020px, calc(100vw - 18px));
  max-height: min(92vh, 940px);
  border-radius: 16px;
}

.song-info-page-shell {
  gap: 5px;
}

.song-info-page-hero,
.book-song-modal-section {
  border-radius: 14px;
}

.song-info-page-hero > .tv-card-header,
.book-song-modal-section > .tv-card-header {
  padding: 7px 9px 5px;
}

.book-song-modal-body {
  gap: 5px;
  padding: 0 8px 8px;
}

.book-song-modal-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px;
  padding: 0 8px 8px;
}

.book-song-modal-field {
  display: grid;
  grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 9px;
}

.book-song-modal-label {
  font-size: 0.61rem;
  letter-spacing: 0.09em;
}

.book-song-modal-field-header {
  align-items: center;
  min-width: 0;
}

.book-song-modal-field-actions {
  gap: 4px;
}

.book-song-modal-field-actions .tv-card-action {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.68rem;
}

.song-info-field-status {
  min-height: 18px;
  padding: 0 5px;
  font-size: 0.64rem;
}

.book-song-modal-editor {
  min-height: 29px;
  padding: 5px 8px;
  font-size: 0.86rem;
}

.book-song-modal-editor.is-multiline {
  min-height: 56px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.book-song-modal-readonly {
  padding: 5px 7px;
  border-radius: 9px;
}

.book-song-modal-value {
  min-height: 16px;
  font-size: 0.86rem;
  line-height: 1.28;
}

.book-song-modal-danger-body {
  padding: 0 8px 8px;
}

.account-page-shell {
  width: 100%;
  display: grid;
  gap: 12px;
}

[data-account-tab-panel][hidden] {
  display: none !important;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.account-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-toolbar-save-btn.is-dirty {
  border-color: rgba(var(--songbook-accent-rgb), 0.64);
  box-shadow: 0 10px 24px rgba(var(--songbook-accent-rgb), 0.14);
}

.account-tab-btn {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 247, 236, 0.76);
  font-weight: 800;
  cursor: pointer;
}

.account-tab-btn.is-active {
  color: #17130e;
  border-color: rgba(var(--songbook-accent-rgb), 0.62);
  background: linear-gradient(135deg, var(--songbook-accent), var(--songbook-accent-strong));
  box-shadow: 0 12px 28px rgba(var(--songbook-accent-rgb), 0.18);
}

.account-profile-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.account-profile-list {
  display: grid;
  gap: 6px;
}

.account-profile-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.account-profile-row span {
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-profile-row strong {
  color: #fff7ec;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.account-profile-note {
  margin: 0;
  color: rgba(241, 233, 221, 0.66);
  font-size: 0.84rem;
  line-height: 1.42;
}

.account-offline-card {
  margin-top: 12px;
}

.account-offline-auto-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 12px 0 4px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 247, 236, 0.82);
  font-size: 0.82rem;
}

.account-offline-auto-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #69d98b;
  box-shadow: 0 0 0 5px rgba(105, 217, 139, 0.12), 0 0 10px rgba(105, 217, 139, 0.5);
}

.account-offline-auto-status.is-offline .account-offline-auto-dot {
  background: #050505;
  border: 2px solid #69d98b;
  box-shadow: 0 0 0 5px rgba(105, 217, 139, 0.14), 0 0 10px rgba(105, 217, 139, 0.42);
}

.account-offline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: rgba(255, 247, 236, 0.86);
  font-size: 0.88rem;
}

.account-offline-toggle input {
  accent-color: var(--accent-color, #f0b35b);
}

button.topbar-mode-toggle {
  cursor: pointer;
  font: inherit;
}

button.topbar-mode-toggle:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.account-offline-summary {
  display: grid;
  gap: 5px;
  color: rgba(241, 233, 221, 0.68);
  font-size: 0.8rem;
  line-height: 1.35;
}

.account-offline-summary strong {
  color: #fff7ec;
}

.offline-reader-shell {
  display: grid;
  gap: 14px;
  width: min(920px, 100%);
  margin: 0 auto;
}

.offline-reader-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.offline-reader-card,
.offline-reader-song-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.025));
  color: #fff7ec;
  border-radius: 14px;
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}

.offline-reader-card:hover,
.offline-reader-song-row:hover {
  border-color: rgba(var(--accent-rgb, 240, 179, 91), 0.32);
}

.offline-reader-card strong,
.offline-reader-song-row strong {
  display: block;
  font-size: 0.95rem;
}

.offline-reader-card span,
.offline-reader-song-row span {
  display: block;
  margin-top: 3px;
  color: rgba(241, 233, 221, 0.62);
  font-size: 0.78rem;
}

.offline-reader-list {
  display: grid;
  gap: 8px;
}

.songbook-about-modal-content {
  width: min(460px, calc(100vw - 28px));
}

.admin-users-modal-content {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(92vh, 1040px);
}

.standalone-auth-shell {
  min-height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  padding: 18px;
}

.admin-page-shell {
  width: 100%;
}

.admin-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-bomb-button {
  justify-self: start;
}

.admin-users-list {
  display: grid;
  gap: 10px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding-right: 4px;
}

.admin-users-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-create-user-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.3fr) minmax(160px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(251, 191, 36, 0.38);
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.08);
}

.admin-create-user-form.playlist-hidden {
  display: none;
}

.admin-create-user-form label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted-text, #667085);
}

.admin-create-user-form input {
  min-width: 0;
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(180px, 1.4fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35));
  border-radius: 12px;
  background: var(--card-bg, rgba(255, 255, 255, 0.72));
}

.admin-user-row label {
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted-text, #667085);
}

.admin-user-row input {
  min-width: 0;
}

@media (max-width: 760px) {
  .admin-users-modal-content {
    width: calc(100vw - 16px);
    max-height: 94vh;
  }

  .admin-create-user-form,
  .admin-user-row {
    grid-template-columns: 1fr;
  }
}

.song-form-shell {
  width: 100%;
}

.song-form-card {
  display: grid;
  gap: 10px;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(37, 37, 39, 0.98), rgba(20, 20, 21, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.song-form-card > .tv-card-header {
  margin-bottom: 0;
  padding: 4px 4px 2px;
  min-height: 0;
  align-items: center;
}

.song-form-card .tv-card-heading {
  margin: 0;
  color: #fff7ec;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.05;
}

.song-form-section {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.028);
}

.song-form-section h3 {
  margin: 0 0 1px;
  color: color-mix(in srgb, var(--songbook-accent) 70%, #fff 30%);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.song-form-identity-row {
  grid-template-columns: minmax(0, 1fr);
}

.song-form-field {
  display: grid;
  grid-template-columns: minmax(142px, 0.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 34px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.song-form-field-wide {
  grid-column: 1 / -1;
}

.song-form-field span {
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.song-form-field input,
.song-form-field textarea {
  width: 100%;
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(6, 6, 7, 0.44);
  color: #fff7ec;
  padding: 5px 8px;
  font-size: 0.84rem;
  line-height: 1.25;
}

.song-form-field textarea {
  min-height: 40px;
  resize: vertical;
}

.song-form-research-row,
.song-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.song-form-research-row .btn-pages,
.song-form-actions .btn-pages,
.song-form-card > .tv-card-header .btn-pages {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
}

.requests-toolbar-compact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}

.requests-picker-dropdown {
  position: relative;
  min-width: min(360px, 100%);
}

.requests-source-current {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: #fff7ec;
  cursor: pointer;
  text-align: left;
}

.requests-source-current span:first-child {
  color: rgba(241, 233, 221, 0.58);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.requests-source-current strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requests-source-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.98), rgba(20, 20, 20, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

.requests-source-options {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}

.requests-source-option {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  color: #fff7ec;
  text-align: left;
  cursor: pointer;
}

.requests-source-option.is-active {
  border-color: rgba(255, 191, 71, 0.34);
  background: rgba(255, 191, 71, 0.09);
}

.requests-tab-panel-head-compact {
  justify-content: flex-end;
}

.requests-card-modern.request-vote-strength-medium,
.requests-card-modern.request-vote-strength-high,
.requests-card-modern.request-vote-strength-huge {
  background: linear-gradient(180deg, rgba(46, 46, 46, 0.96), rgba(24, 24, 24, 0.95));
}

.requests-card-modern {
  padding: 10px 11px;
}

.requests-card-badges {
  gap: 5px;
}

.req-line.req-title {
  font-size: 0.95rem;
}

@media (max-width: 780px) {
  .requests-toolbar-compact {
    display: grid;
  }

  .requests-picker-dropdown {
    min-width: 0;
  }
}

@media (min-width: 980px) {
  .playlist-workspace .playlist-editor-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
  }

  .playlist-workspace .playlist-loader-shell,
  .playlist-workspace .playlist-current-shell,
  .playlist-workspace .setlist-current-shell {
    margin: 0;
    min-width: 0;
  }

  #playlist-empty-state,
  #manage-playlist-container,
  #setlist-empty-state,
  #manage-setlist-container {
    grid-column: 1 / -1;
  }
}

.tab-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 0 4px;
  background: linear-gradient(180deg, rgba(17,17,17,0), rgba(17,17,17,0.94) 34%);
}

@media (max-width: 820px) {
  .requests-shell-card,
  .requests-tab-panel {
    padding: 12px;
  }

  .requests-toolbar {
    align-items: stretch;
  }

  .book-song-modal-content {
    width: min(100vw - 12px, 1020px);
  }
}

@media (max-width: 560px) {
  .book-song-modal-field,
  .account-profile-row,
  .song-form-grid,
  .song-form-identity-row,
  .song-form-field,
  .req-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.account-actions-row-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Current song opens as a compact workspace page. */
.song-info-page-shell {
  width:min(1180px,100%);
  margin:0 auto;
  gap:4px;
}
.song-info-page-shell .song-info-page-hero > .tv-card-header {
  min-height:0;
  padding:6px 9px 5px;
}
.song-info-page-shell .song-info-page-hero .tv-card-kicker {
  font-size:.58rem;
  line-height:1;
}
.song-info-page-shell .song-info-page-hero .playlist-modal-title {
  margin-top:2px;
  font-size:1rem;
  line-height:1.12;
}
.song-info-page-shell .song-info-page-body {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:5px;
}
.song-info-page-shell .book-song-modal-section {
  border-radius:10px;
}
.song-info-page-shell .book-song-modal-section > .tv-card-header {
  min-height:0;
  padding:4px 7px 3px;
}
.song-info-page-shell .book-song-modal-section > .tv-card-header .tv-card-kicker {
  display:none;
}
.song-info-page-shell .book-song-modal-section > .tv-card-header .tv-card-heading {
  font-size:.74rem;
  line-height:1.1;
}
.song-info-page-shell .book-song-modal-grid {
  grid-template-columns:minmax(0,1fr) !important;
  gap:3px;
  padding:0 5px 5px;
}
.song-info-page-shell .book-song-modal-field {
  grid-template-columns:minmax(94px,.25fr) minmax(0,1fr);
  min-height:0;
  gap:4px;
  padding:3px 5px;
  border-radius:7px;
}
.song-info-page-shell .book-song-modal-field[data-song-field^="ultimate_guitar_link"] {
  grid-template-columns:minmax(170px,.42fr) minmax(0,1fr);
}
.song-info-page-shell .book-song-modal-field-header {
  min-width:0;
}
.song-info-page-shell .book-song-modal-label {
  min-width:0;
  overflow-wrap:anywhere;
}
.song-info-page-shell .book-song-modal-field-actions {
  flex:0 0 auto;
}
.song-info-page-shell .book-song-modal-editor {
  min-height:25px;
  padding:3px 6px;
  font-size:.79rem;
}
.song-info-page-shell .book-song-modal-editor.is-multiline {
  min-height:40px;
  padding-top:4px;
  padding-bottom:4px;
}
.song-info-page-shell .book-song-modal-value,
.song-info-page-shell .book-song-modal-readonly {
  min-height:14px;
  padding:3px 5px;
  font-size:.78rem;
  line-height:1.18;
}
.song-info-page-shell .book-song-modal-danger-body {
  padding:0 5px 5px;
}
.song-info-page-shell .tv-card-action-danger {
  min-height:27px;
  padding:4px 9px;
  font-size:.7rem;
}
@media (max-width:720px) {
  .song-info-page-shell .song-info-page-body { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:480px) {
  .song-info-page-shell .book-song-modal-field { grid-template-columns:minmax(78px,.32fr) minmax(0,1fr); }
  .song-info-page-shell .book-song-modal-field[data-song-field^="ultimate_guitar_link"] { grid-template-columns:minmax(0,1fr); }
}

.account-default-permissions-body {
  display: grid;
  gap: 12px;
  max-height: calc(88vh - 190px);
  overflow: auto;
  padding-right: 4px;
}

.account-default-permission-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.account-default-permission-group h3 {
  margin: 0;
  color: #fff7ec;
  font-size: 0.92rem;
}

.default-permissions-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.default-permissions-actions-bottom {
  margin-top: 12px;
}

body {
  --songbook-accent: #ffb41f;
  --songbook-accent-strong: #ff8a00;
  --songbook-accent-rgb: 255, 180, 31;
  --songbook-accent-contrast: #141414;
  --bar-text-color: var(--songbook-accent);
  --header-text-color: var(--songbook-accent);
  --button-bg-color: var(--songbook-accent);
  --button-hover-bg-color: var(--songbook-accent-strong);
  --link-color: var(--songbook-accent);
  --link-hover-color: var(--songbook-accent-strong);
  --tab-btn-bg-color: var(--songbook-accent);
  --tab-btn-hover-bg-color: var(--songbook-accent-strong);
  --tab-item-hover-text-color: var(--songbook-accent);
}

body.theme-accent-sunset {
  --songbook-accent: #ffb41f;
  --songbook-accent-strong: #ff8a00;
  --songbook-accent-rgb: 255, 180, 31;
  --songbook-accent-contrast: #141414;
}

body.theme-accent-teal {
  --songbook-accent: #54d6c9;
  --songbook-accent-strong: #20a99a;
  --songbook-accent-rgb: 84, 214, 201;
  --songbook-accent-contrast: #071413;
}

body.theme-accent-cyan {
  --songbook-accent: #67d9ff;
  --songbook-accent-strong: #2aa8e8;
  --songbook-accent-rgb: 103, 217, 255;
  --songbook-accent-contrast: #06141a;
}

body.theme-accent-blue {
  --songbook-accent: #82a8ff;
  --songbook-accent-strong: #4f74e8;
  --songbook-accent-rgb: 130, 168, 255;
  --songbook-accent-contrast: #071022;
}

body.theme-accent-violet {
  --songbook-accent: #c49cff;
  --songbook-accent-strong: #8d62e8;
  --songbook-accent-rgb: 196, 156, 255;
  --songbook-accent-contrast: #160d22;
}

body.theme-accent-rose {
  --songbook-accent: #ff91bf;
  --songbook-accent-strong: #e85b94;
  --songbook-accent-rgb: 255, 145, 191;
  --songbook-accent-contrast: #210712;
}

body.theme-accent-red {
  --songbook-accent: #ff7668;
  --songbook-accent-strong: #e84b3f;
  --songbook-accent-rgb: 255, 118, 104;
  --songbook-accent-contrast: #220908;
}

body.theme-accent-green {
  --songbook-accent: #76dc8d;
  --songbook-accent-strong: #3fbf62;
  --songbook-accent-rgb: 118, 220, 141;
  --songbook-accent-contrast: #061607;
}

body.theme-accent-lime {
  --songbook-accent: #c9e95b;
  --songbook-accent-strong: #98c92d;
  --songbook-accent-rgb: 201, 233, 91;
  --songbook-accent-contrast: #111806;
}

body.theme-accent-gold {
  --songbook-accent: #ffd166;
  --songbook-accent-strong: #d89b27;
  --songbook-accent-rgb: 255, 209, 102;
  --songbook-accent-contrast: #191103;
}

body.theme-accent-silver {
  --songbook-accent: #d7dde8;
  --songbook-accent-strong: #9ea9ba;
  --songbook-accent-rgb: 215, 221, 232;
  --songbook-accent-contrast: #111418;
}

.accent-btn,
.requests-sort-btn.active,
.project-editor-nav-btn.active,
.project-command-submit,
.project-requested-vote-btn.is-active {
  background: linear-gradient(135deg, var(--songbook-accent), var(--songbook-accent-strong)) !important;
  color: var(--songbook-accent-contrast) !important;
}

.project-playlist-chip,
.requests-card-badge-votes,
.topbar-status-dot {
  border-color: rgba(var(--songbook-accent-rgb), 0.28);
}

.project-playlist-chip {
  background: rgba(var(--songbook-accent-rgb), 0.12);
  color: color-mix(in srgb, var(--songbook-accent) 72%, #fff 28%);
}

body[class*="theme-accent-"] .section-title,
body[class*="theme-accent-"] .project-editor-kicker,
body[class*="theme-accent-"] .project-section-note strong,
body[class*="theme-accent-"] .tab-permissions-summary-label,
body[class*="theme-accent-"] .tab-permissions-summary-text strong,
body[class*="theme-accent-"] .playlist-current-kicker,
body[class*="theme-accent-"] .setlist-current-kicker,
body[class*="theme-accent-"] .requests-card .req-user,
body[class*="theme-accent-"] .requests-card .req-title,
body[class*="theme-accent-"] .requests-card .req-msg,
body[class*="theme-accent-"] .onair-card strong,
body[class*="theme-accent-"] .onair-card em,
body[class*="theme-accent-"] .project-card-cover,
body[class*="theme-accent-"] .project-card-summary-actions .btn-pages,
body[class*="theme-accent-"] .current-playlist-subtitle,
body[class*="theme-accent-"] .current-setlist-subtitle,
body[class*="theme-accent-"] .song-info-kicker,
body[class*="theme-accent-"] .book-deck-meta strong {
  color: var(--songbook-accent) !important;
}

body[class*="theme-accent-"] .project-card-cover,
body[class*="theme-accent-"] .requests-card,
body[class*="theme-accent-"] .requests-card-modern,
body[class*="theme-accent-"] .book-row-action.active,
body[class*="theme-accent-"] .tab-version-item.active-tab-version,
body[class*="theme-accent-"] .song-info-chip,
body[class*="theme-accent-"] .project-card-current {
  border-color: rgba(var(--songbook-accent-rgb), 0.32) !important;
}

body[class*="theme-accent-"] .requests-card:hover,
body[class*="theme-accent-"] .btn-pages:hover,
body[class*="theme-accent-"] .tab-version-item.active-tab-version {
  box-shadow: inset 0 0 0 1px rgba(var(--songbook-accent-rgb), 0.14);
}

.project-create-shell {
  align-items: flex-start;
}

.project-create-open-btn {
  width: auto;
  min-height: 38px;
  padding: 8px 16px;
  border-color: rgba(var(--songbook-accent-rgb), 0.32);
  background: rgba(var(--songbook-accent-rgb), 0.08);
  color: var(--songbook-accent);
}

.project-create-modal[hidden] {
  display: none !important;
}

.project-create-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
}

.project-create-modal .project-create-card {
  width: min(94vw, 520px);
  max-height: min(90vh, 680px);
  overflow: auto;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(18, 18, 18, 0.98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.project-create-modal .project-block-card-head {
  align-items: start;
}

.project-create-close-btn {
  min-width: 36px;
  width: 36px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
}

.project-create-modal .project-create-actions {
  justify-content: flex-end;
}

.projects-page-shell .projects-page-header {
  padding: 15px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(38, 38, 38, 0.96), rgba(20, 20, 20, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.projects-page-shell .section-title {
  color: var(--songbook-accent);
}

.projects-page-shell .projects-page-subtitle {
  color: rgba(255, 247, 236, 0.72);
}

.projects-page-shell:not(.project-editor-mode) .project-card-compact {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(43, 43, 43, 0.96), rgba(22, 22, 22, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.projects-page-shell:not(.project-editor-mode) .project-card-current {
  border-color: rgba(var(--songbook-accent-rgb), 0.36);
  box-shadow: inset 0 0 0 1px rgba(var(--songbook-accent-rgb), 0.12), 0 18px 42px rgba(0, 0, 0, 0.24);
}

.project-card-summary-actions .btn-pages {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 13px;
}

.account-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.account-theme-chip {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.045);
  color: #fff7ec;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}

.account-theme-chip.is-active {
  border-color: rgba(var(--songbook-accent-rgb), 0.46);
  box-shadow: inset 0 0 0 1px rgba(var(--songbook-accent-rgb), 0.16);
}

.account-theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--preview-accent, #ffb41f), var(--preview-accent-strong, #ff8a00));
}

.account-display-option-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.account-display-title {
  margin: 2px 0 6px;
  color: #fff7ec;
  font-size: 1rem;
}

.account-display-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.account-display-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 247, 236, 0.82);
  cursor: pointer;
}

.account-display-choice.is-active {
  border-color: rgba(var(--songbook-accent-rgb), 0.45);
  box-shadow: inset 0 0 0 1px rgba(var(--songbook-accent-rgb), 0.13);
}

.account-display-choice input {
  margin-top: 3px;
  accent-color: var(--songbook-accent);
}

.account-display-choice strong,
.account-display-choice small {
  display: block;
}

.account-display-choice small {
  margin-top: 3px;
  color: rgba(241, 233, 221, 0.6);
}

#setlist-mode-content.is-switch-mode {
  touch-action: pan-y;
}

.setlist-mode-switch-flow .setlist-mode-flow-spacer-top {
  min-height: 6px;
}

.setlist-mode-switch-flow .setlist-mode-flow-spacer-bottom {
  min-height: 44vh;
}

.theme-accent-preview-sunset { --preview-accent: #ffb41f; --preview-accent-strong: #ff8a00; }
.theme-accent-preview-teal { --preview-accent: #54d6c9; --preview-accent-strong: #20a99a; }
.theme-accent-preview-cyan { --preview-accent: #67d9ff; --preview-accent-strong: #2aa8e8; }
.theme-accent-preview-blue { --preview-accent: #82a8ff; --preview-accent-strong: #4f74e8; }
.theme-accent-preview-violet { --preview-accent: #c49cff; --preview-accent-strong: #8d62e8; }
.theme-accent-preview-rose { --preview-accent: #ff91bf; --preview-accent-strong: #e85b94; }
.theme-accent-preview-red { --preview-accent: #ff7668; --preview-accent-strong: #e84b3f; }
.theme-accent-preview-green { --preview-accent: #76dc8d; --preview-accent-strong: #3fbf62; }
.theme-accent-preview-lime { --preview-accent: #c9e95b; --preview-accent-strong: #98c92d; }
.theme-accent-preview-gold { --preview-accent: #ffd166; --preview-accent-strong: #d89b27; }
.theme-accent-preview-silver { --preview-accent: #d7dde8; --preview-accent-strong: #9ea9ba; }

.tabs-list.tv-versions-list .tab-version-item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: #fff7ec;
}

.tabs-list.tv-versions-list .tab-version-item.active-tab-version {
  color: #fff7ec;
  border-color: rgba(84, 214, 201, 0.36);
  box-shadow: inset 0 0 0 1px rgba(84, 214, 201, 0.14);
}

.tv-version-action-pill {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
}

.tv-version-action-pill:hover {
  border-color: rgba(84, 214, 201, 0.36);
  background: rgba(84, 214, 201, 0.08);
  color: #fff7ec;
}

.main-container.tabedit-mode #tabviewer-return-top,
.main-container.tabedit-mode #tv-floating-live-tools,
body:not(.tabviewer-floating-mounted) #tabviewer-floating-host {
  display: none !important;
}

.tab-archive-btn {
  margin-left: 0;
  margin-right: auto;
}

.tab-danger-actions {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0 18px;
}

.tab-danger-actions .tab-archive-btn,
.tab-actions .tab-archive-btn {
  border: 1px solid rgba(255, 118, 95, 0.36);
  background: linear-gradient(180deg, rgba(255, 118, 95, 0.14), rgba(255, 118, 95, 0.06));
  color: #ffd8cf;
  border-radius: 13px;
  font-weight: 800;
}

.tab-danger-actions .tab-archive-btn:hover,
.tab-actions .tab-archive-btn:hover {
  border-color: rgba(255, 142, 120, 0.54);
  background: linear-gradient(180deg, rgba(255, 118, 95, 0.22), rgba(255, 118, 95, 0.1));
  color: #fff7ec;
}

.tabedit-workspace {
  --tabedit-stage-width: min(100%, 88ch);
  display: grid;
  gap: 10px;
  padding: 10px;
  color: #fff7ec;
  justify-items: center;
}

.tabedit-card {
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(18, 18, 18, 0.94));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  padding: 10px;
}

.tabedit-workspace > .metadata-section.tabedit-card,
.tabedit-workspace > .editor-section.tabedit-card {
  width: var(--tabedit-stage-width);
  max-width: 100%;
  margin-inline: auto;
}

.tabedit-song-context {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 8px;
}

.tabedit-song-context span {
  display: inline-flex;
  max-width: min(100%, 92ch);
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--songbook-accent-rgb), 0.24);
  background: rgba(var(--songbook-accent-rgb), 0.08);
  color: #fff3dc;
  font-size: 1rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tabedit-stage-width {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tabedit-metadata-grid {
  display: grid;
  grid-template-columns: minmax(118px, 0.16fr) minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  border-bottom: 0;
  padding: 0;
}

.tabedit-metadata-grid label {
  margin: 0;
  color: rgba(255, 247, 236, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tabedit-metadata-grid input,
.tabedit-metadata-grid textarea,
.tabedit-metadata-grid select {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #fff7ec;
  padding: 6px 9px;
  font: inherit;
  font-size: 0.92rem;
}

.tabedit-name-input {
  width: min(100%, 72ch);
  max-width: none;
}

.tabedit-short-input {
  max-width: 12ch;
}

.tabedit-metadata-grid.tabedit-metadata-groups {
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}

.tabedit-meta-group {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
}

.tabedit-meta-group-version {
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.24fr) minmax(120px, 0.22fr);
}

.tabedit-meta-group-performance {
  grid-template-columns: minmax(130px, 1fr) minmax(100px, 0.55fr);
}

.tabedit-meta-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.tabedit-meta-field span {
  color: rgba(255, 247, 236, 0.64);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabedit-meta-field input,
.tabedit-meta-field select {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.84rem;
}

.tabedit-meta-field select {
  min-width: 86px;
}

.tabedit-meta-field[for="tab-capo"] {
  justify-content: flex-start;
}

.tabedit-meta-field[for="tab-capo"] #tab-capo {
  align-self: stretch;
  height: 32px;
  min-height: 32px;
  margin: 0 !important;
  line-height: 1.1;
}

.tabedit-meta-field .tabedit-name-input,
.tabedit-meta-field .tabedit-short-input {
  width: 100%;
  max-width: none;
}

@media (max-width: 620px) {
  .tabedit-meta-group-version,
  .tabedit-meta-group-performance {
    grid-template-columns: 1fr;
  }
}

.tabedit-longtext-stack {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.tabedit-longtext-stack label {
  margin: 0;
  color: rgba(255, 247, 236, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tabedit-longtext-stack textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 92px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #fff7ec;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.92rem;
  resize: vertical !important;
  overflow-x: hidden;
  overflow: auto;
  box-sizing: border-box;
}

#version-setup,
#notes {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1;
  resize: vertical !important;
  box-sizing: border-box;
}

.tabedit-workspace #notes,
.tabedit-workspace #notes.tabedit-content-like-textarea {
  min-height: 132px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #fff7ec;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  padding: 10px 12px;
  resize: vertical !important;
  overflow: auto;
  white-space: pre-wrap;
  box-shadow: none;
}

.tabedit-metadata-grid label[for="version-setup"],
.tabedit-metadata-grid label[for="notes"] {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.tabedit-metadata-grid textarea {
  min-height: 66px;
  resize: vertical;
  overflow: auto;
}

.tabedit-editor-card {
  padding: 10px;
  overflow: hidden;
}

.tabedit-editor-card .tab-width-guide {
  width: 100%;
  margin: 0 0 8px;
}

.tabedit-workspace .CodeMirror {
  width: 100%;
  height: min(72vh, 820px) !important;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(10, 10, 10, 0.96);
}

.tabedit-workspace .CodeMirror-scroll {
  border-radius: 16px;
}

.tabedit-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: var(--tabedit-stage-width);
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

.tabedit-footer-actions .tab-actions,
.tabedit-footer-actions .tab-danger-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tabedit-footer-actions .action-btn {
  min-height: 34px;
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 900;
}

#save-button {
  background: linear-gradient(135deg, #ffb94f, #ff8d22);
  border-color: rgba(255, 185, 79, 0.42);
  color: #14100a !important;
}

#save-as-new-button,
#cancel-button {
  background: rgba(255, 255, 255, 0.05);
  color: #fff7ec !important;
}

.tabedit-search-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: var(--tabedit-stage-width);
  max-width: 100%;
  padding: 8px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.92), rgba(17, 17, 17, 0.9));
  box-sizing: border-box;
}

.tabedit-search-input {
  width: min(220px, 100%);
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #fff7ec;
  padding: 6px 9px;
}

.tab-danger-actions-separated {
  margin-top: calc(1.4em * 4);
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .tabedit-metadata-grid {
    grid-template-columns: 1fr;
  }

  .tabedit-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #version-setup,
  #notes {
    width: 100%;
    max-width: 100%;
    grid-column: 1 / -1;
  }

  .tabedit-stage-width {
    width: 100%;
  }
}

.project-playlist-mode-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) auto auto;
  align-items: center;
  gap: 10px;
}

.project-playlist-drag-handle {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 247, 234, 0.58);
  cursor: grab;
  line-height: 1;
  letter-spacing: -0.08em;
}

.project-playlist-drag-handle:active {
  cursor: grabbing;
}

.project-playlist-row-chip-ghost {
  opacity: 0.55;
}

.project-playlist-row-chip-chosen,
.project-playlist-row-chip-dragging {
  border-color: rgba(255, 185, 79, 0.42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.project-collapsible-summary {
  list-style: none;
  cursor: pointer;
}

.project-collapsible-summary::-webkit-details-marker {
  display: none;
}

.project-collapsible-arrow {
  color: rgba(255, 214, 152, 0.78);
  transition: transform 0.16s ease;
}

.project-inbox-options-block[open] .project-collapsible-arrow {
  transform: rotate(180deg);
}

.project-collapsible-body {
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

.project-playlist-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-playlist-mode-select {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
}

.project-playlist-note-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.76rem;
}

.project-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: rgba(255, 244, 220, 0.82);
  font-size: 0.82rem;
  font-weight: 700;
}

.project-inline-checkbox input {
  accent-color: var(--accent, #ffb31a);
}

.on-air-slave-page {
  max-width: 980px;
  margin-inline: auto;
}

.on-air-slave-head {
  margin: 0 auto 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(35, 35, 38, 0.96), rgba(18, 18, 20, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.on-air-slave-title {
  margin: 3px 0 0;
  color: #fff2d6;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  line-height: 1.15;
}

.on-air-slave-version {
  margin: 4px 0 0;
  color: rgba(255, 244, 220, 0.62);
  font-size: 0.84rem;
}

.on-air-slave-stack {
  margin-top: 0;
}

.on-air-slave-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.on-air-slave-refresh-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
}

.requests-card-modern.requests-group-card {
  padding: 9px 10px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(45, 45, 45, 0.98), rgba(21, 21, 21, 0.96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.requests-card-modern.request-vote-strength-medium {
  border-color: rgba(84, 214, 201, 0.28) !important;
  box-shadow: inset 4px 0 0 rgba(84, 214, 201, 0.42);
}

.requests-card-modern.request-vote-strength-high {
  border-color: rgba(84, 214, 201, 0.42) !important;
  box-shadow: inset 4px 0 0 rgba(84, 214, 201, 0.68), 0 14px 34px rgba(0, 0, 0, 0.2);
}

.requests-card-modern.request-vote-strength-huge {
  border-color: rgba(84, 214, 201, 0.58) !important;
  box-shadow: inset 5px 0 0 rgba(84, 214, 201, 0.9), 0 16px 38px rgba(84, 214, 201, 0.08);
}

.requests-card-modern .requests-card-badges {
  padding: 0;
  margin-bottom: 6px;
  border: 0;
  background: transparent;
}

.requests-card-modern .req-title {
  font-size: 0.92rem;
  color: #fff2d6;
}

.requests-card-modern .req-meta-line,
.requests-card-modern .req-detail-row {
  font-size: 0.8rem;
}

.requests-card-badge-participation {
  border-color: rgba(84, 214, 201, 0.28);
  background: rgba(84, 214, 201, 0.09);
  color: #dffcf8;
}

.requests-source-menu[hidden] {
  display: none !important;
}

.requests-tab-panel.requests-shell-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.requests-stream {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(50, 50, 54, 0.94), rgba(28, 28, 32, 0.96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.requests-card-list {
  gap: 5px;
}

.requests-card-modern.requests-group-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  margin-bottom: 0;
  padding: 7px 9px;
  border-radius: 13px;
}

.requests-card-modern.requests-group-card .request-actions {
  grid-column: 2;
  grid-row: 2;
  position: static;
  align-self: start;
  justify-self: end;
}

.requests-card-modern.requests-group-card .requests-card-badges {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0 0 1px;
  gap: 4px;
}

.requests-card-modern.requests-group-card .req-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-right: 0;
  font-size: 0.88rem;
  line-height: 1.18;
}

.requests-card-modern.requests-group-card .req-meta-line {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.2;
  opacity: 0.72;
}

.requests-card-modern.requests-group-card .requests-group-details {
  grid-column: 1 / -1;
  display: grid;
  gap: 1px;
  margin-top: 2px;
}

.requests-card-modern.requests-group-card .req-detail-row {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.2;
}

.requests-card-modern.requests-group-card .req-date {
  font-size: 0.72rem;
}

.requests-card-modern.requests-group-card .request-card-footer-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.requests-card-modern.requests-group-card .request-add-setlist-btn {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 0.74rem;
}

.requests-card-modern.requests-group-card .requests-card-badge {
  padding: 3px 7px;
  font-size: 0.72rem;
}

.requests-card-modern.request-vote-strength-medium,
.requests-card-modern.request-vote-strength-high,
.requests-card-modern.request-vote-strength-huge {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

.requests-toolbar-compact.requests-shell-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
  flex-wrap: nowrap;
}

.requests-toolbar-compact .requests-picker-dropdown {
  min-width: min(300px, 100%);
}

.requests-toolbar-compact .requests-source-current {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 11px;
}

.requests-onair-slave-wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: min(52%, 460px);
  flex-wrap: nowrap;
}

.requests-onair-slave-wrap .requests-source-current {
  flex: 1 1 auto;
  min-width: 0;
}

.requests-onair-slave-wrap .requests-source-current strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requests-source-current-static {
  pointer-events: none;
}

.requests-onair-slave-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.76rem;
}

.requests-toolbar-compact .requests-sort-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.requests-toolbar-compact .requests-sort-btn {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
}

.requests-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.requests-page-shell,
.requests-tab-panels,
.requests-tab-panel,
.requests-stream-stack,
.requests-stream-shell,
.requests-card-list,
.request-setlist-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.request-setlist-panel {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 12px;
  border-color: rgba(84, 214, 201, 0.14);
  background: linear-gradient(180deg, rgba(31, 40, 42, 0.96), rgba(18, 20, 22, 0.98));
}

.request-setlist-panel.is-drag-over {
  border-color: rgba(84, 214, 201, 0.42);
  box-shadow: 0 0 0 2px rgba(84, 214, 201, 0.08), 0 18px 42px rgba(0, 0, 0, 0.22);
}

.request-setlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.request-setlist-head strong {
  display: block;
  color: #fff2d6;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.request-setlist-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.request-setlist-clear-btn,
.request-setlist-mode-btn {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 11px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.request-setlist-mode-btn {
  border-color: rgba(var(--songbook-accent-rgb), 0.52) !important;
  background: rgba(var(--songbook-accent-rgb), 0.14) !important;
}

.request-setlist-list {
  display: grid;
  gap: 7px;
}

.request-setlist-row {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  cursor: grab;
}

.request-setlist-row:active {
  cursor: grabbing;
}

.request-setlist-position {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(84, 214, 201, 0.12);
  color: #dffcf8;
  font-size: 0.72rem;
  font-weight: 900;
}

.request-setlist-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(223, 252, 248, 0.72);
  cursor: grab;
  line-height: 1;
  letter-spacing: -0.08em;
  touch-action: none;
}

.request-setlist-drag-handle:active {
  cursor: grabbing;
}

.request-setlist-row-ghost {
  opacity: 0.55;
}

.request-setlist-row-chosen,
.request-setlist-row-dragging {
  border-color: rgba(84, 214, 201, 0.42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.request-setlist-song {
  border: 0;
  background: transparent;
  color: #fff2d6;
  text-align: left;
  padding: 0;
  cursor: pointer;
  min-width: 0;
}

.request-setlist-song strong,
.request-setlist-song small {
  display: block;
  overflow-wrap: anywhere;
}

.request-setlist-song strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.request-setlist-song small {
  margin-top: 3px;
  color: rgba(255, 244, 220, 0.64);
  font-size: 0.72rem;
  line-height: 1.25;
}

.request-setlist-version-select {
  grid-column: 3;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 7px;
  border-radius: 9px;
  border: 1px solid rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.24);
  background: #171717;
  color: #fff7ea;
  color-scheme: dark;
  font-size: 0.74rem;
  appearance: auto;
}

.request-setlist-version-select:focus {
  outline: 2px solid rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.38);
  outline-offset: 2px;
}

.request-setlist-archive-btn {
  min-height: 30px;
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 179, 0, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--gold, #ffb300);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.request-setlist-version-select option {
  background: #171717;
  color: #fff7ea;
}

.request-setlist-empty {
  margin: 0;
}

.requests-playlist-tab {
  min-height: 30px;
  height: 30px;
  padding: 4px 9px;
  border-radius: 9px;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.requests-playlist-tab .requests-tab-count {
  min-width: 18px;
  height: 18px;
  font-size: 0.68rem;
}

.requests-stream:not(.requests-stream-played) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.requests-stream:not(.requests-stream-played) .requests_stream_title {
  margin: 0 0 7px;
}

.requests-card-modern.requests-group-card {
  display: block;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.requests-card-modern.requests-group-card .requests-card-badges,
.requests-card-modern.requests-group-card .req-title,
.requests-card-modern.requests-group-card .requests-group-details,
.requests-card-modern.requests-group-card .request-card-footer-actions {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
}

.requests-card-modern.requests-group-card .requests-card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.requests-card-modern.requests-group-card .requests-card-badges {
  order: 2;
  margin: 0;
}

.requests-card-modern.requests-group-card .request-card-footer-actions-top {
  margin: 0;
  justify-content: flex-end;
  order: 1;
  flex-wrap: nowrap;
  gap: 4px;
}

.requests-card-modern.requests-group-card .request-action-btn {
  min-height: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.64rem;
}

.requests-card-modern.requests-group-card .request-add-btn {
  min-height: 30px;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 11px;
  font-size: 0.74rem;
  border-color: rgba(var(--songbook-accent-rgb), 0.42);
  background: rgba(var(--songbook-accent-rgb), 0.12);
}

.requests-card-modern.requests-group-card .req-title-button,
.requests-card-modern.requests-group-card .req-title-display {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  margin: 1px 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff2d6;
  font-size: 0.84rem;
  font-weight: 900;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  cursor: pointer;
}

.requests-card-modern.requests-group-card .req-title-button:hover {
  color: var(--songbook-accent);
}

.requests-card-modern.requests-group-card .req-detail-main {
  min-width: 0;
}

.requests-card-modern.requests-group-card .req-comment-preview {
  display: block;
  width: 100%;
  padding-right: 64px;
}

.requests-card-modern.requests-group-card .req-comment-text {
  max-width: 100%;
}

.requests-streams-grid,
.requests-streams-grid-participation,
.requests-streams-grid-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.requests-stream:not(.requests-stream-played) {
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(180deg, rgba(50, 50, 54, 0.94), rgba(28, 28, 32, 0.96)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2) !important;
}

.requests-stream:not(.requests-stream-played) .requests_stream_title {
  margin: 0 0 10px;
}

.requests-stream-played {
  margin-top: 26px;
}

@media (max-width: 560px) {
  .requests-workspace-grid {
    grid-template-columns: 1fr;
  }

  .request-setlist-panel {
    position: static;
  }

  .requests-onair-slave-wrap {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  .requests-toolbar-compact.requests-shell-card {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .requests-card-modern.requests-group-card .requests-card-topline {
    grid-column: 1 / -1;
    justify-self: stretch;
    flex-wrap: wrap;
  }

  .requests-card-modern.requests-group-card .request-card-footer-actions-top {
    flex-wrap: wrap;
  }

  .requests-card-modern.requests-group-card .req-title-button {
    grid-column: 1 / -1;
    grid-row: auto;
    font-size: 0.8rem;
  }
}

.workspace-nav-strip .header-nav-btn {
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
}

.workspace-nav-strip .header-nav-btn .header-nav-btn-meta.is-placeholder {
  display: none;
}

.workspace-nav-strip .header-nav-btn .header-nav-btn-copy-single {
  grid-row: auto;
  align-self: center;
}

body[class*="theme-accent-"] td.column-artist,
body[class*="theme-accent-"] .setlist-add-btn,
body[class*="theme-accent-"] .setlist-button,
body[class*="theme-accent-"] .tab-version-dropdown,
body[class*="theme-accent-"] .tab-indicator,
body[class*="theme-accent-"] .setlist-indicator,
body[class*="theme-accent-"] .title-text,
body[class*="theme-accent-"] .bookpage_style-table td:nth-child(3),
body[class*="theme-accent-"] #playlist-user-search-results li.active,
body[class*="theme-accent-"] .tv-setlist-jump.is-active .tv-setlist-jump-title,
body[class*="theme-accent-"] .tv-version-pill.is-ref,
body[class*="theme-accent-"] .tv-transpose-value-button:hover,
body[class*="theme-accent-"] .deck-card .deck-title,
body[class*="theme-accent-"] .sp-btn.p-active,
body[class*="theme-accent-"] .sp-btn.btn-playlist-active,
body[class*="theme-accent-"] .project-playlist-chip,
body[class*="theme-accent-"] .project-card-cover,
body[class*="theme-accent-"] .requests-tab-count,
body[class*="theme-accent-"] .setlist-song-position,
body[class*="theme-accent-"] .playlist-user-chip-owner,
body[class*="theme-accent-"] .playlist-workspace-modern .playlist-rule-chip em,
body[class*="theme-accent-"] .book-deck-line-main:hover,
body[class*="theme-accent-"] .requests-card .req-title,
body[class*="theme-accent-"] .requests-card .req-user,
body[class*="theme-accent-"] .header-nav-btn-meta,
body[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active .header-nav-btn-meta {
  color: color-mix(in srgb, var(--songbook-accent) 76%, #fff 24%) !important;
}

body[class*="theme-accent-"] .setlist-button.active,
body[class*="theme-accent-"] .setlist-dnd-button:hover,
body[class*="theme-accent-"] .setlist-version-button:hover,
body[class*="theme-accent-"] .tab-indicator:hover,
body[class*="theme-accent-"] .setlist-indicator:hover,
body[class*="theme-accent-"] .accent-btn,
body[class*="theme-accent-"] .requests-playlist-tab.active,
body[class*="theme-accent-"] .requests-sort-btn.active,
body[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active {
  background: linear-gradient(135deg, var(--songbook-accent), var(--songbook-accent-strong)) !important;
  color: var(--songbook-accent-contrast) !important;
}

body[class*="theme-accent-"] .tab-indicator,
body[class*="theme-accent-"] .setlist-indicator,
body[class*="theme-accent-"] .sp-btn.p-active,
body[class*="theme-accent-"] .sp-btn.btn-playlist-active,
body[class*="theme-accent-"] .project-playlist-chip,
body[class*="theme-accent-"] .setlist-song-position,
body[class*="theme-accent-"] .playlist-user-chip-owner,
body[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn:hover,
body[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active,
body[class*="theme-accent-"] .requests-sort-btn.active {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
}

body[class*="theme-accent-"] .setlist-song-position,
body[class*="theme-accent-"] .playlist-user-chip-owner,
body[class*="theme-accent-"] .project-playlist-chip,
body[class*="theme-accent-"] .requests-card-badge-votes {
  background: rgba(var(--songbook-accent-rgb), 0.12) !important;
}

/* Theme accent completion: sunset stays visually unchanged; the other
   themes replace the remaining yellow/orange accents with the user color. */
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-info-kicker,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .requests_stream_title,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-versions-summary-label,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-setlist-jump-index,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-more-tabs-toggle .tv-versions-summary-arrow,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-notes-arrow,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-floating-stepper:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-readout,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-collapsible-arrow,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-card-cover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-field span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-block-card h4,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-block-card h5,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-autosave-status.is-saving,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-field span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-current-title-field > span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-current-field > span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-create-field > span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-create-feedback.is-warning,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-create-feedback.is-saving,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-autosync-token,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-autosync-token-label,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-autosync-connector-placeholder,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-workspace-modern .playlist-rule-chip em,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-tag-chip,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-root .bp-btn-edit,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-inline-summary::after,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-option.active .bookpage-source-option-copy strong,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-shortcut.active strong,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-deck-genre-chip.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .requests-source-option.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tabs-list.tv-versions-list .tab-version-item.active-tab-version .tabs-version-name,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-version-pill.is-ref,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tabs-version-main:hover .tabs-version-name {
  color: color-mix(in srgb, var(--songbook-accent) 76%, #fff 24%) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .btn-pages:not(.danger-btn):not(.accent-btn):not(.active),
body:not(.theme-accent-sunset)[class*="theme-accent-"] .ghost-btn:not(.danger-btn),
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-btn-onair,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-more-tabs-toggle,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-launch,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-version-action-pill,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-create-open-btn,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-card-cover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-tag-chip,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-option.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-shortcut.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-root .bp-btn-edit,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-deck-genre-chip:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-deck-genre-chip.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .requests-source-option.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #playlist-permissions-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #playlist-tags-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #setlist-permissions-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #setlist-tags-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-modal-content-modern .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-modal-content-modern .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-panel .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-panel .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-modal-content .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-modal-content .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-user-results li.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-manual-import-option.is-selected {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .btn-pages:not(.danger-btn):not(.accent-btn):not(.active),
body:not(.theme-accent-sunset)[class*="theme-accent-"] .ghost-btn:not(.danger-btn),
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-btn-onair,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-more-tabs-toggle,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-launch,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-version-action-pill,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-create-open-btn {
  color: color-mix(in srgb, var(--songbook-accent) 74%, #fff 26%) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-btn-onair,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-card-cover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-tag-chip,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-option.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-shortcut.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-root .bp-btn-edit,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-deck-genre-chip:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-deck-genre-chip.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .requests-source-option.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #playlist-permissions-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #playlist-tags-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #setlist-permissions-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] #setlist-tags-launch.is-open,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-modal-content-modern .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-library-modal-content-modern .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-panel .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-panel .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-modal-content .playlist-library-item.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-library-modal-content .playlist-library-item:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-user-results li.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-manual-import-option.is-selected {
  background: rgba(var(--songbook-accent-rgb), 0.1) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .btn-pages.accent-btn,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .btn-pages.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-editor-nav-btn.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-btn-onair.active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active {
  border-color: rgba(var(--songbook-accent-rgb), 0.58) !important;
  background: linear-gradient(135deg, var(--songbook-accent), var(--songbook-accent-strong)) !important;
  color: var(--songbook-accent-contrast) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .btn-pages:not(.danger-btn):not(.accent-btn):not(.active):hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-btn:not(.active):hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-more-tabs-toggle:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-version-action-pill:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-floating-stepper:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-autosync-modal-modern .auto-sync-row button:hover {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
  background: rgba(var(--songbook-accent-rgb), 0.1) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-version-pill.is-ref,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tempo-led.on,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-tempo-chip,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-autosync-modal-modern .auto-sync-row button {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-slider::-webkit-slider-thumb {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-slider::-moz-range-thumb {
  border-color: rgba(var(--songbook-accent-rgb), 0.42) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tempo-led.on {
  background-color: var(--songbook-accent) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-tempo-chip {
  background: rgba(var(--songbook-accent-rgb), 0.1) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-slider::-webkit-slider-runnable-track {
  background: rgba(var(--songbook-accent-rgb), 0.1) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-slider::-moz-range-track {
  background: rgba(var(--songbook-accent-rgb), 0.1) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-slider {
  accent-color: var(--songbook-accent) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .bookpage-source-option input {
  accent-color: var(--songbook-accent) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] input[type="checkbox"],
body:not(.theme-accent-sunset)[class*="theme-accent-"] input[type="radio"] {
  accent-color: var(--songbook-accent) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] #save-button,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .danger-btn,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tab-archive-btn,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .admin-bomb-button {
  border-color: rgba(var(--songbook-accent-rgb), 0.48) !important;
  background: linear-gradient(135deg, var(--songbook-accent), var(--songbook-accent-strong)) !important;
  color: var(--songbook-accent-contrast) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-transpose-value-button:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-floating-stepper:active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-autoscroll-readout,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-fine-autoscroll-value {
  color: color-mix(in srgb, var(--songbook-accent) 76%, #fff 24%) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-fine-autoscroll-rail {
  border-color: rgba(var(--songbook-accent-rgb), 0.34) !important;
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb), 0.24), rgba(255, 255, 255, 0.06)) !important;
}

body:not(.theme-accent-sunset)[class*="theme-accent-"] .tv-fine-autoscroll-thumb {
  border-color: rgba(var(--songbook-accent-rgb), 0.48) !important;
  background: color-mix(in srgb, var(--songbook-accent) 24%, #fff 76%) !important;
}

/* Dense, scrollable tab-version picker for tablets and crowded songs. */
.tv-current-tab-shell .tv-versions-panel.is-open {
  max-height: min(58vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 198, 110, 0.42) rgba(255, 255, 255, 0.06);
  touch-action: pan-y;
}

.tv-current-tab-shell .tv-versions-panel.is-open::-webkit-scrollbar {
  width: 8px;
}

.tv-current-tab-shell .tv-versions-panel.is-open::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.tv-current-tab-shell .tv-versions-panel.is-open::-webkit-scrollbar-thumb {
  background: rgba(255, 198, 110, 0.42);
  border-radius: 999px;
}

.tv-current-tab-shell .tv-versions-list {
  gap: 6px;
}

.tv-current-tab-shell .tabs-list.tv-versions-list .tab-version-item {
  min-height: 0;
  padding: 7px 10px;
  gap: 8px;
  border-radius: 10px;
}

.tv-current-tab-shell .tabs-version-main {
  gap: 4px;
}

.tv-current-tab-shell .tabs-version-primary {
  gap: 4px 8px;
}

.tv-current-tab-shell .tabs-version-name {
  font-size: 0.95rem;
  line-height: 1.12;
}

.tv-current-tab-shell .tabs-version-user {
  font-size: 0.78rem;
  line-height: 1.12;
}

.tv-current-tab-shell .tabs-version-badges,
.tv-current-tab-shell .tabs-actions {
  gap: 5px;
}

.tv-current-tab-shell .tv-version-pill {
  min-height: 22px;
  padding: 0 7px;
  font-size: 0.66rem;
  line-height: 1;
}

.tv-current-tab-shell .tv-version-action-pill {
  white-space: nowrap;
}

.pages-container > .tabs-list {
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pages-container > .tabs-list .tab-version-item {
  min-height: 0;
  padding: 6px 8px;
  gap: 8px;
}

.pages-container > .tabs-list .tabs-version-name {
  font-size: 0.92rem;
  line-height: 1.16;
}

.pages-container > .tabs-list .tabs-actions {
  gap: 6px;
}

.pages-container > .tabs-list .tabs-ref-button {
  min-height: 22px;
  padding: 0 8px;
  margin-right: 0;
  font-size: 0.68rem;
}

@media (max-width: 700px) {
  .project-playlist-mode-chip {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .project-playlist-mode-select {
    grid-column: 1 / -1;
  }

  .tv-current-tab-shell .tv-versions-panel {
    padding: 0 12px 12px;
  }

  .tv-current-tab-shell .tv-versions-panel.is-open {
    max-height: min(62vh, 520px);
    overflow-y: auto;
  }

  .tv-current-tab-shell .tv-versions-toolbar {
    gap: 7px;
    padding: 8px 0;
  }

  .tv-current-tab-shell .tv-versions-search input {
    min-height: 34px;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 0.86rem;
  }

  .tv-current-tab-shell .tabs-list.tv-versions-list .tab-version-item {
    align-items: flex-start;
    padding: 6px 8px;
    gap: 6px;
  }

  .tv-current-tab-shell .tabs-version-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .tv-current-tab-shell .tabs-version-name {
    font-size: 0.88rem;
  }

  .tv-current-tab-shell .tabs-version-user {
    font-size: 0.72rem;
  }

  .tv-current-tab-shell .tabs-version-badges {
    display: none;
  }

  .tv-current-tab-shell .tabs-actions {
    flex: 0 0 auto;
    max-width: 48%;
    justify-content: flex-end;
  }

  .tv-current-tab-shell .tv-version-pill {
    min-height: 20px;
    padding: 0 6px;
    font-size: 0.6rem;
  }

  .pages-container > .tabs-list {
    max-height: min(58vh, 500px);
  }
}

/* 20260707 - Bookpage compact tab header */
.bookpage-root .bookpage-header.bookpage-toolbar-tabs {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}

.bookpage-root .bookpage-toolbar-actions-primary {
  justify-content: flex-end;
  gap: 8px;
}

.bookpage-root .bookpage-source-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 -1px;
  padding: 0 8px;
}

.bookpage-root .bookpage-source-tabs {
  flex: 1 1 auto;
}

.bookpage-root .bookpage-source-tab {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-height: 44px;
  height: 44px;
  align-content: center;
}

.bookpage-root .bookpage-source-tab strong,
.bookpage-root .bookpage-source-tab span {
  line-height: 1.05;
}

.bookpage-root .bookpage-deck-heading-row {
  display: none !important;
}

.bookpage-root .bookpage-deck-sort-controls {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.bookpage-my-songs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.28);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 247, 236, 0.84);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bookpage-my-songs-toggle input {
  accent-color: var(--accent-color, #ffb41f);
}

.bookpage-root .bookpage-deck-sort-select {
  min-width: 132px;
  min-height: 32px;
}

.bookpage-root.is-deck-mode .bookpage-columns-button {
  display: none !important;
}

@media (max-width: 980px) {
  .bookpage-root .bookpage-source-tabbar {
    align-items: flex-end;
    gap: 8px;
  }

  .bookpage-root .bookpage-source-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .bookpage-root .bookpage-deck-sort-controls {
    width: auto;
    flex-wrap: nowrap;
  }

  .bookpage-my-songs-toggle {
    flex: 0 0 auto;
  }

  .bookpage-root .bookpage-deck-sort-label {
    display: none;
  }

  .bookpage-root .bookpage-deck-sort-select {
    width: min(132px, 34vw);
    min-width: 104px;
    flex: 0 0 auto;
  }
}

/* 20260707 - Requests tabs and requester rows */
.requests-playlist-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.requests-playlist-tabs-row .requests-playlist-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.requests-onair-slave-btn-tabs {
  flex: 0 0 auto;
  margin-left: auto;
  border-color: rgba(var(--songbook-accent-rgb), 0.5) !important;
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb), 0.22), rgba(var(--songbook-accent-rgb), 0.1)) !important;
  box-shadow: 0 8px 22px rgba(var(--songbook-accent-rgb), 0.14);
}

@media (max-width: 1180px) {
  .requests-requester-song-list .req-detail-row.requests-requester-song-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 6px;
  }

  .requests-requester-song-list .requests-requester-song-row .req-detail-main {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .requests-requester-song-list .requests-requester-song-row .req-detail-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
  }

  .requests-requester-song-list .requests-requester-song-title,
  .requests-requester-song-list .req-title,
  .requests-requester-song-list .req-title-button,
  .requests-requester-song-list .req-title-display,
  .requests-requester-song-list .req-user,
  .requests-requester-song-list .req-user-comment-btn {
    flex: 0 0 100%;
    width: 100%;
    line-height: 1.22;
  }

  .requests-requester-song-list .requester-row-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .requests-playlist-tabs-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .requests-onair-slave-btn-tabs {
    width: 100%;
  }
}

/* 20260708 - Tabs content banner, tabedit selects, compact playlist rules */
.tabedit-metadata-grid select,
.tabedit-metadata-grid select option,
.tabedit-metadata-grid optgroup,
#tab-capo,
#tab-capo option,
select.tabedit-short-input,
select.tabedit-short-input option {
  color-scheme: dark;
  background: #161616 !important;
  color: #fff7ec !important;
}

#tab-capo option:checked,
select.tabedit-short-input option:checked {
  background: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.28) !important;
  color: #fff7ec !important;
}

.tabedit-metadata-grid select:focus {
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.42);
  box-shadow: 0 0 0 2px rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.14);
}

.tabviewer-page-shell .tab-content-stack.has-presentation-bar .tabviewer-pre {
  padding-top: 0;
  padding-bottom: calc(18px + 10em);
}

.tabviewer-page-shell .tab-content-stack.has-presentation-bar .tab-content-presentation-bar {
  margin-top: 8em;
}

.tabviewer-page-shell #tab-content.tabviewer-pre {
  padding-bottom: calc(18px + 10em);
}

.playlist-autosync-modal-modern .auto-sync-row,
.playlist-autosync-modal-modern .auto-sync-row.is-first {
  grid-template-columns: 70px minmax(112px, 0.82fr) minmax(118px, 0.86fr) minmax(210px, 1.6fr) 38px;
  gap: 6px;
  padding: 8px;
  align-items: center;
}

.playlist-autosync-connector-placeholder,
.playlist-autosync-modal-modern .auto-sync-row select,
.playlist-autosync-modal-modern .auto-sync-row input,
.playlist-autosync-modal-modern .auto-sync-row button {
  min-height: 32px;
  border-radius: 9px;
  font-size: 0.78rem;
}

.playlist-autosync-modal-modern .auto-sync-row select,
.playlist-autosync-modal-modern .auto-sync-row input {
  padding: 0 9px;
}

.playlist-autosync-modal-modern .auto-sync-row .playlist-autosync-remove {
  width: 32px;
  padding: 0;
  justify-content: center;
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .playlist-autosync-modal-modern .auto-sync-row,
  .playlist-autosync-modal-modern .auto-sync-row.is-first {
    grid-template-columns: 56px minmax(96px, 0.82fr) minmax(104px, 0.86fr) minmax(160px, 1.5fr) 34px;
  }
}

@media (max-width: 560px) {
  .playlist-autosync-modal-modern .auto-sync-row,
  .playlist-autosync-modal-modern .auto-sync-row.is-first {
    grid-template-columns: 1fr;
  }
}

/* 20260708 - Final playlist header/rule tightening */
.playlist-workspace-modern .playlist-current-title-field,
.playlist-workspace-modern .playlist-current-meta-grid {
  display: none;
}

.playlist-workspace-modern .playlist-current-info {
  padding-bottom: 4px;
}

.playlist-workspace-modern .playlist-secondary-actions {
  padding: 0 20px 18px;
}

.playlist-workspace-modern .playlist-secondary-actions .tv-btn {
  flex: 0 0 auto;
}

.playlist-workspace-modern .playlist-secondary-actions #playlist-open-books-launch {
  margin-left: auto !important;
}

.playlist-autosync-modal-modern #auto-sync-conditions-container.playlist-autosync-editor-list {
  gap: 6px;
  margin-top: 10px;
}

.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row,
.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row.is-first {
  grid-template-columns: 62px minmax(106px, 0.76fr) minmax(112px, 0.82fr) minmax(230px, 1.8fr) 32px;
  padding: 6px;
  gap: 6px;
  border-radius: 12px;
}

.playlist-autosync-modal-modern .playlist-autosync-resource-picker {
  min-height: 30px;
}

.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row select,
.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row input,
.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row button,
.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row .playlist-autosync-connector-placeholder {
  min-height: 30px;
  height: 30px;
  font-size: 0.76rem;
}

.playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row .playlist-autosync-remove {
  width: 30px;
  min-width: 30px;
  height: 30px;
}

@media (max-width: 760px) {
  .playlist-workspace-modern .playlist-secondary-actions #playlist-open-books-launch {
    width: 100%;
    margin-left: 0 !important;
  }

  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row,
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row.is-first {
    grid-template-columns: 52px minmax(82px, 0.7fr) minmax(92px, 0.75fr) minmax(135px, 1.3fr) 30px;
  }
}

@media (max-width: 560px) {
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row,
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row.is-first {
    grid-template-columns: 1fr;
  }

  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row select,
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row input,
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row button,
  .playlist-autosync-modal-modern .auto-sync-row.playlist-autosync-editor-row .playlist-autosync-connector-placeholder {
    height: auto;
    min-height: 32px;
  }
}

/* 20260709 - Separate quiet info chips from action chips. */
.tv-meta-pill,
.playlist-stat-chip,
.playlist-rule-chip,
.setlist-song-meta-chip,
.setlist-song-request-chip,
.req-mode-chip,
.song-info-chip,
.tv-current-tab-info-meta .tv-version-pill:not(.tv-version-action-pill),
.tabs-version-badges .tv-version-pill:not(.tv-version-action-pill),
.setlist-mode-anchor-meta-row .tv-version-pill,
.setlist-mode-section-meta .tv-version-pill {
  min-height: 24px;
  padding: 0 8px;
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
  color: rgba(235, 235, 235, 0.68);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.tv-meta-pill strong,
.playlist-stat-chip strong,
.playlist-rule-chip strong,
.setlist-song-meta-chip strong,
.setlist-song-request-chip strong {
  color: rgba(255, 248, 235, 0.84);
}

.tv-version-action-pill,
.tv-btn-onair,
.setlist-mode-launch-btn,
.requests-onair-slave-btn-tabs,
.playlist-content-launch-btn,
.on-air-slave-toolbar-refresh-btn {
  box-shadow: 0 10px 24px rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.14);
}

.on-air-slave-toolbar-refresh-btn {
  margin-left: auto;
  border-color: rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.36);
  background: linear-gradient(180deg, rgba(var(--songbook-accent-rgb, 255, 180, 31), 0.22), rgba(255, 255, 255, 0.05));
  color: #fff7ea;
}

.playlist-rule-source-picker-tags {
  margin: 0 0 10px;
}

.playlist-rule-source-section {
  margin-top: 8px;
}

/* 20260714 - Compact single-line topbar. */
.topbar-shell {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0;
  padding: 4px 10px !important;
  margin-bottom: 6px !important;
  border-radius: 12px !important;
}

.topbar-branding {
  min-width: 0 !important;
  flex: 0 1 auto;
}

.topbar-branding-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0;
}

.topbar-eyebrow {
  font-size: 0.58rem !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap;
}

.topbar-title-row {
  gap: 5px !important;
  white-space: nowrap;
}

.topbar-title {
  font-size: 0.82rem !important;
  line-height: 1 !important;
}

.topbar-status-dot {
  width: 7px !important;
  height: 7px !important;
}

.topbar-mode-toggle {
  flex: 0 0 auto;
  gap: 4px !important;
  padding: 2px 7px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

.topbar-mode-toggle input {
  width: 12px !important;
  height: 12px !important;
}

.topbar-user-nav {
  margin-left: auto !important;
  flex: 0 0 auto;
  gap: 7px !important;
  min-width: 0;
}

.topbar-user-pill,
.topbar-link,
.topbar-admin-btn {
  padding: 2px 0 !important;
  font-size: 0.76rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .topbar-shell {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar-shell::-webkit-scrollbar {
    display: none;
  }
}

/* Phone-only Tabs dock. Kept last so legacy mobile rules cannot override it. */
.tabviewer-page-shell .tv-card-actions .tv-btn {
  min-height: 27px;
  padding: 0 9px;
  font-size: 9px;
  gap: 4px;
}

.tabviewer-page-shell .tv-card-actions .tv-btn-icon {
  width: 29px;
  padding: 0;
  font-size: 16px;
}

@media (max-width: 560px) {
  .songbook-pwa-tabs-bar { display: none !important; }
  body.songbook-standalone-app { padding-top: 0; }
  .topbar-branding { display: none !important; }
  .main-container { width: 100%; padding: 2px; }
  .content-container,
  .right-panel,
  #dynamic-content-right { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }

  .workspace-control-strip {
    grid-template-columns: minmax(0, 1fr) 90px;
    gap: 3px;
    min-height: 34px;
    height: 34px;
    margin-bottom: 4px;
  }
  #current-song-info.workspace-song-shell {
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 3px;
    min-height: 34px;
    height: 34px;
    padding: 2px 3px;
  }
  .workspace-song-line { min-width: 0; }
  .workspace-song-line .workspace-status-label { display: none; }
  .workspace-song-title {
    display: block;
    width: 100%;
    max-width: 18ch;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff8ec;
    font-size: .68rem;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workspace-song-shell .workspace-search-shell .search-bar {
    min-height: 27px;
    height: 27px;
    padding: 2px 24px 2px 6px;
    font-size: .68rem;
  }
  .workspace-project-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 34px;
    height: 34px;
    padding: 2px 3px;
  }
  .workspace-project-shell .project-switcher-label-btn { display: none; }
  .workspace-project-shell .project-switcher-select {
    width: 100%;
    min-height: 27px;
    height: 27px;
    padding: 2px 4px;
    font-size: .66rem;
  }

  .workspace-nav-strip { min-height: 42px; height: 42px; }
  .workspace-nav-strip .header-nav-btn {
    min-height: 32px;
    height: 32px;
    margin: 0;
    padding: 2px;
  }
  .main-container.tabviewer-live-mode:not(.mobile-tab-menu-open) .workspace-nav-strip { display: none; }
  .main-container.tabviewer-live-mode.mobile-tab-menu-open .workspace-nav-strip { display: grid; }
  body.mobile-tab-menu-open .tv-floating-live-tools { display: none !important; }
  .tv-return-top-btn { display: none !important; }
  .tv-floating-live-tools {
    left: 2px;
    right: 2px;
    width: auto;
    min-height: 38px;
    height: 38px;
    bottom: calc(3px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
    gap: 3px;
    padding: 3px 4px;
    overflow: hidden;
    touch-action: manipulation;
  }
  .tv-floating-inline-label,
  #tv-floating-tempo-group { display: none !important; }
  #tab-key-chip { min-width: 72px; min-height: 27px; padding: 1px 3px; gap: 2px; }
  #tab-key-chip .tv-floating-live-box-main { min-width: 2.5ch; }
  .tv-floating-stepper { width: 19px; height: 19px; }
  .tv-floating-control-chip,
  .tv-setlist-switch-btn,
  .tv-mobile-menu-return { min-width: 29px; min-height: 27px; height: 27px; padding: 0 6px; }
  .tv-mobile-menu-return {
    display: inline-flex;
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-color: rgba(255, 191, 71, .62);
    background: rgba(255, 191, 71, .18);
  }
  .tv-mobile-menu-return svg { width: 22px; height: 22px; }
  .tabcontent-viewport { overflow-x: auto; touch-action: pan-x pan-y pinch-zoom; }
  .tabviewer-page-shell { width: 100%; margin: 0; padding: 2px 0 0; }
  .tab-content-stack.has-presentation-bar { padding-left: 2px; padding-right: 2px; }
  .tabviewer-pre,
  .tabviewer-page-shell .tabviewer-pre { padding-left: 2px; padding-right: 2px; font-size: 8px; }
}

/* Books responsive overrides must stay after the legacy layout rules. */
.bookpage-root .bookpage-source-tabbar { align-items: center; flex-wrap: nowrap; gap: 6px; padding: 3px 8px; }
.bookpage-root .bookpage-source-tabs { flex: 0 1 auto; flex-wrap: nowrap; overflow: visible; }
.bookpage-root .bookpage-source-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; width: auto; height: 36px; min-height: 36px; padding: 5px 11px; }
.bookpage-root .bookpage-deck-sort-controls { margin-left: 0; }
.bookpage-root .bookpage-columns-button,
.bookpage-root .bookpage-add-song-button { flex: 0 0 auto; min-width: 36px; width: 36px; height: 34px; padding: 0; font-size: 1.05rem; }
.book-deck-line-artist { grid-column: 1; grid-row: 2; color: #ffc95f; font-size: .84rem; font-weight: 750; line-height: 1.2; }
.book-deck-line-meta { grid-row: 3; }
.book-deck-actions { grid-row: 1 / span 3; }

@media (max-width: 980px) {
  .bookpage-root .bookpage-source-tabbar { width: 100%; overflow: hidden; gap: 4px; padding-inline: 2px; }
  .bookpage-root .bookpage-source-tabs { flex: 0 0 auto; overflow: visible; }
  .bookpage-root .bookpage-source-tab { min-width: 34px; height: 32px; min-height: 32px; padding: 3px 8px; }
  .bookpage-root .bookpage-deck-sort-controls { flex: 1 1 auto; min-width: 0; gap: 3px; }
  .bookpage-root .bookpage-deck-sort-select { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; min-height: 32px; }
  .bookpage-root .bookpage-columns-button { display: none !important; }
  .bookpage-root .bookpage-add-song-button { min-width: 32px; width: 32px; height: 32px; }
  .book-deck-card, .deck-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 3px 6px; padding: 7px 8px; }
  .book-deck-line-main { grid-column: 1; grid-row: 1; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .book-deck-line-artist { grid-column: 1 / -1; grid-row: 2; color: #ffc95f; }
  .book-deck-line-meta { display: none; }
  .book-deck-actions, .deck-actions { position: static; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; width: auto; flex-wrap: nowrap; gap: 3px; margin: 0; }
  .book-deck-actions .sp-btn, .deck-card .sp-btn, .sp-btn.bookpage-playlist-plus-btn { min-width: 25px !important; width: 25px !important; min-height: 25px !important; height: 25px !important; padding: 0 !important; font-size: .7rem; }
}

/* Definitive Books/Tabs rules: keep at EOF. */
#current-song-title-artist.workspace-song-title { padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff8ec; box-shadow: none; text-align: left; }
.bookpage-mobile-label { display: none; }
.bookpage-root .bookpage-source-tabbar { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-start; gap: 5px; min-height: 44px; padding: 3px 8px; }
.bookpage-root .bookpage-source-tabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 3px; overflow: visible; }
.bookpage-root .bookpage-source-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: auto; height: 34px; min-height: 34px; padding: 5px 10px; }
.bookpage-root .bookpage-source-tab strong { font-size: .78rem; white-space: nowrap; }
.bookpage-root .bookpage-deck-sort-controls { display: flex !important; flex: 0 1 320px; width: auto; min-width: 180px; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 0; }
.bookpage-root .bookpage-deck-sort-controls.hidden { display: none !important; }
.bookpage-root .bookpage-deck-sort-label { margin: 0; font-size: .68rem; white-space: nowrap; }
.bookpage-root .bookpage-deck-sort-select { flex: 1 1 auto; width: auto; min-width: 110px; height: 34px; min-height: 34px; }
.bookpage-root .bookpage-deck-sort-direction { flex: 0 0 34px; width: 34px; height: 34px; min-height: 34px; padding: 0; }
.bookpage-root .bookpage-columns-button { margin-left: auto; }
.tv-song-title { font-size: clamp(20px, 2vw, 28px); }
.tv-song-live-actions { gap: 4px; }
.tv-song-live-actions .tv-btn { min-height: 25px; padding: 4px 7px; font-size: 9px; }
@media (max-width: 560px) {
  .bookpage-desktop-label { display: none; }
  .bookpage-mobile-label { display: inline; }
  .bookpage-root .bookpage-source-tabbar { gap: 3px; min-height: 36px; height: 36px; padding: 2px; overflow: hidden; }
  .bookpage-root .bookpage-source-tab { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; }
  .bookpage-root .bookpage-deck-sort-controls { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .bookpage-root .bookpage-deck-sort-label { display: none; }
  .bookpage-root .bookpage-deck-sort-select { min-width: 0; height: 30px; min-height: 30px; padding: 2px 4px; }
  .bookpage-root .bookpage-deck-sort-direction, .bookpage-root .bookpage-add-song-button { flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; }
  .workspace-nav-strip, .tv-floating-live-tools { top: auto !important; bottom: calc(3px + env(safe-area-inset-bottom, 0px)) !important; min-height: 42px !important; height: 42px !important; margin: 0 !important; }
  .tv-floating-live-tools { justify-content: flex-start !important; gap: 2px !important; padding: 4px !important; }
  #tab-key-chip { min-width: 64px; border-radius: 8px; }
  .tv-floating-stepper, .tv-floating-control-chip, .tv-setlist-switch-btn { margin: 0 !important; border-radius: 8px; }
  .tv-mobile-menu-return.header-nav-btn { display: inline-flex; margin: 0 0 0 auto !important; flex: 0 0 45px; width: 45px; min-width: 45px; height: 32px; min-height: 32px; border-radius: 9px; font-size: .62rem; }
}
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.bookpage-book-icon { display: block; width: 19px; height: 19px; }
.public-hide-chords .public-chord-line { display: none; }
@media (max-width: 560px) {
  .workspace-nav-strip, .tv-floating-live-tools {
    position: fixed !important;
    left: 4px !important;
    right: 4px !important;
    width: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  .workspace-project-shell .project-switcher-select {
    height: 27px;
    min-height: 27px;
    padding: 2px 18px 2px 5px;
    border-radius: 7px;
    font-size: .65rem;
    line-height: 1;
  }
  .workspace-project-shell .project-switcher-select option {
    font-size: .78rem;
    padding: 3px;
  }
  .tv-floating-inline-group { gap: 2px; }
  .tv-floating-live-box { padding: 2px; border-radius: 8px; }
  .tv-floating-live-box-main { min-width: 20px; }
  .tv-floating-stepper { border-radius: 6px; }
}

/* Final toolbar geometry. */
.bookpage-root .bookpage-columns-button { margin-left: 0 !important; }
.bookpage-root .bookpage-source-tabbar > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.bookpage-root .bookpage-source-tabbar { align-content: center !important; }
@media (min-width: 561px) {
  .bookpage-root .bookpage-source-tabbar { width: max-content; max-width: 100%; }
}

/* Tempo is presented in song headers, not in playback controls. */
#tv-floating-tempo-group { display:none !important; }

/* Final desktop controls and project hierarchy. */
.tv-desktop-zoom-control { display:none; }
@media (min-width:1101px) {
  .tv-desktop-zoom-control { display:grid; }
  body:not(.songbook-pwa-embed) .tv-view-nav-shell { display:none !important; }
  body:not(.songbook-pwa-embed) .project-switcher-select option { color:#f4ead9 !important; background:#1b1b1b !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools { position:fixed !important; left:6px !important; right:auto !important; bottom:6px !important; width:363px !important; max-width:363px !important; height:132px !important; min-height:132px !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; grid-template-rows:30px 30px 30px 30px !important; gap:3px !important; padding:4px !important; box-sizing:border-box !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-floating-inline-group { grid-column:1 / -1; grid-row:1; justify-self:stretch; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mode-icon-btn { grid-column:1; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-notation-mode-btn { grid-column:2; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-setlist-switch-controls { grid-column:3; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mobile-menu-return { grid-column:4; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-fine-autoscroll { display:flex !important; position:fixed !important; z-index:3100; left:12px !important; right:auto !important; bottom:76px !important; width:351px !important; height:26px !important; }
  body:not(.songbook-pwa-embed) .tv-desktop-zoom-control { grid-column:1 / -1; grid-row:4; grid-template-columns:38px minmax(0,1fr) 42px; align-items:center; gap:5px; color:rgba(255,255,255,.72); font-size:10px; font-weight:800; }
  body:not(.songbook-pwa-embed) .tv-desktop-zoom-control input { width:100%; accent-color:#67b6c7; }
  body:not(.songbook-pwa-embed) .tv-desktop-zoom-control output { text-align:right; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs { position:fixed !important; z-index:1100; left:381px; right:8px; top:4px; min-height:34px; padding:3px 5px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:rgba(18,18,18,.97); box-sizing:border-box; }
  body:not(.songbook-pwa-embed) .playlist-workspace .playlist-editor-shell { padding-top:42px; }
  body:not(.songbook-pwa-embed) .setlist-section-tabs { position:sticky; z-index:50; top:0; background:#151515; }
}

/* Desktop Tabs has its own full-width autoscroll row.  The compact control
   injected for tablet navigation must never occupy the first desktop row. */
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) #tv-floating-live-tools > .tv-horizontal-scroll-shell:not(.tv-desktop-autoscroll-control) {
    display:none !important;
  }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools > .tv-desktop-autoscroll-control {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    display:flex !important;
  }
}

/* Keep the desktop Tabs controls in their own cells without touching. */
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) #tv-floating-live-tools {
    grid-template-columns:minmax(0,1fr) 30px 30px minmax(64px,.58fr) !important;
    column-gap:7px !important;
  }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mode-icon-btn,
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-notation-mode-btn {
    width:30px !important;
    min-width:30px !important;
    padding:0 !important;
  }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-setlist-switch-controls {
    width:auto !important;
    min-width:0 !important;
    margin-left:0 !important;
  }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-setlist-switch-btn {
    width:29px !important;
    min-width:29px !important;
  }
}

/* Setlist mode selector belongs to the section-action row. */
.tv-setlist-mode-shell .tv-card-heading { min-width:0; width:100%; }
.tv-setlist-mode-shell .tv-setlist-name-sections-row { width:100%; gap:6px; overflow:hidden; }
.tv-setlist-mode-shell .tv-setlist-name-sections-row > strong {
  flex:0 1 145px;
  min-width:60px;
}
.tv-setlist-mode-shell .tv-setlist-section-tabs {
  flex:1 1 auto;
  min-width:0;
}
.tv-setlist-mode-shell #setlist-mode-top-btn {
  flex:0 0 auto;
  min-height:27px;
  padding:3px 8px;
  font-size:8px;
  white-space:nowrap;
}

/* Desktop page heading and secondary navigation v59. */
.desktop-page-heading { display:none; }
@media (min-width:1101px) {
  .desktop-page-heading {
    display:flex !important;
    position:fixed;
    z-index:1040;
    top:88px;
    left:420px;
    right:8px;
    height:30px;
    align-items:center;
    box-sizing:border-box;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:9px 9px 0 0;
    background:rgba(18,18,18,.98);
  }
  .desktop-page-heading h1 {
    margin:0;
    color:#f4ead9;
    font-size:.82rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  body.songbook-pwa-embed .desktop-page-heading { left:8px; }
  .bookpage-root,
  .requests-page-shell,
  .tabviewer-page-shell,
  .account-page-shell,
  .projects-page-shell,
  .playlist-workspace { padding-top:126px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs,
  body.songbook-pwa-embed .playlist-workspace-tabs {
    position:fixed !important;
    z-index:1041 !important;
    top:118px !important;
    left:420px !important;
    right:8px !important;
    height:29px !important;
    min-height:29px !important;
    padding:2px 5px !important;
    gap:3px !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-top:0 !important;
    border-radius:0 0 9px 9px !important;
    background:rgba(18,18,18,.98) !important;
  }
  body.songbook-pwa-embed .playlist-workspace-tabs { left:8px !important; }
  .playlist-workspace-tabs .tv-btn {
    height:23px !important;
    min-height:23px !important;
    padding:2px 8px !important;
    border-radius:6px !important;
    font-size:.6rem !important;
  }
  .playlist-workspace .playlist-editor-shell { padding-top:28px !important; }
  .account-page-toolbar,
  .project-editor-nav,
  .requests-tabs-shell,
  .bookpage-source-tabbar,
  .tv-setlist-section-tabs {
    border-radius:8px !important;
  }
}

.tv-version-icon-action { width:24px; min-width:24px; padding:0 !important; font-size:.82rem !important; }
@media (min-width:561px) {
  .tv-current-tab-shell .tabs-version-main { grid-template-columns:minmax(0,1fr) !important; }
  .tv-current-tab-shell .tabs-list.tv-versions-list .tab-version-item { grid-template-columns:minmax(0,1fr) auto !important; }
}

/* Desktop toolbar v55: compact fixed footer using the standard horizontal controls. */
.tv-desktop-autoscroll-control { display:none; }
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) .pages-container,
  body:not(.songbook-pwa-embed) .playlist-workspace,
  body:not(.songbook-pwa-embed) .playlist-shell { margin-top:0 !important; padding-top:0 !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs { top:0 !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace .playlist-editor-shell { padding-top:36px !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools { top:auto !important; bottom:6px !important; width:400px !important; height:98px !important; min-height:98px !important; grid-template-columns:minmax(0,1fr) 32px 32px minmax(0,1fr) !important; grid-template-rows:28px 28px 28px !important; padding:4px 6px !important; gap:2px 5px !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-floating-inline-group { grid-column:1; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mode-icon-btn { grid-column:2; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-notation-mode-btn { grid-column:3; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-setlist-switch-controls { grid-column:4; grid-row:1; justify-self:end; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mobile-menu-return { display:none !important; }
  body:not(.songbook-pwa-embed) .tv-desktop-autoscroll-control { grid-column:1 / -1; grid-row:2; display:flex !important; width:100%; min-width:0; height:27px; margin:0 !important; padding:0 7px !important; box-sizing:border-box; }
  body:not(.songbook-pwa-embed) .tv-desktop-autoscroll-control output { flex:0 0 25px; color:rgba(255,255,255,.7); font-size:10px; text-align:right; }
  body:not(.songbook-pwa-embed) .tv-desktop-zoom-control { grid-column:1 / -1; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-fine-autoscroll { display:none !important; }
  body:not(.songbook-pwa-embed) .project-switcher-select { color-scheme:dark !important; border:1px solid rgba(255,255,255,.12) !important; background:#242424 !important; color:#f7f0e5 !important; border-radius:9px !important; box-shadow:none !important; }
  body:not(.songbook-pwa-embed) .topbar-options-menu { z-index:10000 !important; }
}

/* Smaller, collision-free More Tabs cards on desktop and tablet. */
@media (min-width:561px) {
  .tv-current-tab-shell .tabs-list.tv-versions-list { gap:5px !important; }
  .tv-current-tab-shell .tabs-list.tv-versions-list .tab-version-item { min-height:0 !important; padding:6px 8px !important; border-radius:9px !important; display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:5px 8px !important; align-items:center !important; }
  .tv-current-tab-shell .tabs-version-main { min-width:0 !important; padding:0 !important; }
  .tv-current-tab-shell .tabs-version-primary { min-width:0 !important; }
  .tv-current-tab-shell .tabs-version-name { font-size:.82rem !important; line-height:1.1 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tv-current-tab-shell .tabs-version-meta { font-size:.66rem !important; line-height:1.1 !important; }
  .tv-current-tab-shell .tab-version-actions { display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; gap:3px !important; }
  .tv-current-tab-shell .tab-version-actions button { min-height:23px !important; height:23px !important; padding:2px 6px !important; font-size:.6rem !important; line-height:1 !important; margin:0 !important; }
}

@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) .topbar-options-menu { z-index:9000 !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs { left:420px !important; right:8px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace .playlist-shell,
  body:not(.songbook-pwa-embed) .playlist-workspace .playlist-editor-shell,
  body:not(.songbook-pwa-embed) .workspace-inline-editor,
  body:not(.songbook-pwa-embed) .workspace-inline-editor-panel,
  body:not(.songbook-pwa-embed) .workspace-inline-editor-panel > .playlist-modal-content,
  body:not(.songbook-pwa-embed) .playlist-autosync-modal-modern,
  body:not(.songbook-pwa-embed) .playlist-autosync-shell,
  body:not(.songbook-pwa-embed) .playlist-autosync-body { width:100% !important; max-width:none !important; box-sizing:border-box !important; }
  body:not(.songbook-pwa-embed) .workspace-inline-editor-panel > .playlist-modal-content { margin:0 !important; }
  body:not(.songbook-pwa-embed) .playlist-autosync-modal-modern .auto-sync-row { width:100% !important; max-width:none !important; }
  body:not(.songbook-pwa-embed) .workspace-current-card,
  body:not(.songbook-pwa-embed) .tabviewer-page-shell > .tv-top-grid { font-size:90% !important; }
  body:not(.songbook-pwa-embed) .workspace-current-card .tv-btn,
  body:not(.songbook-pwa-embed) .tabviewer-page-shell > .tv-top-grid .tv-btn { min-height:26px !important; padding:3px 7px !important; font-size:.67rem !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell > .tv-top-grid .tv-song-title,
  body:not(.songbook-pwa-embed) .tabviewer-page-shell > .tv-top-grid .tv-current-tab-info-title { font-size:calc(1rem - 5px) !important; line-height:1.2 !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools { top:164px !important; bottom:auto !important; left:6px !important; width:400px !important; max-width:400px !important; border:1px solid rgba(255,255,255,.15) !important; border-radius:11px !important; background:rgba(20,20,20,.98) !important; box-shadow:0 8px 22px rgba(0,0,0,.3) !important; backdrop-filter:none !important; filter:none !important; }
  body:not(.songbook-pwa-embed) #tv-fine-autoscroll { top:198px !important; bottom:auto !important; left:12px !important; width:388px !important; filter:none !important; opacity:1 !important; backdrop-filter:none !important; }
  body:not(.songbook-pwa-embed) #tv-fine-autoscroll *,
  body:not(.songbook-pwa-embed) #tv-floating-live-tools * { backdrop-filter:none !important; }
}

/* Final desktop toolbar placement v55. */
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) #tv-floating-live-tools { top:auto !important; bottom:6px !important; width:400px !important; max-width:400px !important; height:98px !important; min-height:98px !important; grid-template-columns:minmax(0,1fr) 32px 32px minmax(0,1fr) !important; grid-template-rows:28px 28px 28px !important; padding:4px 6px !important; gap:2px 5px !important; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-floating-inline-group { grid-column:1; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mode-icon-btn { grid-column:2; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-notation-mode-btn { grid-column:3; grid-row:1; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-setlist-switch-controls { grid-column:4; grid-row:1; justify-self:end; }
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-mobile-menu-return { display:none !important; }
  body:not(.songbook-pwa-embed) .tv-desktop-autoscroll-control { grid-column:1 / -1; grid-row:2; display:flex !important; }
  body:not(.songbook-pwa-embed) .tv-desktop-zoom-control { grid-column:1 / -1; grid-row:3; }
  body:not(.songbook-pwa-embed) #tv-fine-autoscroll { display:none !important; }
}

@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) .content-container,
  body:not(.songbook-pwa-embed) .right-panel,
  body:not(.songbook-pwa-embed) #dynamic-content-right { margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
  .tv-current-tab-shell .tabs-list.tv-versions-list .tab-version-item { grid-template-columns:minmax(0,1fr) minmax(118px,auto) !important; }
  .tv-current-tab-shell .tabs-version-main { display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center !important; }
  .tv-current-tab-shell .tabs-version-badges { display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
  .tv-current-tab-shell .tabs-actions { display:flex !important; flex-wrap:wrap !important; justify-content:flex-end !important; align-items:center !important; gap:3px !important; min-width:0 !important; }
  .tv-current-tab-shell .tabs-actions button { min-height:22px !important; height:22px !important; padding:2px 5px !important; margin:0 !important; font-size:.58rem !important; line-height:1 !important; }
}

/* Compact desktop Song card in the Tabs rail. */
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card { padding:8px 10px !important; border-radius:11px !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card > .tv-card-header { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:5px !important; margin:0 0 5px !important; padding:0 !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card .tv-card-heading { flex:0 0 auto !important; min-width:0 !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card .tv-info-kicker { font-size:.58rem !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-live-actions { display:flex !important; flex:1 1 auto !important; flex-wrap:nowrap !important; justify-content:flex-end !important; width:auto !important; min-width:0 !important; gap:3px !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-live-actions .tv-btn { flex:0 1 auto !important; width:auto !important; min-width:0 !important; min-height:23px !important; height:23px !important; padding:2px 6px !important; font-size:clamp(7px,.55vw,9px) !important; letter-spacing:.02em !important; line-height:1 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-title { margin:3px 0 5px !important; font-size:.74rem !important; line-height:1.15 !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card .tv-meta-pill-row { gap:3px !important; margin:0 !important; }
  body:not(.songbook-pwa-embed) .tabviewer-page-shell .tv-song-card .tv-meta-pill { min-height:20px !important; padding:2px 6px !important; font-size:.56rem !important; }
}

/* Desktop content tabs sit just below the 34px main menu. */
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs { top:40px !important; min-height:30px !important; height:30px !important; padding:2px 4px !important; gap:3px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs .tv-btn { min-height:24px !important; height:24px !important; padding:2px 8px !important; border-radius:7px !important; font-size:.62rem !important; letter-spacing:.04em !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace .playlist-editor-shell { padding-top:74px !important; }
  body:not(.songbook-pwa-embed) .account-page-shell,
  body:not(.songbook-pwa-embed) .projects-page-shell.project-editor-mode { padding-top:40px !important; }
  body:not(.songbook-pwa-embed) .account-page-toolbar,
  body:not(.songbook-pwa-embed) .project-editor-nav { min-height:30px !important; gap:3px !important; }
  body:not(.songbook-pwa-embed) .account-tab-btn,
  body:not(.songbook-pwa-embed) .project-editor-nav-btn { min-height:26px !important; height:26px !important; padding:3px 8px !important; border-radius:7px !important; font-size:.64rem !important; }
}

/* Final desktop page headings and secondary tabs v59. */
@media (min-width:1101px) {
  .desktop-page-heading { display:flex !important; position:fixed; z-index:1040; top:88px; left:420px; right:8px; height:30px; align-items:center; box-sizing:border-box; padding:0 10px; border:1px solid rgba(255,255,255,.09); border-radius:9px 9px 0 0; background:rgba(18,18,18,.98); }
  .desktop-page-heading h1 { margin:0; color:#f4ead9; font-size:.82rem; line-height:1; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
  body.songbook-pwa-embed .desktop-page-heading { left:8px; }
  .bookpage-root, .requests-page-shell, .tabviewer-page-shell, .account-page-shell, .projects-page-shell, .playlist-workspace { padding-top:126px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs,
  body.songbook-pwa-embed .playlist-workspace-tabs { position:fixed !important; z-index:1041 !important; top:118px !important; left:420px !important; right:8px !important; height:29px !important; min-height:29px !important; padding:2px 5px !important; gap:3px !important; border:1px solid rgba(255,255,255,.09) !important; border-top:0 !important; border-radius:0 0 9px 9px !important; background:rgba(18,18,18,.98) !important; }
  body.songbook-pwa-embed .playlist-workspace-tabs { left:8px !important; }
  .playlist-workspace-tabs .tv-btn { height:23px !important; min-height:23px !important; padding:2px 8px !important; border-radius:6px !important; font-size:.6rem !important; }
  .playlist-workspace .playlist-editor-shell { padding-top:28px !important; }
  .account-page-toolbar, .project-editor-nav, .requests-tabs-shell, .bookpage-source-tabbar, .tv-setlist-section-tabs { border-radius:8px !important; }
}

/* Unified settings pages v60: compact, structured profile and project editors. */
@media (min-width:561px) {
  .account-page-shell,
  .projects-page-shell {
    gap:8px !important;
    color:#f3ede4;
    font-size:.82rem;
  }
  .account-page-toolbar,
  .project-editor-nav {
    min-height:34px !important;
    padding:3px 5px !important;
    gap:4px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:9px !important;
    background:rgba(18,18,18,.96) !important;
    box-shadow:none !important;
  }
  .account-tabs { gap:3px !important; flex-wrap:nowrap !important; min-width:0; }
  .account-tab-btn,
  .project-editor-nav-btn {
    min-height:27px !important;
    height:27px !important;
    padding:3px 9px !important;
    border-radius:6px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.035) !important;
    color:rgba(255,255,255,.72) !important;
    box-shadow:none !important;
    font-size:.66rem !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    white-space:nowrap;
  }
  .account-tab-btn.is-active,
  .project-editor-nav-btn.active {
    border-color:rgba(var(--songbook-accent-rgb),.48) !important;
    background:rgba(var(--songbook-accent-rgb),.14) !important;
    color:color-mix(in srgb,var(--songbook-accent) 76%,#fff 24%) !important;
    box-shadow:inset 0 0 0 1px rgba(var(--songbook-accent-rgb),.08) !important;
  }
  .account-toolbar-save-btn,
  .project-editor-save-btn {
    min-height:27px !important;
    height:27px !important;
    padding:3px 10px !important;
    border-radius:6px !important;
    font-size:.66rem !important;
  }
  .account-profile-card,
  .project-block-card {
    padding:10px !important;
    gap:8px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:11px !important;
    background:linear-gradient(180deg,rgba(38,38,38,.92),rgba(25,25,25,.94)) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.16) !important;
  }
  .account-profile-card > .tv-card-header,
  .project-block-card-head {
    min-height:0 !important;
    margin:0 0 3px !important;
    padding:0 0 7px !important;
    gap:7px !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    align-items:flex-start !important;
  }
  .account-profile-card .tv-card-kicker,
  .project-editor-kicker {
    font-size:.56rem !important;
    letter-spacing:.13em !important;
  }
  .account-profile-card .tv-card-heading,
  .project-block-card-head h4,
  .project-editor-toolbar h3 {
    margin:2px 0 0 !important;
    color:#f6f0e8 !important;
    font-size:.8rem !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }
  .account-profile-note,
  .project-section-note,
  .project-field-help,
  .project-toggle-copy small {
    font-size:.67rem !important;
    line-height:1.32 !important;
    color:rgba(242,235,225,.58) !important;
  }
  .account-profile-row {
    min-height:29px !important;
    padding:5px 7px !important;
    border-radius:7px !important;
    background:rgba(255,255,255,.025) !important;
  }
  .account-profile-row span { font-size:.62rem !important; }
  .account-profile-row strong { font-size:.76rem !important; }
  .account-actions-row-modern { gap:5px !important; margin-top:2px !important; }
  .account-actions-row-modern .btn-pages,
  .project-block-card .btn-pages,
  .project-richtext-toolbar-btn {
    min-height:27px !important;
    height:27px !important;
    padding:3px 8px !important;
    border-radius:6px !important;
    font-size:.65rem !important;
  }
  .account-offline-card { margin-top:0 !important; }
  .account-offline-auto-status {
    margin:2px 0 !important;
    padding:5px 8px !important;
    font-size:.68rem !important;
  }
  .account-theme-grid {
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr)) !important;
    gap:5px !important;
    margin-top:3px !important;
  }
  .account-theme-chip {
    min-height:29px !important;
    padding:4px 7px !important;
    border-radius:7px !important;
    font-size:.68rem !important;
    font-weight:700 !important;
  }
  .account-theme-dot { width:11px !important; height:11px !important; }
  .account-display-option-card {
    gap:7px !important;
    margin-top:7px !important;
    padding:9px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:9px !important;
    background:rgba(10,10,10,.20) !important;
  }
  .account-display-title { margin:1px 0 3px !important; font-size:.76rem !important; }
  .account-display-choice-grid { gap:5px !important; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important; }
  .account-display-choice {
    min-height:42px !important;
    padding:7px 8px !important;
    gap:7px !important;
    border-radius:7px !important;
    font-size:.7rem !important;
  }
  .account-display-choice small { font-size:.63rem !important; }
  .project-editor-toolbar {
    min-height:38px !important;
    padding:6px 8px !important;
    border:1px solid rgba(255,255,255,.11) !important;
    border-radius:9px !important;
    background:rgba(27,27,27,.96) !important;
  }
  .project-editor-stack { gap:8px !important; }
  .project-form-grid { gap:7px !important; }
  .project-field:not(.project-field-embedded) {
    gap:4px !important;
    padding:8px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:8px !important;
    background:rgba(10,10,10,.16) !important;
    box-sizing:border-box;
  }
  .project-field > span,
  .project-field-heading > span {
    color:rgba(255,255,255,.78) !important;
    font-size:.64rem !important;
    line-height:1.1 !important;
    font-weight:800 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase;
  }
  .project-input {
    min-height:30px !important;
    padding:5px 7px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:6px !important;
    background:#202020 !important;
    color:#f4eee6 !important;
    font-size:.72rem !important;
  }
  .project-textarea { min-height:72px !important; line-height:1.3 !important; resize:vertical; }
  .project-richtext-toolbar {
    gap:3px !important;
    padding:3px !important;
    border-radius:6px !important;
    background:rgba(255,255,255,.025) !important;
  }
  .project-richtext-toolbar-label { font-size:.58rem !important; }
  .project-toggle-card {
    min-height:0 !important;
    padding:7px 8px !important;
    gap:7px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:7px !important;
    background:rgba(255,255,255,.025) !important;
  }
  .project-toggle-copy strong { font-size:.7rem !important; }
  .project-settings-subcard { display:grid !important; gap:7px !important; }
  .project-field-embedded { display:grid; gap:4px; padding:0 !important; border:0 !important; background:none !important; }
  .project-inbox-save-actions { gap:5px !important; margin:0 0 3px !important; }
  .project-playlist-row-chip {
    min-height:34px !important;
    padding:5px 7px !important;
    border-radius:7px !important;
    font-size:.68rem !important;
  }
  .project-media-row { gap:8px !important; }
  .project-image-preview { width:76px !important; height:76px !important; border-radius:8px !important; }
  .account-default-permissions-body { gap:7px !important; }
  .account-default-permission-group {
    gap:6px !important;
    padding:8px !important;
    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:9px !important;
    background:rgba(20,20,20,.92) !important;
  }
  .account-default-permission-group h3 { font-size:.76rem !important; }
  .tab-permissions-summary {
    min-height:34px !important;
    padding:6px 8px !important;
    border-radius:7px !important;
    border-color:rgba(255,255,255,.11) !important;
    background:rgba(255,255,255,.025) !important;
  }
  .tab-permissions-summary-label { font-size:.6rem !important; }
  .tab-permissions-summary-text { font-size:.68rem !important; }
  .tab-permissions-panel { padding:7px !important; }
}

@media (min-width:561px) and (max-width:1100px) {
  .account-page-shell > .desktop-page-heading,
  .projects-page-shell > .desktop-page-heading {
    display:flex !important;
    position:relative !important;
    inset:auto !important;
    height:34px;
    align-items:center;
    padding:0 9px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px 9px 0 0;
    background:rgba(18,18,18,.96);
  }
  .account-page-shell > .desktop-page-heading h1,
  .projects-page-shell > .desktop-page-heading h1 { margin:0; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; }
  .account-page-toolbar,
  .projects-page-shell.project-editor-mode .project-editor-nav { margin-top:-9px !important; border-radius:0 0 9px 9px !important; padding-top:7px !important; }
}

/* Desktop active-page banner v61, aligned with the menu row. */
@media (min-width:1101px) {
  .desktop-page-heading {
    top:35px !important;
    height:60px !important;
    padding:8px 16px 8px 18px !important;
    flex-direction:column;
    align-items:flex-start !important;
    justify-content:center;
    gap:4px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11) !important;
    border-left:3px solid var(--songbook-accent) !important;
    border-radius:10px !important;
    background:linear-gradient(105deg,rgba(var(--songbook-accent-rgb),.12),rgba(31,31,31,.98) 34%,rgba(20,20,20,.98)) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.18) !important;
  }
  .desktop-page-heading::before {
    content:"Current page";
    color:rgba(var(--songbook-accent-rgb),.72);
    font-size:.54rem;
    line-height:1;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .desktop-page-heading h1 {
    font-size:1rem !important;
    letter-spacing:.045em !important;
    text-transform:none !important;
  }
  .bookpage-root, .requests-page-shell, .tabviewer-page-shell, .account-page-shell, .projects-page-shell, .playlist-workspace { padding-top:136px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs,
  body.songbook-pwa-embed .playlist-workspace-tabs {
    top:101px !important;
    height:29px !important;
    min-height:29px !important;
    border-top:1px solid rgba(255,255,255,.09) !important;
    border-radius:8px !important;
  }
  .playlist-workspace .playlist-editor-shell { padding-top:0 !important; }
}

/* Final restrained desktop page title v62. */
@media (min-width:1101px) {
  .desktop-page-heading {
    top:0 !important;
    height:42px !important;
    padding:6px 12px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.10) !important;
    border-radius:0 !important;
    background:#1b1b1b !important;
    box-shadow:none !important;
  }
  .desktop-page-heading::before { display:none !important; content:none !important; }
  .desktop-page-heading h1 { margin:0 !important; color:#f2ece3 !important; font-size:.86rem !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.035em !important; text-transform:none !important; }
  .bookpage-root, .requests-page-shell, .tabviewer-page-shell, .account-page-shell, .projects-page-shell, .playlist-workspace { padding-top:86px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs,
  body.songbook-pwa-embed .playlist-workspace-tabs { top:47px !important; }
  .account-display-choice-grid { grid-template-columns:minmax(0,1fr) !important; }
}

/* Desktop page titles use the same card language as Editing Project v63. */
@media (min-width:1101px) {
  .desktop-page-heading {
    top:10px !important;
    left:448px !important;
    right:28px !important;
    height:52px !important;
    padding:7px 12px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:2px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:10px !important;
    background:#191919 !important;
  }
  body.songbook-pwa-embed .desktop-page-heading { left:28px !important; }
  .desktop-page-heading > span {
    display:block;
    color:var(--songbook-accent,#d3a24b);
    font-size:.56rem;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .desktop-page-heading h1 { font-size:.88rem !important; line-height:1.05 !important; }
  .bookpage-root, .requests-page-shell, .tabviewer-page-shell, .account-page-shell, .projects-page-shell, .playlist-workspace { padding-top:74px !important; }
  .projects-page-shell.project-editor-mode { padding-top:12px !important; }
  .projects-page-shell.project-editor-mode > .desktop-page-heading { display:none !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs,
  body.songbook-pwa-embed .playlist-workspace-tabs { top:68px !important; left:448px !important; right:28px !important; }
  body.songbook-pwa-embed .playlist-workspace-tabs { left:28px !important; }
  .playlist-workspace { padding-top:104px !important; }
}

/* Shared left edge and guaranteed Tabs page heading v66. */
@media (min-width:1101px) {
  .desktop-page-heading,
  body:not(.songbook-pwa-embed) .tabviewer-page-shell > .desktop-page-heading { display:flex !important; visibility:visible !important; opacity:1 !important; left:420px !important; }
  body.songbook-pwa-embed .desktop-page-heading,
  body.songbook-pwa-embed .tabviewer-page-shell > .desktop-page-heading { left:8px !important; }
  body:not(.songbook-pwa-embed) .playlist-workspace-tabs { left:420px !important; }
  body.songbook-pwa-embed .playlist-workspace-tabs { left:8px !important; }
  .projects-page-shell.project-editor-mode > .desktop-page-heading { display:none !important; }
}

@media (min-width:561px) and (max-width:1100px) {
  .account-display-choice-grid { grid-template-columns:minmax(0,1fr) !important; }
  .tv-top-grid > .tv-notes-shell { grid-column:1 / -1; }
}

/* Tabs uses its song presentation as the page heading on desktop. */
@media (min-width:1101px) {
  .tabviewer-page-shell { padding-top:12px !important; }
}

/* Manual On Air controls share the song banner in the regular tab view. */
.tab-content-presentation-bar .setlist-mode-anchor-title-row {
    flex-wrap: wrap;
    align-items: center;
}
.tab-content-presentation-bar .tab-content-on-air-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
}
.tab-content-presentation-bar .tab-content-on-air-actions[hidden] {
    display: none;
}

/* Five deliberate accent palettes. Sunset keeps its established appearance. */
body.theme-accent-teal { --songbook-accent:#66dbd0; --songbook-accent-strong:#259d99; --songbook-accent-rgb:102,219,208; --songbook-accent-contrast:#071715; }
body.theme-accent-blue { --songbook-accent:#91b8ff; --songbook-accent-strong:#5479e5; --songbook-accent-rgb:145,184,255; --songbook-accent-contrast:#081329; }
body.theme-accent-violet { --songbook-accent:#cbb0ff; --songbook-accent-strong:#9067d7; --songbook-accent-rgb:203,176,255; --songbook-accent-contrast:#180d29; }
body.theme-accent-rose { --songbook-accent:#ffa5ca; --songbook-accent-strong:#d95c98; --songbook-accent-rgb:255,165,202; --songbook-accent-contrast:#280a19; }
.theme-accent-preview-teal { --preview-accent:#66dbd0; --preview-accent-strong:#259d99; }
.theme-accent-preview-blue { --preview-accent:#91b8ff; --preview-accent-strong:#5479e5; }
.theme-accent-preview-violet { --preview-accent:#cbb0ff; --preview-accent-strong:#9067d7; }
.theme-accent-preview-rose { --preview-accent:#ffa5ca; --preview-accent-strong:#d95c98; }

body.dark-mode:not(.theme-accent-sunset)[class*="theme-accent-"] {
  --bar-text-color:var(--songbook-accent);
  --header-text-color:var(--songbook-accent);
  --button-bg-color:var(--songbook-accent);
  --button-text-color:var(--songbook-accent-contrast);
  --button-hover-bg-color:var(--songbook-accent-strong);
  --link-color:var(--songbook-accent);
  --link-hover-color:var(--songbook-accent-strong);
  --tab-btn-bg-color:var(--songbook-accent);
  --tab-btn-text-color:var(--songbook-accent-contrast);
  --tab-btn-hover-bg-color:var(--songbook-accent-strong);
  --tab-item-hover-text-color:var(--songbook-accent);
  --accent-color:var(--songbook-accent);
  --accent:var(--songbook-accent);
}
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-permission-source-list-head span,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .book-deck-line-artist,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .playlist-current-kicker,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-current-kicker,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .project-section-label {
  color:color-mix(in srgb,var(--songbook-accent) 78%,white 22%) !important;
}
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-load-create-btn,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .setlist-reorder-lock-btn.is-unlocked {
  border-color:rgba(var(--songbook-accent-rgb),.58) !important;
  background:linear-gradient(135deg,var(--songbook-accent),var(--songbook-accent-strong)) !important;
  color:var(--songbook-accent-contrast) !important;
}
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn.is-active .header-nav-btn-copy { color:var(--songbook-accent-contrast) !important; }
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-nav-strip .header-nav-btn:hover,
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-load-create-btn:hover { border-color:rgba(var(--songbook-accent-rgb),.68) !important; }
body:not(.theme-accent-sunset)[class*="theme-accent-"] .workspace-load-create-btn { box-shadow:0 3px 13px rgba(var(--songbook-accent-rgb),.12); }
body:not(.theme-accent-sunset)[class*="theme-accent-"] * { scrollbar-color:rgba(var(--songbook-accent-rgb),.52) rgba(255,255,255,.06); }
body:not(.theme-accent-sunset)[class*="theme-accent-"] *::-webkit-scrollbar-thumb { background:rgba(var(--songbook-accent-rgb),.48) !important; }
body:not(.theme-accent-sunset)[class*="theme-accent-"] *::-webkit-scrollbar-thumb:hover { background:rgba(var(--songbook-accent-rgb),.72) !important; }

/* The transpose keys form one compact, recognisable control in the TAB toolbar. */
#tab-key-chip.tv-floating-live-box {
  display:inline-flex;
  flex:0 0 auto;
  width:max-content;
  min-width:0;
  gap:2px;
  padding:2px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.06);
}
#tab-key-chip .tv-floating-live-box-main { min-width:3.2ch; padding:0 3px; }
#tab-key-chip .tv-floating-stepper { width:24px; height:24px; flex:0 0 24px; border-radius:5px; }
@media (min-width:1101px) {
  body:not(.songbook-pwa-embed) #tv-floating-live-tools .tv-floating-inline-group { justify-self:start !important; justify-content:flex-start !important; width:max-content; }
}

/* The startup curtain renders before dark-mode is applied, so it needs the
   palette variable directly on the body as well. */
body:not(.theme-accent-sunset)[class*="theme-accent-"]{--accent-color:var(--songbook-accent)}

/* S follows the current theme, with a lighter tint than the active P button. */
body[class*="theme-accent-"] .sp-btn.s-active,
body[class*="theme-accent-"] .sp-btn.btn-setlist-active {
  background:rgba(var(--songbook-accent-rgb),.075);
  color:color-mix(in srgb,var(--songbook-accent) 58%,white 42%);
  border-color:color-mix(in srgb,var(--songbook-accent) 78%,white 22%);
  box-shadow:inset 0 0 0 1px rgba(var(--songbook-accent-rgb),.24);
}

/* Compact clear control: keep its touch target, without the grey pill. */
.workspace-song-shell #global-search-clear{width:24px;min-width:24px;height:24px;min-height:24px;padding:0;margin:0;right:6px;border:0;border-radius:5px;background:transparent!important;box-shadow:none;color:rgba(247,243,235,.6)}
.workspace-song-shell #global-search-clear:hover{background:transparent!important;color:#fff7ec}
.workspace-song-shell #global-search-clear svg{display:block;width:12px;height:12px;pointer-events:none}
.workspace-song-shell #global-search-clear:focus-visible{outline:1px solid var(--songbook-accent,#ffb000);outline-offset:1px}
/* Profile options share the compact panels and action rows used by Playlists. */
.account-page-shell .account-tabs,.account-page-shell .account-display-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding:2px 0 8px}
.account-page-shell .account-tab-btn{flex:none;min-height:32px;padding:6px 10px;border-radius:7px;font-size:13px;white-space:nowrap}
.account-page-shell [data-display-panel][hidden]{display:none!important}
.account-page-shell .account-profile-card{padding:14px;border-radius:12px}
.account-page-shell .account-profile-list{max-width:680px;gap:8px}
.account-page-shell .account-profile-row{grid-template-columns:140px minmax(0,1fr);padding:9px 12px}
.account-page-shell .account-actions-row-modern{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-top:14px}
.account-page-shell [data-account-tab-panel=display]{display:block}
.account-page-shell .account-display-option-card{max-width:720px;margin:4px 0 0;padding:14px;gap:12px;border-radius:10px;background:#202020}
.account-page-shell .account-display-tabs{margin-bottom:10px;border-bottom:1px solid #ffffff18}
.account-page-shell #account-chord-style .chord-style-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;max-width:620px;margin:0}
.account-page-shell #account-chord-style .chord-style-fields label{min-height:36px;justify-content:space-between;padding:6px 8px;border:1px solid #ffffff12;border-radius:7px;font-size:13px}
.account-page-shell #account-chord-style .chord-style-fields label:has(input[type=checkbox]){justify-content:flex-start}
.account-page-shell #account-chord-style .chord-style-toggle{margin:0;font-size:13px}
.account-page-shell #account-chord-style .chord-style-preview{margin:0;padding:18px;max-width:620px}
.account-page-shell #account-chord-style [data-chord-reset]{justify-self:start;width:auto;margin:0}
.account-page-shell #account-chord-style .account-profile-note{margin:0;font-size:12px}
.account-page-shell #account-chord-style input[type=color]{flex:none;width:34px;height:28px}
.account-page-shell #account-chord-style input[type=range]{width:90px;min-width:0;padding:0;flex:0 1 90px}
.account-page-shell #account-chord-style output{min-width:3ch;text-align:right}
.account-page-shell .account-offline-summary{display:block;max-width:720px;margin-top:16px}
.account-offline-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.account-offline-counts>div{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid #ffffff12;border-radius:8px;background:#ffffff04}
.account-offline-counts strong{font-size:20px;color:var(--songbook-accent,#ffb000)}
.account-offline-counts span{font-size:12px;color:#bcb8b0}
.account-offline-details{display:grid;grid-template-columns:110px minmax(0,1fr);gap:9px 12px;margin-top:16px;font-size:13px}
.account-offline-details dt{color:#bcb8b0}.account-offline-details dd{margin:0;overflow-wrap:anywhere}
.account-page-shell #account-offline-feedback:empty,.account-page-shell .playlist-create-feedback:empty{display:none}
.account-page-shell .account-default-permissions-body{max-width:900px}
.account-page-shell .account-default-permission-group{margin-top:12px}
.account-install-steps{padding:14px 0;border-top:1px solid #ffffff18;line-height:1.6}
.account-install-steps h3{font-size:15px;margin:0 0 6px}
#profile-edit-email[readonly]{opacity:.65;cursor:default}
@media(max-width:600px){.account-page-shell #account-chord-style .chord-style-fields{grid-template-columns:1fr}.account-offline-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.account-page-shell .account-profile-row{grid-template-columns:100px minmax(0,1fr)}.account-page-shell .account-page-toolbar{align-items:flex-start}.account-page-shell .account-profile-card{padding:12px}.account-page-shell .account-tabs{max-width:100%}}
/* Compact appearance controls, including sessions that mount a fresh profile partial. */
.account-page-shell [data-display-panel]{width:100%!important;max-width:680px!important;box-sizing:border-box}
.account-page-shell .account-theme-grid{display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:8px!important;max-width:600px}
.account-page-shell .account-theme-chip{flex:0 0 auto!important;width:auto!important;min-width:90px;max-width:120px!important;margin:0!important;padding:7px 10px!important;min-height:32px;font-size:13px!important}
.account-page-shell #account-chord-style .chord-style-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:600px!important;margin:0!important}
.account-page-shell #account-chord-style .chord-style-fields label{display:flex!important;align-items:center;justify-content:space-between;min-width:0;min-height:40px;margin:0!important;padding:6px 9px!important;font-size:13px;gap:8px;overflow:hidden}
.account-page-shell #account-chord-style .chord-style-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:600px}
.account-page-shell #account-chord-style .chord-style-mode label{display:flex;flex-direction:column;gap:5px;font-size:12px}
.account-page-shell #account-chord-style .playlist-input{box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:34px;min-height:34px;margin:0!important;padding:5px 8px!important;background:#242424!important;color:#eee;border:1px solid #ffffff25;border-radius:7px;font:13px Arial,sans-serif}
.account-page-shell #account-chord-style .chord-color-swatch{display:flex;align-items:center;justify-content:center;width:32px!important;min-width:32px!important;height:28px!important;min-height:28px!important;flex:none;margin:0!important;padding:3px!important;border:1px solid #ffffff30;border-radius:6px;background:#282828}
.chord-color-swatch span{display:block;width:22px;height:18px;border-radius:3px}
.account-page-shell #account-chord-style .chord-style-save-row{display:flex;align-items:center;gap:7px;max-width:600px;flex-wrap:wrap}
.account-page-shell #account-chord-style [data-chord-name]{flex:1 1 150px;width:150px;max-width:250px}
.account-page-shell #account-chord-style [data-chord-save],.account-page-shell #account-chord-style [data-chord-reset]{flex:none;width:auto!important;min-height:32px;margin:0!important;padding:6px 10px!important;font-size:12px}
.account-page-shell #account-chord-style .chord-style-preview{width:100%;max-width:600px!important;padding:18px!important;margin:0!important}
.account-page-shell #account-chord-style .chord-style-preview .chord{font-size:16px;line-height:1.4}
dialog.chord-color-dialog{position:fixed;inset:0;margin:auto!important;width:min(360px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border:1px solid #6e5935;border-radius:14px;background:#202020!important;color:#eee;font:14px Arial,sans-serif;box-shadow:0 18px 60px #0009}
dialog.chord-color-dialog::backdrop{background:#000a}
dialog.chord-color-dialog h2{margin:0 0 16px;font:700 18px Arial,sans-serif}
.chord-palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
dialog.chord-color-dialog .chord-palette-grid button{display:block;width:100%;min-width:0;height:32px;min-height:32px;margin:0;padding:0;border:1px solid #ffffff30;border-radius:6px}
.chord-picker-preview{height:32px;border:1px solid #ffffff30;border-radius:7px;margin:14px 0}
.chord-picker-hex-label{display:flex;align-items:center;gap:12px;font-size:12px}
dialog.chord-color-dialog .playlist-input{width:100%;min-width:0;height:32px;min-height:32px;margin:0;padding:5px 8px;background:#292929;color:#eee;border:1px solid #ffffff30;border-radius:6px;font:13px monospace}
.chord-picker-rgb{display:grid;gap:10px;margin:14px 0}
.chord-picker-rgb label{display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:10px;font-size:12px}
dialog.chord-color-dialog input[type=range]{width:100%;min-width:0;margin:0;padding:0;accent-color:var(--songbook-accent,#ffb000)}
.chord-picker-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
dialog.chord-color-dialog .chord-picker-actions button{width:auto;min-height:32px;margin:0;padding:6px 10px;font-size:13px}
@media(max-width:600px){.account-page-shell #account-chord-style .chord-style-fields{grid-template-columns:1fr!important}.account-page-shell #account-chord-style .chord-style-mode{grid-template-columns:1fr}}
.account-page-shell #account-chord-style [data-chord-save]:disabled,.account-page-shell #account-chord-style .chord-color-swatch:disabled{opacity:.45;cursor:default}

#account-chord-style .account-tab-setlist-options{margin-top:16px;padding-top:14px;border-top:1px solid #ffffff20}
#account-chord-style .chord-style-preview{word-spacing:normal}
.chord-preview-row{white-space:pre;line-height:1.5;margin-top:7px}
.chord-preview-lyrics{font-size:13px;line-height:1.5;color:var(--pre-text-color,#eee)}

.chord-color-spectrum{display:block;width:100%;height:160px;touch-action:none;cursor:crosshair;border-radius:7px;margin-bottom:12px}
.chord-picker-hue-label{display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:10px;margin:10px 0 14px;font-size:12px}

/* One compact, quiet transpose box for reading and each independent editor. */
body .songbook-transpose-box { display:inline-flex!important; align-items:center!important; flex:0 0 auto!important; width:max-content!important; min-width:0!important; height:31px!important; min-height:31px!important; box-sizing:border-box!important; gap:3px!important; padding:2px!important; border:1px solid #625536!important; border-radius:8px!important; background:#24221d!important; box-shadow:none!important; }
body .songbook-transpose-box > button { flex:0 0 28px!important; width:28px!important; min-width:28px!important; max-width:28px!important; height:25px!important; min-height:25px!important; margin:0!important; padding:0!important; border:1px solid #514b3d!important; border-radius:5px!important; background:#28261f!important; color:#c6b78f!important; box-shadow:none!important; font:16px/1 Arial,sans-serif!important; }
body .songbook-transpose-box > .transpose-mode-button { flex-basis:24px!important; width:24px!important; min-width:24px!important; max-width:24px!important; font-size:11px!important; }
body .songbook-transpose-box > :is(.tabedit-chord-readout,.notes-transpose-reset,.tab-mode-musician-transpose-value,.tv-floating-live-box-main) { display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; flex:0 0 36px!important; width:36px!important; min-width:36px!important; max-width:36px!important; padding:0!important; gap:1px!important; border:0!important; background:transparent!important; line-height:1!important; }
body .songbook-transpose-box :is(strong,.tv-floating-live-value) { font:600 13px/1 Arial,sans-serif!important; color:#eee5d6!important; }
body .songbook-transpose-box :is(.tabedit-chord-offset,.notes-transpose-reset span,.tab-mode-musician-transpose-value span,.tv-floating-transpose-value) { font:600 10px/1 Arial,sans-serif!important; color:#c6b78f!important; }
body .songbook-transpose-box > button:is(:hover,:active,:focus-visible) { background:#302c22!important; border-color:#78643b!important; box-shadow:none!important; }

/* All app controls follow the selected accent; chord defaults remain untouched. */
body[class*="theme-accent-"] {--gold:var(--songbook-accent);--accent-color:var(--songbook-accent);}
body[class*="theme-accent-"] :is(.tv-info-kicker,.tv-card-kicker,.setlist-mode-section-index,.setlist-mode-anchor-index,.playlist-panel-title,.bookpage-inline-summary,.setlist-add-section-btn,.songbook-pwa-tab.is-active) {color:var(--songbook-accent)!important;}
body[class*="theme-accent-"] :is(.tv-btn-setlist.active,.setlist-mode-launch-btn,.playlist-workspace-tabs .tv-btn.is-active,.playlist-workspace-tabs .tv-btn.active,.tv-setlist-section-tab.is-active,.tv-setlist-section-tab.active,.songbook-pwa-tab.is-active) {color:var(--songbook-accent)!important;border-color:rgba(var(--songbook-accent-rgb),.35)!important;background:rgba(var(--songbook-accent-rgb),.09)!important;box-shadow:none!important;}
body #global-search-clear {display:flex!important;align-items:center!important;justify-content:center!important;width:24px!important;min-width:24px!important;max-width:24px!important;height:24px!important;min-height:24px!important;padding:0!important;margin:0!important;right:6px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#bcbcbc!important;font:18px/1 Arial,sans-serif!important;}
body #global-search-clear:hover {background:transparent!important;color:#eee!important;}
body #global-search-input::-webkit-search-cancel-button {-webkit-appearance:none;display:none;}
body .songbook-pwa-refresh-all {color:#e7e7e7!important;background:#292929!important;text-shadow:none!important;}
.account-permission-choices {display:flex;flex-wrap:wrap;gap:8px;}
dialog.account-permission-dialog {position:fixed;inset:0;margin:auto!important;width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:18px;border:1px solid #494949;border-radius:14px;background:#202020;color:#eee;}
dialog.account-permission-dialog::backdrop {background:#0009;}
.account-permission-dialog .tab-permissions-summary {display:none!important;}
.account-permission-dialog-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
#account-chord-style .account-tab-setlist-options {margin:0 0 16px;padding:0 0 14px;border-top:0;border-bottom:1px solid #ffffff20;}
body .songbook-transpose-box {border-color:#424242!important;background:#232323!important;}
body .songbook-transpose-box > button {border-color:#454545!important;background:#292929!important;color:#c4c4c4!important;}
body .songbook-transpose-box > .transpose-mode-button {border-radius:50%!important;width:24px!important;height:24px!important;min-height:24px!important;max-width:24px!important;color:var(--songbook-accent,#ccc)!important;}
body .songbook-transpose-box .transpose-mode-button[aria-pressed=true] {border-color:#555!important;background:#303030!important;}
body .songbook-transpose-box :is(.tabedit-chord-offset,.notes-transpose-reset span,.tab-mode-musician-transpose-value span,.tv-floating-transpose-value) {color:#c4c4c4!important;}