/* ============================================
   STRICT BLACK & WHITE STYLESHEET
   Replaces styles.css — No greys, no gradients,
   no shadows. Pure B&W with dark/light toggle.
   ============================================ */

/* Disable Android WebView blue tap highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* --- CSS Variables: Dark Mode (default) --- */
:root {
    --bg: #000;
    --bg-soft: #000;
    --bg-card: #000;
    --border: #fff;
    --border-strong: #fff;
    --primary: #fff;
    --primary-soft: transparent;
    --text: #fff;
    --text-muted: #fff;
    --shadow: none;
    --surface: #000;
    --button-bg: transparent;
    --button-hover: #fff;
    --card-bg: #000;
    --background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* --- CSS Variables: Light Mode --- */
[data-theme="light"] {
    --bg: #fff;
    --bg-soft: #fff;
    --bg-card: #fff;
    --border: #000;
    --border-strong: #000;
    --primary: #000;
    --primary-soft: transparent;
    --text: #000;
    --text-muted: #000;
    --shadow: none;
    --surface: #fff;
    --button-bg: transparent;
    --button-hover: #000;
    --card-bg: #fff;
    --background: #fff;
}

/* --- Reset & Base --- */
html,
body {
    touch-action: manipulation;
}

* {
    touch-action: manipulation;
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: inherit;
}

/* --- Header --- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 18px 0;
}

/* Header logo - white on dark theme, black on light theme */
.header-logo {
    filter: brightness(0) invert(1);
    /* White in dark mode */
}

[data-theme="light"] .header-logo {
    filter: brightness(0);
    /* Black in light mode */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-actions .ghost-button,
.header-actions #langToggle {
    font-size: 13px;
    padding: 6px 12px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Remove borders from header action buttons (Sign In, Lang, Theme) */
.header-actions .ghost-button,
.header-actions #langToggle,
.header-actions #themeToggle {
    border: none !important;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.nav-logo span {
    color: var(--text);
}

.nav-donate {
    background: transparent;
    color: var(--text);
    padding: 10px 24px;
    border-radius: 0;
    border: 1px solid var(--border);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease;
}

.nav-donate:hover {
    background: var(--text);
    color: var(--bg);
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    font-size: 1rem;
    padding: 6px 10px;
    border-radius: 0;
    transition: opacity 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
    opacity: 0.7;
}

.nav-cta {
    background: var(--text);
    color: var(--bg);
    padding: 10px 24px;
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    opacity: 0.8;
}

/* --- Container --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

/* --- Hero (merged upload flow) --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    margin: 0 auto 20px;
    gap: 10px;
}

/* Hero title breaks out of the 420px .hero container and spans (almost) the
   full viewport. On desktop (≥768px) it's one big line; on mobile it wraps
   to 2 lines naturally rather than getting clipped with an ellipsis.
   `width: 100vw` + negative margin lets the h1 escape the narrow flex column. */
.hero h1 {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 24px;
    box-sizing: border-box;
    font-size: clamp(1.4rem, 4.2vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .hero h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.hero-subtitle {
    color: var(--text);
    font-size: 0.75rem;
    opacity: 0.4;
    margin: 0;
    line-height: 1.3;
}

.upload-actions {
    display: flex;
    gap: 6px;
    width: 100%;
}

.upload-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.75rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upload-btn:first-child {
    background: var(--text);
    color: var(--bg);
}

.analyze-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.analyze-check {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.6;
}

.analyze-check input {
    cursor: pointer;
}

.analyze-row .upload-btn {
    flex: 1;
}

/* Inline Intense Scan toggle directly under the Analyze button. Mirrors
   #intenseScanCheckbox in the side menu; Pro-gated. */
.analyze-intense-row {
    display: flex;
    justify-content: center;
    margin: 6px 0 0 0;
    width: 100%;
}

.intense-scan-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.intense-scan-inline-label input {
    cursor: pointer;
}

.intense-scan-cost-hint {
    opacity: 0.5;
    font-size: 0.76rem;
}

/* --- Buttons --- */
.primary-action,
.secondary-action,
.ghost-button {
    font-family: inherit;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 10px 18px;
    border-radius: 0;
    text-decoration: none;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.step-card .primary-action,
.step-card .ghost-button {
    font-size: 0.8rem;
    padding: 8px 14px;
}

.primary-action,
.primary-button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.primary-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.primary-action:not(:disabled):hover,
.primary-action:not(:disabled):focus-visible {
    background: var(--text);
    color: var(--bg);
}

/* Filled state: for active/toggled-on buttons */
.primary-action.active,
.primary-action.on,
.primary-button.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.secondary-action {
    border: 1px solid var(--border);
    color: var(--text);
    background: transparent;
}

.secondary-action:hover,
.secondary-action:focus-visible {
    background: var(--text);
    color: var(--bg);
}

.ghost-button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.ghost-button:hover,
.ghost-button:focus-visible {
    background: var(--text);
    color: var(--bg);
}

/* Ghost button active/toggled state */
.ghost-button.active,
.ghost-button.on {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Signup / CTA buttons - outline by default, fill on hover */
[class*="signup-"][class*="-btn"]:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
    border-color: var(--text) !important;
}

/* --- Range Sliders (B&W) --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 20px;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: var(--border);
    height: 2px;
    border: none;
    border-radius: 0;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--text);
    border: none;
    border-radius: 50%;
    margin-top: -6px;
}

input[type="range"]::-moz-range-track {
    background: var(--border);
    height: 2px;
    border: none;
    border-radius: 0;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--text);
    border: none;
    border-radius: 50%;
}

/* --- Checkboxes (B&W) --- */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid var(--text);
    background: transparent;
    cursor: pointer;
    position: relative;
    border-radius: 0;
    vertical-align: middle;
}

input[type="checkbox"]:checked {
    background: var(--text);
}

input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bg);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* --- Theme Toggle --- */
#themeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    width: auto;
    height: auto;
}

#themeToggle:hover,
#langToggle:hover {
    color: var(--text);
    /* Removed background flip so icons stay visible */
    transform: none;
}

#langToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

/* --- Display Toggle Buttons --- */
.display-toggle {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--text) !important;
    opacity: 0.5;
    transition: opacity 0.15s ease, border-color 0.15s ease !important;
}

.display-toggle:hover {
    opacity: 0.8;
}

.display-toggle.active {
    opacity: 1 !important;
    border-bottom-color: var(--text) !important;
    font-weight: 600;
}

[data-theme="light"] .display-toggle {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #000 !important;
}

[data-theme="light"] .display-toggle.active {
    opacity: 1 !important;
    border-bottom-color: #000 !important;
    font-weight: 600 !important;
}

/* --- Preview Header Row --- */
.preview-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 4px;
}

.preview-header-row h2 {
    flex: 0 0 100%;
    text-align: center;
    margin: 0 0 8px 0;
    white-space: nowrap;
}

.header-spacer {
    display: none;
}

/* --- Header Buttons (nav-tab style) --- */
.header-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.5;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.header-btn:hover {
    opacity: 0.8;
}

/* Header Button Groups */
.header-btn-group {
    display: flex;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    width: 100%;
}

/* Active states for display toggles */
.header-btn.display-toggle.active {
    opacity: 1;
    border-bottom-color: var(--text);
    font-weight: 600;
}

/* Live group — only Preview button visible */
.header-btn-group.live-group {
    background: transparent;
    border-bottom: none;
    padding: 0;
    margin: 0;
}

/* --- Workflow --- */
.workflow h2,
.editor h2,
.next-steps h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.workflow-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.step-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-card h3 {
    font-size: 1rem;
    margin: 0;
}

.step-card p {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
    color: var(--text);
    opacity: 0.6;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* --- Upload --- */
.upload-tile {
    border: 2px dashed var(--border);
    border-radius: 0;
    padding: 12px 10px;
    text-align: center;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
}

.upload-tile:hover,
.upload-tile:focus {
    background: var(--text);
    color: var(--bg);
}

.upload-icon {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 6px;
}

.upload-label {
    font-weight: 600;
    display: block;
    font-size: 0.85rem;
}

.upload-note {
    font-size: 0.7rem;
    display: block;
    margin-top: 4px;
    color: var(--text);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Preview Panel --- */
.preview-panel {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px;
    min-height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.preview-panel img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 0;
    display: none;
}

.preview-placeholder {
    color: var(--text);
    margin: 0;
    font-size: 0.75rem;
}

/* AI Reference Preview */
.ai-reference-preview {
    margin-top: 12px;
}

.ai-reference-preview h4 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--text);
}

.reference-subtitle {
    color: var(--text);
    font-size: 0.75rem;
    margin: 0 0 8px 0;
}

.reference-content {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 8px;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    color: var(--text);
}

.reference-content .preview-placeholder {
    text-align: center;
    display: block;
    padding: 20px 10px;
    font-size: 0.7rem;
}

/* --- Status Panel --- */
.status-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 10px;
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.status-panel.processing {
    background: transparent;
    border-color: var(--border);
}

/* Scanner Animation */
.scanner-animation {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.status-panel.processing .scanner-animation {
    display: flex;
}

.scanner-document {
    position: relative;
    width: 80px;
    height: 100px;
}

.scanner-page {
    width: 100%;
    height: 100%;
    background: var(--text);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    animation: pageFloat 3s ease-in-out infinite;
}

@keyframes pageFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.scanner-lines {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scanner-lines span {
    height: 4px;
    background: var(--bg);
    border-radius: 0;
}

.scanner-lines span:nth-child(1) {
    width: 90%;
}

.scanner-lines span:nth-child(2) {
    width: 75%;
}

.scanner-lines span:nth-child(3) {
    width: 85%;
}

.scanner-lines span:nth-child(4) {
    width: 60%;
}

.scanner-lines span:nth-child(5) {
    width: 70%;
}

.scanner-music-note {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 24px;
    color: var(--bg);
    animation: none;
}

.scanner-beam {
    position: absolute;
    top: 0;
    left: -5px;
    right: -5px;
    height: 3px;
    background: var(--bg);
    animation: scanBeam 2s ease-in-out infinite;
    border-radius: 0;
}

@keyframes scanBeam {
    0% {
        top: 0;
        opacity: 1;
    }

    45% {
        top: calc(100% - 3px);
        opacity: 1;
    }

    50% {
        top: calc(100% - 3px);
        opacity: 0.3;
    }

    55% {
        top: calc(100% - 3px);
        opacity: 1;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

/* Status Content */
.status-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-flex;
    flex-shrink: 0;
}

.status-dot.idle {
    background: var(--text);
}

.status-dot.processing {
    background: var(--text);
    animation: pulse 1.2s infinite ease-in-out;
}

.status-dot.success {
    background: var(--text);
}

.status-dot.error {
    background: var(--text);
}

.status-text {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.status-panel.processing .status-text {
    color: var(--text);
    font-weight: 600;
}

/* Progress Bar */
.progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.status-panel.processing .progress-bar-container {
    opacity: 1;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--text);
    transition: width 0.4s ease-out;
}

/* Slider value labels: reserve fixed horizontal space so varying digit widths
   (e.g. 9 vs 12 vs 12.5) don't shift the slider next to them on every tick. */
#fontSizeValue,
#lineHeightValue,
#charSpacingValue,
#tagSizeValue,
#sideMenuFontSizeVal,
#sideMenuLineHeightVal,
#sideMenuCharSpacingVal,
#previewFontSizeValue {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
}

.status-hint {
    color: var(--text);
    font-size: 0.7rem;
    line-height: 1.3;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.5;
    }
}

.feature-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    color: var(--text);
    display: grid;
    gap: 4px;
    font-size: 0.8rem;
}

/* --- Editor --- */
.editor {
    position: relative;
    z-index: 0;
    margin-top: 20px;
    margin-bottom: 48px;
    background: var(--bg);
    border-radius: 0;
    padding: 24px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.editor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.transpose-controls {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text);
}

.transpose-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 6px 10px;
    color: var(--text);
}

.transpose-label input {
    width: 64px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
}

.transpose-label input:focus {
    outline: none;
}

.column-btn.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Layout Select */
.layout-select {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 12px;
    border-radius: 0;
    cursor: pointer;
    min-width: 110px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.layout-select:hover {
    background: var(--text) !important;
    color: var(--bg) !important;
}

.layout-select:focus {
    outline: 1px solid var(--text);
    outline-offset: 2px;
}

.editor-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}

.editor-columns {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.editor-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Collapsible wrapper inside .editor-panel: mirror the flex-column layout so
   the textarea and the font-slider row stretch to full width the same way
   they did before the wrapper was added. */
#editorCollapseBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-panel header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.editor-panel header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.editor-panel header small {
    color: var(--text);
    font-size: 0.85rem;
}

.editor-panel textarea {
    min-height: 340px;
    resize: vertical;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
    padding: 20px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
}

.editor-panel textarea:focus {
    outline: 1px solid var(--text);
    border-color: var(--border);
}

#visualEditor {
    min-height: 500px;
    font-size: 10px;
    white-space: pre;
    overflow-x: auto;
    word-wrap: normal;
}

#songbookOutput {
    min-height: 200px;
}

/* --- Mini Preview --- */
.mini-preview {
    width: 100%;
    min-height: 480px;
    border: 1px dashed var(--border);
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.mini-preview img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    display: none;
}

.mini-preview .mini-preview-placeholder {
    color: var(--text);
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.4;
}

/* --- Reanalyze Block --- */
.reanalyze-block {
    display: none;
}

.reanalyze-block label {
    font-size: 0.85rem;
    color: var(--text);
}

.reanalyze-block textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.reanalyze-block textarea:focus {
    outline: 1px solid var(--text);
}

/* --- Next Steps --- */
.next-steps {
    margin-top: 80px;
}

.next-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.next-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 24px;
}

.next-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.next-card p {
    margin: 0;
    color: var(--text);
}

.next-footer {
    color: var(--text);
    margin-top: 24px;
}

.next-footer a {
    color: var(--text);
    text-decoration: underline;
}

/* --- Donation --- */
.donation-amount-container {
    margin-bottom: 20px;
    text-align: left;
}

.donation-label {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.donation-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
}

.donation-input:focus {
    outline: 1px solid var(--text);
}

.donation-input::placeholder {
    color: var(--text);
    opacity: 0.5;
}

/* --- Footer --- */
.app-footer {
    text-align: center;
    padding: 32px;
    color: var(--text);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

/* --- Preview Section --- */
.preview-section {
    margin: 64px 0;
}

@media screen and (max-width: 800px) {
    .preview-section {
        margin: 0 !important;
        padding: 0 !important;
    }
}

.preview-section-content {
    position: relative;
    z-index: 1;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.preview-header h2 {
    margin: 0;
    font-size: 1.8rem;
}

.preview-controls-row {
    width: 100%;
    margin-bottom: 32px;
}

.preview-controls {
    display: flex;
    gap: 24px;
    align-items: center;
}

.font-size-control,
.line-height-control,
.char-spacing-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text);
}

.font-size-control span,
.line-height-control span,
.char-spacing-control span {
    display: inline-block;
    min-width: 35px;
    color: var(--text);
    font-weight: 500;
}

.preview-controls input[type="range"] {
    width: 120px;
    accent-color: var(--text);
}

/* Music row selects clickable */
.layout-music-row select {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
}

.layout-music-row>div {
    position: relative !important;
    z-index: 50 !important;
}

.layout-music-row span {
    pointer-events: none !important;
}

/* --- Preview Container (Print Preview - respects theme) --- */
.preview-container {
    background: var(--bg);
    border-radius: 0;
    padding: 0;
    border: 1px solid var(--border);
    width: 210mm;
    min-height: 297mm;
    max-width: 100%;
    margin: 0 auto;
}

.live-preview {
    font-family: 'Courier New', monospace;
    font-size: 12pt;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 8px 4px 20px 4px;
    /* (multi-column removed — was halving available width and clipping wide RTL chord-lines.
       Print mode keeps its own columns:2 in @media print further down.) */
    margin: 0 auto;
    position: relative;
    min-height: 297mm;
}

.live-preview>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Chord line: Fira Code monospace so space-width == letter-width and chord
   positions in the preview match the editor textarea (also Fira Code)
   pixel-for-pixel. Lyric line stays proportional (Arial) so Hebrew/Latin text
   renders normally — alignment of chords to specific lyric chars is lossy in
   proportional fonts, but that was already the case in the editor itself. */
.live-preview .chord-line {
    margin: 0;
    padding: 0;
    line-height: inherit;
    white-space: pre;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
}

.live-preview .lyric-line {
    margin: 0;
    padding: 0;
    line-height: inherit;
    white-space: pre;
    font-family: Arial, Helvetica, sans-serif;
}

/* "Reverse this chord-line" button — injected next to each chord line in the
   preview by updateLivePreview. HIDDEN BY DEFAULT across the whole app; only
   shows when the user opts in via Pro Settings → "Reverse Chords Button".
   The toggle flips `body.show-reverse-chords`, which unlocks these rules.
   Fixes the common RTL OCR failure where chord names come back in the wrong
   visual order, without forcing the user to re-scan or hand-edit the text. */
.chord-line-reverse {
    display: none;  /* default off; toggle unlocks via body.show-reverse-chords */
}
body.show-reverse-chords .chord-line-reverse {
    display: inline-block;
    width: 20px;
    height: 18px;
    padding: 0;
    margin: 0 4px 0 0;
    font-size: 12px;
    line-height: 16px;
    vertical-align: middle;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
    font-family: inherit;
    text-align: center;
}
body.show-reverse-chords .live-preview:hover .chord-line-reverse {
    opacity: 0.35;
}
body.show-reverse-chords .chord-line-reverse:hover,
body.show-reverse-chords .chord-line-reverse:focus-visible {
    opacity: 1 !important;
    background: var(--text);
    color: var(--bg);
    outline: none;
}


/* @@@RTL chord-line: LTR internal direction, right-aligned so the chord line
   hugs the right edge like the RTL lyric line below. OCR is observed to return
   chord positions as VISUAL columns from the IMAGE's left edge (not as
   logical Hebrew string indices as the prompt documents). So treating
   OCR `position` as a visual column from the LEFT of the chord-line —
   plain LTR rendering with right-align — reproduces the paper layout.
   DB forensics: Hebrew scan of "גדול אלוהי, שירו כי גדול אלוהי" returned
   Em@4, G@16 (OCR's raw positions). Paper had Em LEFT, G RIGHT (middle).
   LTR rendering of those positions → Em at col 4 (left side), G at col 16
   (middle-right) = matches the paper.
   `.rtl-content` matches both #livePreview.rtl-content AND #liveModeChartDisplay.rtl-content. */
[dir="rtl"] .chord-line,
.rtl-content .chord-line {
    direction: ltr !important;
    text-align: right !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* Match the lyric-line font so chord-row pixel width tracks lyric width.
       Hebrew Arial chars are narrower than Fira Code monospace columns; at
       large font sizes the monospace chord-row would otherwise overshoot the
       lyric and clip past the A4 right edge. */
    font-family: Arial, Helvetica, sans-serif !important;
    /* Right-edge buffer: prevents the rightmost chord in the row from being
       clipped when the OCR's max chord extent equals text.length (no trailing
       whitespace) and the proportional bold chord glyph extends a fraction
       past the box. */
    box-sizing: border-box !important;
    padding-right: 0.4em !important;
}

/* Force chord names (the <b> inside .chord-line) to inherit the proportional
   font in RTL too — defensive against any later rule that might set a
   monospace family on `b` and re-introduce the overshoot. */
[dir="rtl"] .chord-line b,
.rtl-content .chord-line b {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* @@@RTL section-header: GLOBAL — section names (Intro, Verse 1...) right-aligned */
[dir="rtl"] .section-header,
.rtl-content .section-header {
    direction: rtl !important;
    text-align: right !important;
}

/* @@@RTL lyric-line: GLOBAL — lyric text right-aligned */
[dir="rtl"] .lyric-line,
.rtl-content .lyric-line {
    direction: rtl !important;
    text-align: right !important;
}

/* @@@RTL song-header/title/meta: GLOBAL — title block right-aligned */
[dir="rtl"] .song-header,
.rtl-content .song-header,
[dir="rtl"] .song-title,
.rtl-content .song-title,
[dir="rtl"] .song-meta,
.rtl-content .song-meta {
    direction: rtl !important;
    text-align: right !important;
}



/* Preview page */
.preview-page {
    position: relative;
    height: 297mm;
    max-height: 297mm;
    overflow: hidden;
}

.preview-logo {
    position: absolute;
    top: 11px;
    right: 0;
    z-index: 10;
    opacity: 0.85;
    pointer-events: none;
    direction: ltr;
}

/* @@@RTL logo: OVERRIDE — flip logo to left side for RTL songs */
.preview-page:has(.live-preview.rtl-content) .preview-logo,
/* @@@RTL livePreview class-based */
.preview-page[dir="rtl"] .preview-logo {
    /* @@@RTL editor dir attr-based */
    right: auto;
    left: 20px;
    direction: ltr;
}

/* Collapse preview area when no song is loaded (livePreview has no child elements) */
#pagesWrapper:has(#livePreview:not(:has(*))) {
    display: none !important;
}

.preview-container:has(#livePreview:not(:has(*))) #pageCounter {
    display: none !important;
}

/* Preview Page Footer */
.preview-page-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 20px;
    border-top: 1px solid var(--text);
    font-size: 11px;
    color: var(--text);
    background: var(--bg);
    z-index: 5;
}

.footer-icon {
    width: 16px;
    height: 16px;
    border-radius: 0;
}

.footer-brand {
    font-weight: 700;
}

.footer-url {
    opacity: 0.7;
}

.footer-highlight {
    font-weight: 600;
}

/* User Branding in Footer */
#userBrandingFooter.active {
    display: flex;
}

/* Side Menu Logo Upload */
#sideMenuAvatarContainer:hover {
    opacity: 0.7;
}

#sideMenuUserLogo {
    background: var(--bg);
}

#brandingTextInput {
    border-radius: 0;
}

#brandingTextInput:focus {
    outline: none;
    border-color: var(--text);
}

#clearLogoBtn:hover,
#toggleAchordimBrandingBtn:hover {
    background: var(--text);
    color: var(--bg);
}

/* --- Modal Styles --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Side-panel mode: load song library as inline right panel */
.modal-overlay.side-panel-mode {
    position: static;
    background: transparent;
    z-index: auto;
    padding: 0;
    width: 100%;
    height: auto;
}

.modal-overlay.side-panel-mode .modal-container {
    max-width: 100%;
    max-height: 70vh;
    border: 1px solid var(--border);
    animation: none;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.modal-close:hover {
    opacity: 0.7;
}

.modal-body {
    padding: 24px 28px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.modal-body p {
    margin: 0 0 16px 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
}

.modal-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 0;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
}

.modal-input:focus {
    outline: 1px solid var(--text);
}

.modal-input::placeholder {
    color: var(--text);
    opacity: 0.5;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 28px 24px;
    justify-content: flex-end;
}

.modal-footer .ghost-button,
.modal-footer .primary-action {
    min-width: 100px;
}

/* --- Hero Preview (mockup) --- */
.hero-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 32px;
    position: relative;
}

.hero-mockup {
    border-radius: 0;
    background: transparent;
    padding: 24px;
    border: 1px solid var(--border);
}

.hero-mockup-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    font-weight: 600;
}

.mockup-title {
    font-size: 1.1rem;
}

.mockup-key {
    color: var(--text);
}

.hero-mockup-body {
    display: grid;
    gap: 12px;
}

.mockup-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.mockup-chord {
    font-weight: 600;
    color: var(--text);
    width: 52px;
}

.mockup-lyric {
    color: var(--text);
    flex: 1;
    padding-left: 16px;
}

.hero-caption {
    margin-top: 16px;
    color: var(--text);
    font-size: 0.9rem;
}

/* --- Light theme overrides (minimal - CSS variables handle most styling) --- */
/* Scanner animation needs inverted colors in light mode */
[data-theme="light"] .scanner-page {
    background: var(--text);
}

[data-theme="light"] .scanner-lines span {
    background: var(--bg);
}

[data-theme="light"] .scanner-music-note {
    color: var(--bg);
}

[data-theme="light"] .scanner-beam {
    background: var(--bg);
}

/* --- Live Preview Content Styling --- */
#livePreview {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
    padding: 8px 16px;
    font-size: 14px;
    orphans: 3;
    widows: 3;
}

#livePreview b {
    color: var(--text);
    font-weight: 600;
    font-size: 1em;
}

/* Chord boxes - more specific to override above */
#livePreview .inline-chord b {
    background: var(--text);
    color: var(--bg);
    padding: 1px 4px;
    border-radius: 0;
    font-size: 0.9em;
    border: 1px solid var(--text);
}

/* Song structure */
.song-header {
    line-height: 1.2 !important;
    column-span: all;
    -webkit-column-span: all;
    margin: 0;
    padding: 0;
}

.song-header:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.song-header+.song-section-block,
.song-header+* {
    margin-top: 0 !important;
}

.song-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 1px 0;
    text-align: start;
    column-span: all;
    -webkit-column-span: all;
    display: block;
    width: 100%;
}

.song-meta {
    text-align: start;
    font-size: 12px;
    margin: 0 0 1px 0;
    color: var(--text);
    column-span: all;
    -webkit-column-span: all;
    display: block;
    width: 100%;
}

.section-header {
    font-weight: 700;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-decoration: underline;
    letter-spacing: 0.3px;
    break-after: avoid;
    -webkit-column-break-after: avoid;
    page-break-after: avoid;
}

.section-comment {
    font-style: italic;
    font-size: inherit;
    color: #000;
    font-weight: 400;
    text-decoration: none;
    margin-left: 8px;
}

/* Section badges */
.section-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 1px 0 2px 0;
    flex-wrap: wrap;
    column-span: all;
    -webkit-column-span: all;
    break-inside: avoid;
    page-break-inside: avoid;
    /* Inherits direction from parent — RTL songs get direction:rtl which
       reverses flex order to match the reversed editor arrangement line. */
}

/* livePreview / liveModeChartDisplay use the `.rtl-content` CLASS (not the
   `dir` attribute, to avoid multi-column flow reversal). The class doesn't
   set direction on the container, so the badges-row would otherwise stay
   ltr and render V1→V4 left-to-right. Force direction:rtl on the badges-row
   only — keeps multi-column flow ltr while flipping the badge order. */
.rtl-content .section-badges-row {
    direction: rtl;
}

.section-badges-row+* {
    margin-top: 0 !important;
}

.hide-badges .section-badges-row {
    display: none !important;
}

/* Hide section tags (Verse 1, Chorus, etc.) but keep spacing */
.hide-tags .section-header {
    visibility: hidden !important;
}

/* Hide song header (title, key, BPM, author) */
.hide-header .song-header {
    display: none !important;
}

/* Live Mode */
#liveModeChartDisplay {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#liveModeChartDisplay>*:first-child,
#liveModeChartDisplay .song-header,
#liveModeChartDisplay .song-title,
#liveModeChartDisplay .song-meta,
#liveModeChartDisplay .section-badges-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#liveModeChartDisplay .song-header {
    line-height: 1.1 !important;
}

#liveModeChartDisplay .song-title {
    margin-bottom: 0 !important;
}

#liveModeChartDisplay .song-meta {
    margin-bottom: 0 !important;
}

#liveModeChartDisplay .section-header {
    margin: 0 0 0 0;
}

/* Filled tags: marker-style section headers */
#liveModeChartDisplay.filled-tags .section-header {
    width: fit-content;
    background: var(--text);
    color: var(--bg);
    padding: 0 8px;
    text-decoration: none;
    margin-top: -4px;
    margin-bottom: -2px;
}

/* @@@RTL filled-tags: push fit-content header to the right.
   `.rtl-content` now matches both the surrounding `.live-preview` (legacy) AND
   the Live Mode container itself (since Live Mode now opts in via class, not dir). */
.rtl-content #liveModeChartDisplay.filled-tags .section-header,
#liveModeChartDisplay.rtl-content.filled-tags .section-header,
[dir="rtl"] #liveModeChartDisplay.filled-tags .section-header {
    margin-left: auto;
}

/* Filled chords: background on chord names in live mode */
#liveModeChartDisplay.filled-chords .chord-line b {
    color: var(--bg);
    padding: 1px 4px;
    position: relative;
    z-index: 0;
}

#liveModeChartDisplay.filled-chords .chord-line b::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text);
    opacity: var(--chord-fill-opacity, 1);
    z-index: -1;
}

.hide-borders .song-section-block,
#liveModeChartDisplay.hide-borders .song-section-block {
    border: none !important;
    background-color: transparent !important;
}

/* Inline chord */
.inline-chord {
    display: inline;
    color: var(--text);
    font-weight: 700;
    margin: 0 2px;
    vertical-align: baseline;
}

.inline-chord b {
    background: var(--text);
    color: var(--bg);
    padding: 1px 4px;
    border-radius: 0;
    font-size: 0.9em;
    border: 1px solid var(--text);
}

[dir="rtl"] .inline-chord {
    direction: ltr;
    unicode-bidi: embed;
}

/* Plain chords mode — no background box, just bold text */
.plain-chords .inline-chord b {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 700;
}

.plain-chords .chord-line b {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 700;
}

/* Also handle #livePreview specificity */
#livePreview.plain-chords .inline-chord b {
    background: transparent !important;
    color: var(--text) !important;
    border: none !important;
    padding: 0 !important;
}

/* Chord Selector v5 - Circle of Fifths + Quality Grid */
#chordEditorOverlay {
    border: 2px solid var(--text) !important;
    max-height: 90vh;
    overflow-y: auto;
}

.chord-selector {
    width: 300px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.chord-selector-header {
    padding: 8px 12px;
    border-bottom: 2px solid var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chord-selector-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chord-selector-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    font-weight: 600;
}

.chord-selector-current {
    font-size: 20px;
    font-weight: 700;
    font-family: 'SF Mono', 'Consolas', monospace;
    letter-spacing: -0.02em;
}

.chord-selector-apply {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid var(--text);
    background: var(--bg);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chord-selector-apply:hover {
    background: var(--text);
    color: var(--bg);
}

/* Edit toolbar (Remove / Before / After / Duplicate) — sits between header
   and Circle of Fifths. B&W only; destructive Remove sits at the left edge
   with a 1px separator so it can't be mis-tapped as an additive action. */
.chord-selector-toolbar {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--text);
    background: var(--bg);
}

.chord-selector-toolbar-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    border-right: 1px solid var(--border);
    text-transform: none;
    letter-spacing: 0;
}

.chord-selector-toolbar-btn:last-child {
    border-right: none;
}

.chord-selector-toolbar-btn:hover {
    background: var(--text);
    color: var(--bg);
}

.chord-selector-toolbar-remove {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    border-right: none;
    white-space: nowrap;
}

.chord-selector-toolbar-sep {
    width: 1px;
    background: var(--text);
    flex-shrink: 0;
}

.chord-circle-wrap {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 6px auto 2px;
}

.chord-circle-note {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    border: 2px solid var(--text);
    background: var(--bg);
    color: var(--text);
    transform: translate(-50%, -50%);
}

.chord-circle-note:hover {
    background: var(--text);
    color: var(--bg);
}

.chord-circle-note.active {
    background: var(--text);
    color: var(--bg);
}

/* Inner ring: relative minor chords */
.chord-circle-minor {
    width: 28px;
    height: 28px;
    font-size: 9px;
    font-weight: 600;
    border-width: 1px;
    opacity: 0.65;
}

.chord-circle-minor:hover {
    opacity: 1;
    background: var(--text);
    color: var(--bg);
}

.chord-circle-minor.active {
    opacity: 1;
    background: var(--text);
    color: var(--bg);
}

.chord-quality-section {
    border-top: 2px solid var(--text);
}

.chord-quality-label {
    padding: 5px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    opacity: 0.5;
    border-bottom: 1px solid var(--border);
}

.chord-quality-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.chord-quality-option {
    padding: 7px 2px;
    text-align: center;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

.chord-quality-option:hover {
    background: var(--text);
    color: var(--bg);
}

.chord-quality-option.active {
    background: var(--text);
    color: var(--bg);
    opacity: 0.6;
}

/* Make chords and section headers look clickable in preview */
#livePreview .chord-line b,
#livePreview .inline-chord b,
#livePreview .chord-grid b,
#livePreview .section-header,
#livePreview .section-badge,
#livePreview .meta-editable {
    cursor: pointer;
}

.meta-editable:hover {
    text-decoration: underline;
}

/* Styled prompt modal z-index */
#styledPromptModal {
    z-index: 99999 !important;
}

/* Badge scrollbar */
.section-badges-row::-webkit-scrollbar {
    height: 4px;
}

.section-badges-row::-webkit-scrollbar-track {
    background: transparent;
}

.section-badges-row::-webkit-scrollbar-thumb {
    background: var(--text);
    border-radius: 0;
}

/* Section badge */
.section-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 0;
    font-weight: 500;
    font-size: 9px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.section-badge:hover {
    background: var(--text);
    color: var(--bg);
}

.section-badge.active,
.section-badge.badge-active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.section-badge+.section-badge::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
}

/* @@@RTL badge separator dot: OVERRIDE — dot moves from left side to right side between badges */
[dir="rtl"] .section-badge+.section-badge::before,
.rtl-content .section-badge+.section-badge::before {
    left: auto;
    right: -9px;
}

/* Badge colors - all B&W */
.badge-intro,
.badge-verse,
.badge-chorus,
.badge-bridge,
.badge-prechorus,
.badge-outro,
.badge-turn,
.badge-break,
.badge-other {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
}

/* Repeat count */
.repeat-count {
    font-size: 10px;
    font-weight: 700;
    margin-left: 2px;
    vertical-align: super;
    position: relative;
    top: -2px;
}

/* Flow arrows */
.flow-arrow {
    font-size: 18px;
    color: var(--text);
    margin: 0 4px;
    vertical-align: middle;
    display: inline-block;
}

.flow-instructions-section {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px dashed #000;
}

.flow-instruction {
    font-weight: 700;
    font-size: 14px;
    color: #000;
    text-decoration: underline;
    margin: 4px 0;
    padding: 2px 0;
    letter-spacing: 0.3px;
}

/* Editor Song Structure */
.editor-song-structure {
    margin: 12px 0;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
}

/* Song Section Blocks */
.song-section-block {
    margin: 1px 0;
    padding: 2px 4px;
    border: 1px dashed var(--text);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    background-color: transparent;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.song-section-block:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.song-section-block.section-selected {
    border-color: var(--text);
    border-width: 2px;
    border-style: solid;
    background: rgba(128, 128, 128, 0.15);
    animation: sectionBlink 1s ease-in-out 2;
}

@keyframes sectionBlink {

    0%,
    100% {
        background: rgba(128, 128, 128, 0.1);
    }

    50% {
        background: rgba(128, 128, 128, 0.3);
    }
}

.song-section-block.section-selected-static {
    border-color: var(--text);
    border-width: 2px;
    background: transparent;
}

/* Playlist song selected (current song in live mode) */
.playlist-song-selected {
    animation: playlistBlink 1s ease-in-out 2;
}

@keyframes playlistBlink {
    0%, 100% { background: rgba(128, 128, 128, 0.1); }
    50% { background: rgba(128, 128, 128, 0.3); }
}

/* Drag handle for section reordering */
.section-drag-handle {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0.35;
    font-size: 14px;
    color: var(--text);
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
}

[dir="rtl"] .section-drag-handle {
    right: auto;
    left: 4px;
}

.section-drag-handle:hover {
    opacity: 1;
}

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

/* Reorder mode: blocks need position:relative for handle */
.reorder-active .song-section-block {
    position: relative;
}

/* Dragging state */
.song-section-block.dragging {
    opacity: 0.4;
}

/* Drop target indicators */
.song-section-block.drag-over-top {
    border-top: 2px solid var(--text) !important;
}

.song-section-block.drag-over-bottom {
    border-bottom: 2px solid var(--text) !important;
}

/* Flex-based columns for reorder mode (replaces CSS columns) */
.reorder-columns-wrapper {
    display: flex;
    gap: 2px;
}

.reorder-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    min-width: 0;
    overflow: hidden;
}

.reorder-placeholder {
    margin: 1px 0;
    min-height: 50px;
    border: 1px dashed var(--text);
    opacity: 0.25;
    box-sizing: border-box;
}

.reorder-placeholder.drag-over {
    opacity: 0.7;
    border-color: var(--text);
    border-width: 2px;
}

.row-space {
    height: 1.2em;
    min-height: 1.2em;
    display: block;
}

/* --- Notifications --- */
.overflow-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px 24px;
    z-index: 10000;
    max-width: 400px;
    width: 90%;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.overflow-notification.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

.overflow-notification-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: inherit;
}

.overflow-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.overflow-text {
    flex: 1;
}

.overflow-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.overflow-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.overflow-close {
    background: transparent;
    border: 1px solid var(--bg);
    color: var(--bg);
    width: 28px;
    height: 28px;
    border-radius: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.overflow-close:hover {
    opacity: 0.7;
}

/* Success Toast */
.success-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 20px 24px;
    z-index: 10000;
    max-width: 400px;
    width: 90%;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.success-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}

.success-toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    font-weight: 500;
    font-size: 16px;
}

.success-toast-icon {
    font-size: 28px;
    flex-shrink: 0;
}

/* --- Print Styles --- */
@media print {
    @page {
        margin: 0.5cm 0.5cm 0 0.5cm;
        size: A4 portrait;
    }

    .app-header,
    .app-nav-bar,
    .tools-combined-view,
    .hero,
    .workflow,
    .next-steps,
    .app-footer,
    .editor,
    .editor-workspace,
    .editor-actions-section,
    .session-section,
    .support-section,
    .visualizer-promo,
    .preview-header,
    .preview-controls-row,
    .preview-controls,
    .metadata-controls,
    .editor-actions,
    .session-controls,
    #authMessage,
    select,
    button,
    input,
    label,
    #printPreview,
    #viewOnlyBanner {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .preview-page {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        height: 297mm !important;
        max-height: 297mm !important;
        overflow: hidden !important;
    }

    body,
    .container,
    .preview-section,
    .preview-section-content {
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
    }

    .preview-section {
        display: block !important;
    }

    .preview-container {
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: #fff !important;
    }

    #livePreview {
        display: block !important;
        border: none !important;
        min-height: auto !important;
        width: 100% !important;
        padding: 0 0 40px 0 !important;
        margin: 0 !important;
        color: #000 !important;
        background: #fff !important;
        height: calc(297mm - 30px) !important;
        max-height: calc(297mm - 30px) !important;
        overflow: hidden !important;
        columns: 2 !important;
    }

    /* Force all text to black on white for print regardless of theme */
    #livePreview *,
    .preview-page *,
    .preview-page-footer,
    .preview-page-footer * {
        color: #000 !important;
        background: transparent !important;
        border-color: #000 !important;
    }

    .section-header {
        color: #000 !important;
    }

    .section-badge {
        color: #000 !important;
        border: 1px solid #000 !important;
        background: transparent !important;
    }

    .section-badges-row {
        color: #000 !important;
    }

    .preview-page-footer {
        background: #fff !important;
        border-top: 1px solid #000 !important;
    }

    .preview-container>div[style*="position: absolute"] {
        display: none !important;
    }

    .song-section-block {
        border: none !important;
    }

    .song-section-block,
    .chord-line,
    .lyric-line {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .section-header {
        break-after: avoid;
        page-break-after: avoid;
    }

    .preview-logo {
        position: absolute;
        top: 5mm;
        right: 0;
        opacity: 0.7;
        direction: ltr;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    [dir="rtl"] .preview-logo {
        right: auto;
        left: 20px;
    }

    .preview-page-footer {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 6px 20px;
        border-top: 1px solid #000;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
        z-index: 100;
    }

    #userBrandingFooter.active {
        display: flex !important;
    }
}

/* --- Side Menu --- */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--text);
    border-radius: 0;
    transition: all 0.4s ease-in-out;
    transform-origin: left center;
}

.hamburger-btn:hover span {
    opacity: 0.7;
}

.hamburger-btn.active span {
    position: absolute;
    left: 0;
}

.hamburger-btn.active span:nth-child(1) {
    top: 0;
    width: 75%;
}

.hamburger-btn.active span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
}

.hamburger-btn.active span:nth-child(3) {
    top: 0;
    width: 3px;
    height: 100%;
    border-radius: 0;
}

/* Side Menu Overlay */
.side-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.side-menu-overlay.active {
    opacity: 0.8;
    visibility: visible;
}

/* Side Menu Panel */
.side-menu-panel {
    position: fixed;
    top: 0;
    left: -340px;
    width: 320px;
    height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    z-index: 1000;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.side-menu-panel.active {
    left: 0;
}

.side-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.side-menu-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text);
}

.side-menu-close {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.side-menu-close:hover {
    opacity: 0.7;
}

.side-menu-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.side-menu-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.side-menu-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.side-menu-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    font-weight: 600;
}

.side-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.side-menu-btn {
    padding: 10px 14px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.side-menu-btn:hover {
    background: var(--text);
    color: var(--bg);
}

/* Override ALL colored side-menu-btn variants */
.side-menu-btn.primary,
.side-menu-btn.orange,
.side-menu-btn.purple,
.side-menu-btn.green,
.side-menu-btn.blue {
    background: var(--text);
    border: 1px solid var(--text);
    color: var(--bg);
}

.side-menu-btn.primary:hover,
.side-menu-btn.orange:hover,
.side-menu-btn.purple:hover,
.side-menu-btn.green:hover,
.side-menu-btn.blue:hover {
    opacity: 0.8;
}

.side-menu-btn.full-width {
    width: 100%;
    text-align: center;
}

/* Side Menu Row */
.side-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.side-menu-row:last-child {
    margin-bottom: 0;
}

.side-menu-row label {
    font-size: 0.85rem;
    color: var(--text);
    min-width: 80px;
}

.side-menu-row input[type="range"] {
    flex: 1;
    accent-color: var(--text);
    height: 6px;
}

.side-menu-row span {
    font-size: 0.85rem;
    color: var(--text);
    min-width: 40px;
    text-align: right;
    font-weight: 500;
}

/* Side Menu Select */
.side-menu-select {
    flex: 1;
    padding: 8px 12px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}

.side-menu-select:focus {
    outline: 1px solid var(--text);
}

/* Side Menu Input */
.side-menu-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
}

.side-menu-input:focus {
    outline: 1px solid var(--text);
}

/* Side Menu Checkbox */
.side-menu-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: auto !important;
}

.side-menu-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--text);
    cursor: pointer;
}

.side-menu-checkbox span {
    font-size: 0.85rem;
    color: var(--text);
    min-width: auto !important;
    text-align: left !important;
}

/* Key Grid */
.side-menu-key-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 10px 0;
}

.key-btn {
    padding: 8px 4px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.key-btn.active {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

/* Transpose Buttons */
.side-menu-transpose-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.side-menu-transpose-btns span {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.side-menu-transpose-btns .side-menu-btn {
    padding: 8px 16px;
    text-align: center;
}

/* Light theme side menu */
[data-theme="light"] .side-menu-panel {
    background: #fff;
}

/* Light theme - CSS variables handle all styling automatically */
/* No overrides needed - base styles use var(--bg), var(--text), var(--border) */

/* Mini pad key */
.mini-pad-key {
    padding: 6px 2px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mini-pad-key:hover,
.mini-pad-key.active {
    background: var(--text);
    color: var(--bg);
}

.pad-key-btn.loading,
.mini-pad-key.loading {
    opacity: 0.5;
    pointer-events: none;
}

.pad-key-btn.playing {
    background: var(--text);
    color: var(--bg);
}

.mini-pad-key.playing {
    background: var(--text);
    color: var(--bg);
}

#padsHDToggle.active {
    background: var(--text);
    color: var(--bg);
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .side-menu-panel {
        width: 85vw;
        max-width: 320px;
        left: -90vw;
    }

    .success-toast,
    .overflow-notification {
        left: 50%;
        max-width: 90%;
        width: 90%;
    }

    .section-badges-row {
        gap: 12px;
    }

    .section-badge {
        padding: 2px 7px;
        font-size: 8px !important;
    }

    .section-badge+.section-badge::before {
        left: -8px;
        font-size: 10px;
    }

    /* @@@RTL badge separator dot @media tablet */
    [dir="rtl"] .section-badge+.section-badge::before,
    .rtl-content .section-badge+.section-badge::before {
        left: auto;
        right: -8px;
    }
}

@media (max-width: 480px) {
    .section-badges-row {
        gap: 10px;
    }

    .section-badge {
        padding: 1px 6px;
        font-size: 7px !important;
    }

    .section-badge+.section-badge::before {
        left: -7px;
        font-size: 9px;
    }

    /* @@@RTL badge separator dot @media mobile */
    [dir="rtl"] .section-badge+.section-badge::before,
    .rtl-content .section-badge+.section-badge::before {
        left: auto;
        right: -7px;
    }
}

/* --- Mobile Header Responsive --- */
@media (max-width: 768px) {
    .preview-header-row h2 {
        font-size: 1.2rem;
    }

    .header-btn {
        font-size: 0.75rem;
        padding: 8px 6px;
    }
}

@media (max-width: 480px) {
    .preview-header-row h2 {
        font-size: 1.1rem;
    }

    .header-btn {
        font-size: 0.7rem;
        padding: 8px 4px;
    }
}

/* --- General Mobile Responsive --- */
@media (max-width: 720px) {
    .header-container {
        padding: 0 10px;
    }

    .header-actions {
        gap: 6px;
    }

    .header-actions .ghost-button,
    .header-actions #themeToggle,
    .header-actions #langToggle {
        padding: 0 8px;
        height: 28px;
        font-size: 12px;
        min-width: 0;
    }

    .header-brand-name {
        font-size: 1rem !important;
    }

    .header-brand-url {
        display: block !important;
    }

    .nav-logo {
        font-size: 1.2rem;
    }

    .preview-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .preview-header .primary-action {
        width: 100%;
    }

    .nav-menu {
        display: none;
    }

    .nav-cta {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .container {
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .editor-header {
        align-items: flex-start;
    }

    .preview-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .preview-controls input[type="range"] {
        width: 100%;
    }

    .transpose-controls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .transpose-controls .ghost-button {
        flex: 1;
        min-width: 60px;
    }

    .transpose-label {
        flex: 1 1 100%;
        margin-top: 8px;
    }

    .transpose-label input {
        width: 100%;
    }

    .mini-preview {
        max-width: 100%;
        min-height: 240px;
    }

    .modal-container {
        margin: 0 16px;
        max-width: calc(100% - 32px) !important;
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .ghost-button,
    .modal-footer .primary-action {
        width: 100%;
    }

    #subscriptionModal .modal-container {
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    #subscriptionModal .modal-body {
        padding: 16px !important;
    }

    #subscriptionModal .pricing-card {
        min-width: 100% !important;
        padding: 20px !important;
    }

    .pricing-card h3 {
        font-size: 1.2rem !important;
    }

    .pricing-card ul {
        font-size: 13px !important;
    }
}

/* --- Layout controls mobile --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .layout-controls-row {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .layout-music-row>div {
        flex: 1 !important;
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
    }

    .layout-display-row>div,
    .layout-display-row>label,
    .layout-display-row>button {
        flex: 1 !important;
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
        justify-content: center !important;
    }

    .layout-controls-row select,
    .layout-controls-row input[type="number"] {
        font-size: 0.75rem !important;
    }

    .layout-controls-row span {
        font-size: 0.7rem !important;
    }

    .layout-actions-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .layout-sliders-row {
        gap: 8px !important;
    }

    .layout-sliders-row>label {
        flex: 1 1 30% !important;
        min-width: 120px !important;
    }
}

@media (max-width: 768px) {
    .preview-controls-row>div {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .font-size-control,
    .line-height-control,
    .char-spacing-control {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100%;
    }

    .preview-controls-row label {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100%;
    }

    .layout-music-row {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
    }

    .layout-music-row>div {
        flex: 1 !important;
        min-width: 60px !important;
        justify-content: center !important;
        padding: 5px 6px !important;
        font-size: 0.7rem !important;
        overflow: visible !important;
    }

    .layout-music-row select {
        min-width: 50px !important;
        -webkit-appearance: menulist !important;
        appearance: menulist !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 100 !important;
        touch-action: manipulation !important;
    }

    .layout-music-row>div {
        position: relative !important;
        z-index: 50 !important;
    }

    .layout-music-row span {
        pointer-events: none !important;
    }

    .layout-display-row {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .layout-display-row>div,
    .layout-display-row>label {
        flex: 1 1 22% !important;
        min-width: 60px !important;
        max-width: 25% !important;
        justify-content: center !important;
        padding: 5px 4px !important;
        font-size: 0.65rem !important;
    }

    .layout-display-row>button {
        flex: 1 1 30% !important;
        min-width: 80px !important;
        justify-content: center !important;
        padding: 5px 4px !important;
        font-size: 0.65rem !important;
    }

    .layout-controls-row select,
    .layout-controls-row input[type="number"] {
        font-size: 0.7rem !important;
        padding: 1px 2px !important;
    }

    .layout-controls-row span {
        font-size: 0.65rem !important;
    }

    .layout-sliders-row {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .layout-sliders-row>label {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        width: 100%;
    }
}

/* --- A4 Preview Scaling --- */
.preview-scale-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    background: var(--bg);
    border-radius: 0;
}

.preview-container.mobile-scaled {
    transform-origin: top left;
    width: 793px !important;
    max-width: none !important;
    min-width: 793px !important;
}

@media screen and (max-width: 800px) {
    .preview-scale-wrapper {
        background: transparent;
        border-radius: 0;
    }

    .preview-container.mobile-scaled {
        margin: 0;
        border: 1px solid var(--border);
    }

    /* Hide editor on mobile by default; user toggles via Edit Workspace button.
       Adding .editor-shown class (via JS) makes :not() no longer match → editor shows. */
    #editor:not(.editor-shown) {
        display: none !important;
    }

    /* Collapse any hidden elements' extra space inside preview-section-content */
    .preview-section-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .preview-section-content>* {
        flex-shrink: 0;
    }
}

/* --- Pricing Grid --- */
.pricing-grid-responsive {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    align-items: stretch;
    padding-top: 14px;
}

.pricing-grid-responsive .pricing-card,
.pricing-grid-responsive>div {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

.pricing-grid-responsive .pricing-card>div:last-child,
.pricing-grid-responsive>div>div:last-child {
    overflow: hidden;
}

[id^="paypal-button-"] {
    overflow: hidden;
}

.pricing-grid-responsive .pricing-card ul,
.pricing-grid-responsive>div ul {
    flex: 1;
}

@media (max-width: 800px) {
    .pricing-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .pricing-grid-responsive {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .pricing-grid-responsive .pricing-card,
    .pricing-grid-responsive>div {
        height: auto;
    }
}

.scan-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.scan-packs-grid>div {
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

@media (max-width: 600px) {
    .scan-packs-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Editor Preview Wrapper (side-by-side) --- */
.editor-preview-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Both children share space equally via flex: 1.
   When editor is hidden (display:none), preview takes full width.
   When both visible, they split 50/50 and JS scales the A4 preview to fit. */
.editor-preview-wrapper>.preview-scale-wrapper {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

.editor-preview-wrapper>.editor {
    flex: 1 1 0%;
    min-width: 0;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .editor-preview-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .editor-preview-wrapper>.preview-scale-wrapper,
    .editor-preview-wrapper>.editor {
        flex: 0 0 auto;
        width: 100%;
    }

    .editor-preview-wrapper>.preview-scale-wrapper {
        margin: 0 auto;
    }
}

/* --- Custom Alert/Confirm Modal Overrides --- */
@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- Inline Style Overrides ---
   These use attribute selectors to override
   inline styles that use colors/gradients.
   ============================================ */

/* Override linear-gradient backgrounds */
[style*="background: linear-gradient"],
[style*="background: radial-gradient"],
[style*="background-color: rgba"],
[style*="background: rgba(139"],
[style*="background: rgba(234"],
[style*="background: rgba(255, 59"],
[style*="background: rgba(59, 130"],
[style*="background: rgba(16, 185"],
[style*="background: rgba(168, 85"],
[style*="background: rgba(236, 72"],
[style*="background: rgba(99, 102"],
[style*="background: rgba(239, 68"],
[style*="background: rgba(52, 199"],
[style*="background: rgba(255, 59, 48"],
[style*="background: rgba(0, 122, 255"],
[style*="background: rgba(107, 114"],
[style*="background: rgba(245, 158"],
[style*="background: rgba(249, 115"],
[style*="background: rgba(76, 175"],
[style*="background: rgba(56, 142"],
[style*="background: rgba(255, 152"],
[style*="background: rgba(251, 140"],
[style*="background: #10b981"],
[style*="background: #3b82f6"],
[style*="background: #ef4444"],
[style*="background: #8b5cf6"],
[style*="background: #f59e0b"],
[style*="background: #22c55e"],
[style*="background: #ff3b5c"],
[style*="background: #a855f7"],
[style*="background: #2383E2"],
[style*="background-color: #10b981"],
[style*="background-color: #3b82f6"],
[style*="background-color: #ef4444"],
[style*="background-color: #22c55e"],
[style*="background-color: #ff3b5c"],
[style*="background-color: #f59e0b"],
[style*="background: #1e1e2e"],
[style*="background: #10b981"],
[style*="background: rgba(34, 197"],
[style*="background: rgba(79, 209"],
[style*="background: rgba(255,255,255,0.08"],
[style*="background: rgba(255,255,255,0.1"] {
    background: transparent !important;
}

/* Override colored text */
[style*="color: #8b5cf6"],
[style*="color: #a78bfa"],
[style*="color: #10b981"],
[style*="color: #3b82f6"],
[style*="color: #ef4444"],
[style*="color: #f59e0b"],
[style*="color: #eab308"],
[style*="color: #6366f1"],
[style*="color: #a855f7"],
[style*="color: #a5b4fc"],
[style*="color: #ec4899"],
[style*="color: #fbbf24"],
[style*="color: #059669"],
[style*="color: #22d3ee"],
[style*="color: #6ee7b7"],
[style*="color: #c4b5fd"],
[style*="color: #fcd34d"],
[style*="color: #fca5a5"],
[style*="color: #e9d5ff"],
[style*="color: #d8b4fe"],
[style*="color: #c084fc"],
[style*="color: #f472b6"],
[style*="color: #ff3b5c"],
[style*="color: #ff6b8a"],
[style*="color: #34c759"],
[style*="color: #ff3b30"],
[style*="color: #007aff"],
[style*="color: #dc2626"],
[style*="color: #d97706"],
[style*="color: #22c55e"],
[style*="color: #16a34a"],
[style*="color: #2563eb"],
[style*="color: #7c3aed"],
[style*="color: #b91c1c"],
[style*="color: #047857"],
[style*="color: #1d4ed8"],
[style*="color: #6d28d9"],
[style*="color: #f97316"],
[style*="color: #e879f9"],
[style*="color: #f0abfc"],
[style*="color: #fda4af"],
[style*="color: #fecaca"],
[style*="color: #999"],
[style*="color: #666"],
[style*="color: #444"],
[style*="color: #ccc"],
[style*="color: #ddd"],
[style*="color: white"],
[style*="color: red"],
[style*="color: green"],
[style*="color: blue"],
[style*="color: orange"],
[style*="color: purple"],
[style*="color: #60a5fa"],
[style*="color: #4ade80"],
[style*="color: #e5e5e5"],
[style*="color: #9ca3af"],
[style*="color: #34d399"],
[style*="color: #f87171"],
[style*="color: #818cf8"],
[style*="color: #fb923c"],
[style*="color: #1e1e2e"],
[style*="color: rgb(59, 130, 246)"],
[style*="color: rgb(34, 197, 94)"],
[style*="color: rgb(168, 85, 247)"],
[style*="color: rgb(139, 92, 246)"],
[style*="color: rgb(239, 68, 68)"],
[style*="color: rgb(245, 158, 11)"],
[style*="color: rgb(16, 185, 129)"],
[style*="color: rgb(99, 102, 241)"],
[style*="color: rgb(236, 72, 153)"],
[style*="color: rgb(249, 115, 22)"],
[style*="color: rgb(220, 38, 38)"],
[style*="color: rgb(22, 163, 74)"],
[style*="color: rgb(37, 99, 235)"],
[style*="color: rgb(124, 58, 237)"],
[style*="color: rgb(52, 211, 153)"],
[style*="color: rgb(96, 165, 250)"],
[style*="color: rgb(74, 222, 128)"],
[style*="color: rgb(248, 113, 113)"],
[style*="color: rgb(129, 140, 248)"],
[style*="color: rgb(251, 146, 60)"] {
    color: var(--text) !important;
}

/* Override colored borders */
[style*="border-color: rgba(139, 92"],
[style*="border-color: rgba(234, 179"],
[style*="border-color: rgba(255, 59"],
[style*="border-color: rgba(59, 130"],
[style*="border-color: rgba(16, 185"],
[style*="border-color: rgba(168, 85"],
[style*="border-color: rgba(236, 72"],
[style*="border-color: rgba(99, 102"],
[style*="border-color: rgba(239, 68"],
[style*="border-color: rgba(6, 182"],
[style*="border-color: rgba(34, 211"],
[style*="border-color: rgba(249, 115"],
[style*="border-color: rgba(251, 191"],
[style*="border-color: #10b981"],
[style*="border-color: #3b82f6"],
[style*="border-color: #ef4444"],
[style*="border-color: #8b5cf6"],
[style*="border-color: #f59e0b"],
[style*="border-color: #ff3b5c"],
[style*="border-color: #22c55e"],
[style*="border-color: #a855f7"],
[style*="border: 1px solid #"],
[style*="border: 2px solid #"],
[style*="border: 1px solid rgb(59, 130"],
[style*="border: 1px solid rgb(34, 197"],
[style*="border: 1px solid rgb(168, 85"],
[style*="border-color: rgb(59, 130"],
[style*="border-color: rgb(34, 197"],
[style*="border-color: rgb(168, 85"] {
    border-color: var(--border) !important;
}

/* Override colored accent-color */
[style*="accent-color: #3b82f6"],
[style*="accent-color: rgb(59, 130, 246)"],
[style*="accent-color: #22c55e"],
[style*="accent-color: rgb(34, 197, 94)"] {
    accent-color: var(--text) !important;
}

/* Force B&W on Song Library modal badges (padding: 4px 10px targets metadata badges) */
#loadSongModal [style*="padding: 4px 10px"] {
    color: var(--text) !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
}

/* Force B&W on all colored inline text in Song Library modal */
#loadSongModal [style*="color:"] {
    color: var(--text) !important;
}

/* Force B&W on colored inline backgrounds in Song Library modal */
#loadSongModal [style*="background: rgba"] {
    background: transparent !important;
}

/* --- Song List (minimal style) --- */
.sl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}

.sl-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--text);
    opacity: 0.1;
}

.sl-item:last-child::after {
    display: none;
}

.sl-letter {
    padding: 18px 14px 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    opacity: 0.25;
    border-bottom: 1px solid var(--text);
    border-bottom-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.sl-item:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.sl-item--active {
    border-left: 3px solid var(--text);
    padding-left: 11px;
}

.sl-active-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--text);
    padding: 1px 6px;
    margin-left: 8px;
    opacity: 0.8;
    vertical-align: middle;
}

/* ===== Custom B&W <select> replacement (custom-select.js) ===== */
.cs-wrap {
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.cs-button {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--text);
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: 0;
}

.cs-button:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.cs-button--open {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.cs-caret {
    opacity: 0.5;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.cs-button--open .cs-caret {
    transform: rotate(180deg);
}

.cs-popover {
    background: var(--bg);
    border: 1px solid var(--text);
    z-index: 10001;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: inherit;
    box-shadow: 0 0 0 1px var(--bg);
}

.cs-option {
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.cs-option:last-child {
    border-bottom: none;
}

.cs-option:hover:not(.cs-option--disabled) {
    background: color-mix(in srgb, var(--text) 10%, transparent);
}

.cs-option--active {
    background: color-mix(in srgb, var(--text) 18%, transparent);
    font-weight: 600;
}

.cs-option--active::before {
    content: '✓ ';
    opacity: 0.7;
    margin-right: 2px;
}

.cs-option--disabled {
    opacity: 0.3;
    cursor: default;
    text-align: center;
    letter-spacing: 0.15em;
    pointer-events: none;
}

.sl-num {
    color: var(--text);
    opacity: 0.3;
    min-width: 20px;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sl-info {
    flex: 1;
    min-width: 0;
}

.sl-title {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-meta {
    font-size: 12px;
    color: var(--text);
    opacity: 0.4;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
}

.sl-btn {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    flex-shrink: 0;
    padding: 0;
    transition: opacity 0.15s ease;
}

.sl-btn:hover {
    opacity: 1;
}

.sl-btn--public-on {
    opacity: 1;
}

.sl-btn--play {
    border: 1px solid var(--text);
    opacity: 0.7;
}

.sl-btn--play:hover {
    opacity: 1;
}

@media (hover: none) {
    .sl-btn {
        opacity: 0.5;
    }
    .sl-btn--public-on {
        opacity: 1;
    }
}

/* Song item selected state (bulk mode) */
#loadSongModal .song-item-selected {
    background: var(--text) !important;
}

#loadSongModal .song-item-selected .sl-title,
#loadSongModal .song-item-selected .sl-meta,
#loadSongModal .song-item-selected .sl-num,
#loadSongModal .song-item-selected .sl-btn {
    color: var(--bg) !important;
}

#loadSongModal .song-item-selected::after {
    display: none;
}

#loadSongModal .song-item-selected input[type="checkbox"] {
    accent-color: var(--bg) !important;
}

/* Inverted buttons (bg=text, color=bg) inside Song Library — override safety-net */
#loadSongModal .primary-button {
    background: var(--text) !important;
    color: var(--bg) !important;
}

/* All modals: overflow protection */
.modal-overlay .modal-body {
    overflow-x: hidden;
}

/* Hide scrollbar but keep scrollable */
#songList {
    scrollbar-width: none; /* Firefox */
}
#songList::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Mobile: full-screen modals with 10px side padding */
@media (max-width: 720px) {
    .modal-overlay .modal-container {
        max-width: 100% !important;
        max-height: 100vh;
        height: 100%;
        margin: 0;
        border: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-overlay .modal-body {
        padding: 16px 10px;
    }

    /* Stack flex items vertically on mobile */
    .modal-overlay [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
    }

    /* Session cards: stack info and buttons vertically */
    .session-item>[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 12px;
    }

    .session-item>[style*="display: flex"]>[style*="flex-direction: column"] {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Override box-shadow inline styles */
[style*="box-shadow"] {
    box-shadow: none !important;
}

/* Override accent-color */
[style*="accent-color"] {
    accent-color: var(--text) !important;
}

/* Override border-radius inline */
[style*="border-radius: 8px"],
[style*="border-radius: 10px"],
[style*="border-radius: 12px"],
[style*="border-radius: 16px"],
[style*="border-radius: 20px"],
[style*="border-radius: 24px"],
[style*="border-radius: 50%"] {
    border-radius: 0 !important;
}

/* Override backdrop-filter */
[style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Music section */
.music-section {
    margin-top: 16px;
}

.music-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
}

.music-add-btn:hover {
    background: var(--text);
    color: var(--bg);
}

.music-icon {
    width: 20px;
    height: 20px;
}

.music-player-container {
    border: 1px solid var(--border);
    border-radius: 0;
    margin-top: 8px;
    overflow: hidden;
}

.music-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.music-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.music-remove-btn {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
}

.music-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.music-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.music-links-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.music-link-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s ease;
}

.music-link-btn:hover {
    background: var(--text);
    color: var(--bg);
}

.music-link-remove {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    margin-left: 4px;
}

/* Session section */
.session-section {
    margin: 20px 0;
}

/* Visualizer promo */
.visualizer-promo {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
}

/* Support section override */
.support-section {
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* === Inline Pricing (desktop) vs Compact Ad (mobile) === */
#inlinePricing { display: block; }
#support { display: none; }
@media (max-width: 768px) {
    #inlinePricing { display: none !important; }
    #support { display: block; }
}
.pricing-hidden { display: none !important; }

/* === Navigation Tab Bar === */
.app-nav-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    width: 100%;
}

.nav-bar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.nav-tab:hover {
    opacity: 0.8;
}

.nav-tab.active {
    opacity: 1;
    border-bottom-color: var(--text);
    font-weight: 600;
}

/* --- Live Session Sub-menu --- */
.nav-submenu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.nav-submenu-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-submenu-btn:hover {
    background: var(--text);
    color: var(--bg);
}

/* --- Tools Combined View --- */
.tools-combined-view {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
}

.tools-combined-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tools-panel {
    border: 1px solid var(--border);
    padding: 16px;
    background: var(--bg);
}

.tools-panel-header {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* --- Nav Bar Mobile --- */
@media (max-width: 480px) {
    .nav-tab {
        font-size: 0.75rem;
        padding: 10px 8px;
    }

    .nav-bar-container {
        padding: 0 8px;
    }

    .nav-submenu {
        padding: 6px 8px;
        gap: 4px;
    }

    .nav-submenu-btn {
        font-size: 0.75rem;
        padding: 6px 10px;
        flex: 1;
        text-align: center;
    }

    .tools-combined-view {
        padding: 12px 8px;
    }

    .tools-panel {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .tools-combined-container {
        grid-template-columns: 1fr;
    }
}

/* ============= VIEW ONLY MODE (shared song links) ============= */
body.view-only-mode .app-header,
body.view-only-mode #appNavBar,
body.view-only-mode .hero,
body.view-only-mode .workflow,
body.view-only-mode #toolsCombinedView,
body.view-only-mode .side-menu-panel,
body.view-only-mode .side-menu-overlay,
body.view-only-mode .preview-section,
body.view-only-mode .editor-panel,
body.view-only-mode #advancedControls,
body.view-only-mode .session-section,
body.view-only-mode .support-section,
body.view-only-mode .app-footer,
body.view-only-mode #liveSessionSubmenu {
    display: none !important;
}

body.view-only-mode .preview-scale-wrapper {
    max-width: 100%;
}

body.view-only-mode .container {
    padding-top: 10px;
}

/* Pricing Ad Banners */
.pricing-ad-tier {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.pricing-ad-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--text) !important;
}

/* ============= SIMPLE / PRO MODE ============= */
/* Hide advanced controls in Simple mode. Pro mode is the default (shows all). */
html[data-mode="simple"] .pro-only {
    display: none !important;
}
/* Visible affordance so users know Simple mode is active */
html[data-mode="simple"] .simple-mode-badge {
    display: inline-block;
}
.simple-mode-badge {
    display: none;
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid var(--border);
    opacity: 0.6;
    margin-left: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.app-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.85rem;
}
.app-mode-row input[type="checkbox"] {
    cursor: pointer;
}
.app-mode-row label {
    cursor: pointer;
    user-select: none;
}
.app-mode-row .hint {
    font-size: 0.7rem;
    opacity: 0.55;
}