/* — Core Variables & Themes — */
@font-face {
    font-family: 'Assistant-Regular';
    src: url('../fonts/Assistant-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OHAdirMesika-Regular';
    src: url('../fonts/OHAdirMesika-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-header: 'Assistant-Regular', sans-serif;
    --font-body-default: 'Assistant-Regular', sans-serif;
    --font-chord-default: 'Assistant-Regular', sans-serif;
    --font-body-oot: 'Assistant-Regular', sans-serif;
    --font-chord-oot: 'Assistant-Regular', sans-serif;
    --font-body: var(--font-body-default);
    --font-chord: var(--font-chord-default);
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------
 * Chord Strip Styles
 * These styles define the appearance of the chord strip bar that appears
 * at the top of the song page when the user toggles it on. Each chord
 * item is given a fixed square container for its SVG diagram, similar
 * to the pop-up diagram. The SVG itself is scaled to fill the box,
 * ensuring that the full guitar diagram is visible within the strip.
 */

/* Container for each chord item in the strip */
.chord-strip-item {
    text-align: center;
    cursor: pointer;
    min-width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Box that will house the rendered SVG guitar diagram */
.chord-strip-diagram {
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the SVG fills its container appropriately */
/* Scale the guitar diagram proportionally so it fits within the square
   without distortion. By setting height to auto and constraining the
   maximum dimensions, the SVG keeps its aspect ratio and centers
   itself within the box. */
.chord-strip-diagram svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}

/* Optional: spacing and fonts for chord name and count */
.chord-strip-name {
    margin-top: 4px;
    font-weight: bold;
    color: var(--text-primary, inherit);
}

.chord-strip-count {
    font-size: 0.8em;
    color: var(--text-secondary, #64748b);
}

/* עדכון המחלקה שמפעילה את הפונט הדינמי */
.achord-song-wrapper.oot-haim-active {
    --font-body: var(--font-body-oot);
    --font-chord: var(--font-chord-oot);
}

/* הבטחת משקל 600 לאקורדים */
.achord-chord {
    font-weight: 600 !important;
}

/* אקורדים חופשיים - מילת רפאים */
.achord-lyrics:has-text('♪') {
    font-size: 0;
    width: 0.5em;
    display: inline-block;
}

/* האקורד שמגיע אחרי מילת הרפאים */
.achord-phantom-word+.achord-chord {
    margin-right: 0.2em;
    position: relative;
}

/* התאמה למצב הדפסה */
@media print {
    /* הסתרת אלמנטים שלא שייכים להדפסה */
    #wpadminbar,
    .site-header, #masthead, header.site-header,
    .site-footer, footer.site-footer,
    .achord-bottom-controls-cluster,
    .achord-tabs-nav,
    .achord-popup,
    .achord-options-drawer,
    #chord-strip-bar,
    .achord-phantom-word,
    nav, .nav-bar {
        display: none !important;
    }

    /* רקע לבן וטקסט כהה לכל הדף */
    body, html {
        background: #fff !important;
        color: #000 !important;
    }

    /* הסרת עיצוב מהמעטפת — כולל מצב לילה וכל ערכת-צבע.
       הרקע/הריפוד מוגדרים על .achord-song / .achord-song-wrapper דרך
       משתני CSS (ללא !important), לכן !important כאן גובר תמיד. */
    .achord-wrapper,
    .achord-song-wrapper,
    .achord-song,
    .achord-tab-content,
    .achord-content {
        background: #fff !important;
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
    }
    .achord-song,
    .achord-song-wrapper,
    .achord-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* טקסט השיר כהה לקריאה על נייר, גם אם מצב לילה פעיל */
    .achord-content,
    .achord-content * {
        color: #000 !important;
        background: transparent !important;
        text-shadow: none !important;
    }

    /* הכותרת – ממורכזת ונקייה */
    .achord-header {
        text-align: center;
        margin-bottom: 16px;
    }
    .achord-title { font-size: 22pt; margin: 0 0 4px; }
    .achord-performer { font-size: 14pt; margin: 0 0 4px; }
    .achord-writer, .achord-song-details { font-size: 10pt; color: #444 !important; }

    /* תוכן השיר */
    .achord-content {
        font-size: 12pt;
        line-height: 2.2;
    }

    /* אקורדים – כחול כהה שמודפס טוב; specificity גבוה כדי לגבור על
       הכלל שמשחיר את כל הטקסט וגם על צבע ערכת-הצבע (זהב) */
    .achord-content .achord-chord,
    .achord-chord {
        color: #003399 !important;
        font-weight: bold !important;
        text-shadow: none !important;
    }

    /* הסתרת הגרסה הקלה אם קיימת */
    .achord-version[data-version="easy"] {
        display: none !important;
    }
    .achord-version[data-version="normal"] {
        display: block !important;
    }

    /* הצגת רק טאב האקורדים */
    .achord-tab-content {
        display: none !important;
    }
    #tab-chords {
        display: block !important;
    }
}

.theme-conductor {
    --bg-page: #0D1B33;
    --bg-song: #F1DAC4;
    --text-primary: #0D1B33;
    --text-secondary: #5a6475;
    --text-chord: #00509D;
    --border-color: #DCD0C1;
    --accent-primary: #B68C64;
    --accent-primary-text: #FFFFFF;
    --bg-control: rgba(228, 212, 193, 0.9);
    --bg-control-hover: #d1bfae;
    --piano-white-key: #F1DAC4;
    --piano-white-key-highlight: #B68C64;
    --piano-black-key: #0D1B33;
    --piano-black-key-highlight: #8E6C4D;
}

.theme-studio {
    --bg-page: #F1F7F9;
    --bg-song: #FFFFFF;
    --text-primary: #00171F;
    --text-secondary: #64748B;
    --text-chord: #1D4E89;
    --border-color: #E2E8F0;
    --accent-primary: #1D4E89;
    --accent-primary-text: #FFFFFF;
    --bg-control: rgba(248, 250, 252, 0.9);
    --bg-control-hover: #e2e8f0;
    --piano-white-key: #FFFFFF;
    --piano-white-key-highlight: #1D4E89;
    --piano-black-key: #00171F;
    --piano-black-key-highlight: #12345A;
}

.dark-mode.theme-conductor {
    --bg-page: #060e1c;
    --bg-song: #1f2937;
    --text-primary: #E5E7EB;
    --text-secondary: #9CA3AF;
    --text-chord: #FFC857;
    --border-color: #374151;
    --bg-control: rgba(55, 65, 81, 0.9);
    --bg-control-hover: #4b5563;
    --piano-white-key: #374151;
    --piano-white-key-highlight: #B68C64;
    --piano-black-key: #E5E7EB;
    --piano-black-key-highlight: #8E6C4D;
}

.dark-mode.theme-studio {
    --bg-page: #00171F;
    --bg-song: #0b2531;
    --text-primary: #F1F7F9;
    --text-secondary: #94A3B8;
    --text-chord: #00A8E8;
    --border-color: #1E293B;
    --accent-primary: #00A8E8;
    --accent-primary-text: #00171F;
    --bg-control: rgba(30, 41, 59, 0.9);
    --bg-control-hover: #475569;
    --piano-white-key: #1E293B;
    --piano-white-key-highlight: #00A8E8;
    --piano-black-key: #F1F7F9;
    --piano-black-key-highlight: #007AB3;
}

/* --- Base Layout & Song Display --- */
.achord-song-wrapper {
    background-color: var(--bg-page);
}

.achord-song-wrapper.oot-haim-active {
    --font-body: var(--font-body-oot);
}

.achord-song {
    background: var(--bg-song);
    color: var(--text-primary);
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) 180px;
    min-height: 100vh;
}

.achord-header {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.achord-content {
    --base-font-size: clamp(24px, 1.8vw + 0.8rem, 30px);
    font-size: var(--base-font-size);
    line-height: 1.8;
    font-family: var(--font-body);
}

h1.achord-title {
    font-family: var(--font-header);
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--text-primary);
}

h2.achord-performer {
    font-family: var(--font-header);
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 0.25rem;
}

p.achord-writer {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.achord-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: calc(var(--base-font-size) * 0.8);
    gap: 0.25em 0.5em;
}

.achord-word-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
    padding-bottom: 0.2em;
}

.achord-chord {
    font-family: var(--font-chord);
    font-weight: 700;
    font-size: 0.85em;
    color: var(--text-chord);
    cursor: pointer;
    min-height: 1.2em;
    margin-bottom: 0.3em;
    padding: 0.2em 0.4em;
    /* אקורדים לטיניים בהקשר RTL: בלי בידוד, סימן ניטרלי (# / סלאש) משתרבב והאקורד
       מוצג הפוך (F# → #F). isolate + direction:ltr נועל את הסדר הפנימי ל-LTR. */
    direction: ltr;
    unicode-bidi: isolate;
}

.achord-lyrics {
    font-family: var(--font-body);
}

.achord-placeholder-chord {
    visibility: hidden;
}

/* אקורד באמצע מילה (המ[Eb]רצע[A]) — המילה מוצגת רציפה, כל אקורד ממוקם מעל ההברה שלו */
.achord-midword .achord-lyrics {
    position: relative;
    white-space: nowrap;
}

.achord-seg {
    position: relative;
}

.achord-seg {
    position: relative;
}

.achord-seg > .achord-chord {
    position: absolute;
    bottom: calc(100% + 0.35em);
    right: 50%;
    transform: translateX(50%);
    margin-bottom: 0;
    padding: 0.1em 0.1em;
    min-height: 0;
    line-height: 1;
    white-space: nowrap;
}

/* בלוק טאבלטורה (טאבים) — מונוספייס LTR ששומר יישור-מיתרים; מנוטרל מכיוון-RTL של הדף.
   הצבעים דרך משתני-התמה כדי להתאים אוטומטית ל-dark-mode. */
.achord-tab-block {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    color: var(--text-primary);
    background: var(--bg-control);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 8px);
    padding: 0.6em 0.8em;
    margin: 0.8em 0;
    font-size: 0.92em;
    line-height: 1.4;
}

.achord-tab-line {
    white-space: pre;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}

.achord-seg-bare {
    display: inline-block;
    width: 0;
}

/* --- Bottom Controls - התיקון הסופי --- */
.achord-bottom-controls-cluster {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

[dir="rtl"] .achord-bottom-controls-cluster {
    left: auto;
    right: 1rem;
    align-items: flex-end;
}

.achord-options-drawer {
    /* הופכים את המגירה ל"מדף צף" שממוקם מעל הסרגל הראשי */
    position: absolute;
    bottom: calc(100% + 0.5rem);
    /* 100% גובה הסרגל + 0.5rem רווח */
    right: 0;
    /* יישור לימין עבור RTL */

    background: var(--bg-control);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    width: 320px;
    max-width: 320px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    border: 1px solid var(--border-color);

    /* אנימציה והסתרה */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.achord-options-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}

.achord-main-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-control);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

/*------------------------------------------------------------- */

.control-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
}

.control-button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

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

.control-button.active {
    color: var(--accent-primary);
}

/* כפתור-הכוכב (גרסה קלה) — מצב לחוץ: רק שינוי-צבע */
#achord-toggle-version.active {
    color: #f59e0b;
}

.control-info {
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 0.25rem;
    font-size: 1rem;
    text-align: center;
    min-width: 2ch;
}

#achord-capo-info {
    font-size: 0.8rem;
}

.drawer-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.drawer-combined-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: flex-start;
}

.drawer-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.drawer-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.drawer-buttons-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.drawer-button {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-song);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

.drawer-button.icon-button {
    font-size: 1.2rem;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-button.special-link {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    border-color: var(--accent-primary);
}


/* כפתור "מילים בלבד" — מצב פעיל (אקורדים מוסתרים) */
#achord-lyrics-only-toggle.active {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    border-color: var(--accent-primary);
}

/* מצב "מילים בלבד": מסתירים אקורדים (רגילים ופלייסהולדרים) וטאבים,
   מקפלים את רווח-האקורד של קבוצת-המילה, ומעלימים קבוצות ללא מילה
   (אקורד עצמאי בין-מילים) שמסומנות ב-JS כ-uc-empty-lyric. */
.achord-song-wrapper.uc-lyrics-only .achord-chord {
    display: none;
}
.achord-song-wrapper.uc-lyrics-only .achord-word-group {
    padding-bottom: 0;
}
.achord-song-wrapper.uc-lyrics-only .achord-word-group.uc-empty-lyric {
    display: none;
}
.achord-song-wrapper.uc-lyrics-only .achord-tab-block {
    display: none;
}

/* --- Popups & Diagrams --- */
.achord-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.achord-popup.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* (שאר קוד ה-CSS ממשיך מכאן ללא שינוי...) */
.achord-popup-content {
    background: var(--bg-song);
    color: var(--text-primary);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    border: 1px solid var(--border-color);
}

.achord-close {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-secondary);
}

#achord-diagram {
    direction: ltr;
}

.achord-piano-diagram-wrapper {
    position: relative;
    padding-top: 10px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.piano-key-group {
    position: relative;
    display: flex;
    height: 150px;
    min-width: fit-content;
}

.piano-key {
    position: absolute;
    box-sizing: border-box;
    cursor: default;
    user-select: none;
}

.white-key {
    width: 40px;
    height: 100%;
    background: var(--piano-white-key);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-right: -1px;
    z-index: 0;
}

.white-key.highlighted {
    background: var(--piano-white-key-highlight);
    border-color: var(--accent-primary);
}

.black-key {
    width: 25px;
    height: 60%;
    background: var(--piano-black-key);
    border: 1px solid var(--text-primary);
    border-top: none;
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

.black-key.highlighted {
    background: var(--piano-black-key-highlight);
    border-color: var(--accent-primary);
}

.key-label {
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-secondary);
    pointer-events: none;
}

.black-key .key-label {
    color: var(--piano-white-key);
    font-size: 0.75em;
    top: 5px;
}

.white-key.highlighted .key-label,
.black-key.highlighted .key-label {
    color: var(--accent-primary-text);
}

/* --- Accordion & Related Posts (מתוסף 2 ו-4) --- */
.achord-accordion-container {
    max-width: 900px;
    margin: 40px auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background-color: var(--bg-song);
    color: var(--text-primary);
}

.achord-accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.achord-accordion-item:last-child {
    border-bottom: none;
}

.achord-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-chord);
    background-color: rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: background-color 0.2s;
}

.achord-accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.achord-accordion-header.active {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
}

.achord-accordion-header .arrow {
    transition: transform 0.2s;
    transform-origin: center;
}

.achord-accordion-header.active .arrow {
    transform: rotate(180deg);
}

.achord-accordion-content {
    display: none;
    padding: 15px 20px;
    background-color: transparent;
    line-height: 1.6;
}

.achord-accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.achord-accordion-list li {
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 8px;
}

.achord-accordion-list li:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.achord-accordion-list a {
    font-size: 1.1em;
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.achord-accordion-list a:hover {
    color: var(--text-chord);
    text-decoration: underline;
}

.achord-accordion-no-posts {
    padding: 10px 20px;
    color: var(--text-secondary);
    font-style: italic;
}

.achord-accordion-section-title {
    font-size: 1.6em;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 10px;
    text-align: right;
    padding-right: 20px;
}

.achord-letter-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-chord);
    margin: 15px 0 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

.related-posts-container {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}

.related-posts-section {
    margin-bottom: 20px;
}

.related-posts-section h3 {
    font-size: 1.5em;
    color: var(--text-primary);
    margin-bottom: 15px;
    text-align: right;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.related-post-card {
    display: block;
    background: var(--bg-control);
    padding: 15px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all .2s ease;
    border: 1px solid var(--border-color);
}

.related-post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-primary);
}

.related-post-title {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1.1em;
}

.related-post-performer {
    display: block;
    font-size: 0.9em;
    color: var(--text-secondary);
}

/* === Upload Form / Wizard (Achord Upload) === */
#achord-upload-form.upload-wizard {
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--font-body);
}

#achord-upload-form .upload-step {
    margin-bottom: 2rem;
}

#achord-upload-form .upload-step h3 {
    font-size: 1.2rem;
    margin-bottom: .75rem;
}

/* =========================
   Achord Upload – Topfold (Sticky) + Recommended Chords + PDF
   ========================= */

/* משתני פריסה לטופס ההעלאה (נחוצים ל-sticky) */
:root {
    --upload-top-offset: calc(env(safe-area-inset-top, 0px) + 0px);
    --rec-label-h: 26px;
    /* גובה כותרת "אקורדים מומלצים" אם קיימת */
    --rec-h: 190px;
    /* גובה פס המומלצים */
    --pdf-h: 160px;
    /* גובה אזור ה-PDF */
}

/* כותרת חיצונית מחוץ לסטיקי (אם יש) */
.recommended-label {
    position: sticky;
    top: var(--upload-top-offset);
    z-index: 101;
    background: #fff;
    padding: 6px 12px 0;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* === Topfold – המכלול הדביק (חוזרים למבנה המקורי) === */
/* תופסים גם class וגם id כדי לכסות וריאציות DOM */
#achord-upload-form .achord-topfold,
#achord-topfold {
    position: sticky;
    top: calc(var(--upload-top-offset) + var(--rec-label-h));
    z-index: 100;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    display: grid;
    grid-template-rows: var(--rec-h) var(--pdf-h);
    gap: 1px;
    padding: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* פינוי מקום לתוכן שמתחת ל-Topfold */
#achord-upload-form {
    padding-top: calc(var(--upload-top-offset) + var(--rec-label-h) + var(--rec-h) + var(--pdf-h) + 20px);
}

/* === Recommended Chords (110px) === */
#achord-upload-form .recommended-top {
    width: 100%;
    height: var(--rec-h);
    box-sizing: border-box;
    padding: 4px 12px 4px;
    background: inherit;
    display: flex;
    flex-direction: column;
}

#achord-upload-form .recommended-top>label {
    display: none;
}

/* סרגל האקורדים – גלילה תמידית ואנכית */
#achord-upload-form .recommended-chords-bar {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px 6px;
    height: calc(var(--rec-h) - 8px);
    overflow-y: scroll;
    /* גלילה גלויה תמיד */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    position: relative;
    /* לבקרת תגים בפנים */
}

/* פריט בסרגל – עובד ל-div/a/button */
#achord-upload-form .recommended-chords-bar>* {
    position: relative;
    /* מאפשר הצמדה בפינות */
    flex: 0 0 70px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f4;
    border: 1px solid #dfe1e5;
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06), inset 0 -2px 0 rgba(0, 0, 0, .05);
    font-weight: 500;
    letter-spacing: .2px;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform .04s ease, box-shadow .12s ease;
    /* מקום לכוכב ולמספר */
    padding-left: 22px;
    /* כוכב – שמאל */
    padding-right: 22px;
    /* מספר – ימין */
}

#achord-upload-form .recommended-chords-bar>*:active {
    transform: translateY(1px);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}

#achord-upload-form .recommended-chords-bar .is-selected {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06), inset 0 0 0 2px #222, inset 0 -2px 0 rgba(0, 0, 0, .05);
}

/* כוכב – נעוץ בשמאל למעלה (נתמוך בכמה מחלקות/דגלים) */
#achord-upload-form .recommended-chords-bar>* .fav-star,
#achord-upload-form .recommended-chords-bar>* .star,
#achord-upload-form .recommended-chords-bar>* .star-icon,
#achord-upload-form .recommended-chords-bar>* .icon-star,
#achord-upload-form .recommended-chords-bar>* .is-fav,
#achord-upload-form .recommended-chords-bar>* [data-fav="1"] {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 12px;
    color: #f39c12;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

/* מספר קטן – בימין למעלה */
#achord-upload-form .recommended-chords-bar>* .chord-num {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    opacity: .9;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

/* חיווי הבהוב בעת בחירה דרך מספר במקלדת */
#achord-upload-form .recommended-chords-bar>*.blink {
    animation: achord-blink-highlight .28s ease;
}

@keyframes achord-blink-highlight {
    0% {
        background: #d9ecff;
    }

    100% {
        background: inherit;
    }
}

/* פס גלילה דקורטיבי (שמאל) – אופציונלי */
#achord-upload-form .recommended-chords-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .08);
    pointer-events: none;
}

#achord-upload-form .recommended-chords-bar.no-scroll::after {
    opacity: 0;
}

/* === PDF (130px) === */
#achord-upload-form .achord-sticky-pdf-viewer {
    height: var(--pdf-h);
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px 0;
    background: #fff;
}

#achord-upload-form .pdf-viewer-shell {
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    display: flex;
    flex-direction: column;
}

#achord-upload-form .pdf-viewer-header {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    background: #fafafa;
}

#achord-upload-form .pdf-viewer-iframe {
    width: 100%;
    height: calc(100% - 28px);
    border: 0;
    display: block;
    background: #fff;
}

/* Scrollbar style (דקורטיבי) */
#achord-upload-form .recommended-chords-bar::-webkit-scrollbar,
#achord-upload-form .pdf-viewer-shell::-webkit-scrollbar {
    width: 6px;
}

#achord-upload-form .recommended-chords-bar::-webkit-scrollbar-thumb,
#achord-upload-form .pdf-viewer-shell::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 6px;
}

/* --- Display Engine & Page Templates (מתוסף 4) --- */
body.single-lesson .post-navigation,
body.single-achord_song_cpt .post-navigation,
body.single-lesson .wp-block-post-navigation,
body.single-achord_song_cpt .wp-block-post-navigation,
body.single-lesson footer.wp-block-template-part,
body.single-achord_song_cpt footer.wp-block-template-part,
body.single-lesson .wp-block-group>h2.wp-block-heading,
body.single-achord_song_cpt .wp-block-group>h2.wp-block-heading {
    display: none !important;
}

.lesson-article {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.lesson-header .achord-title-row {
    background: linear-gradient(90deg, #e0f2fe 50%, #f0faff 100%);
    border-radius: 15px;
    font-size: 1.6em;
    font-weight: 700;
    color: #0d47a1;
    margin: 0 auto 10px auto;
    padding: 14px 4vw 10px 3vw;
    box-shadow: 0 4px 15px rgba(25, 118, 210, 0.05);
    text-align: right;
    line-height: 1.3;
}

.lesson-header .achord-performer {
    font-size: 0.95em;
    color: #1565c0;
}

.lesson-difficulty {
    text-align: right;
    font-size: 1.1em;
    color: #555;
    font-weight: 600;
    margin-bottom: 30px;
    padding-right: 10px;
}

.lesson-author-box {
    display: flex;
    text-align: right;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 15px;
    background-color: #f7f9fc;
    border-radius: 8px;
}

.lesson-author-box .avatar {
    border-radius: 50%;
}

.author-more-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9em;
    font-weight: 700;
    color: #3d5afe;
    text-decoration: none;
    padding: 5px 12px;
    background: #e8eaf6;
    border-radius: 5px;
}

.author-more-link:hover {
    background: #c5cae9;
}

.lesson-video-wrapper {
    position: relative;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 30px;
}

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

.lesson-article .achord-song,
.lesson-article .tavim-wrapper {
    box-shadow: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
    border: none;
}

.lesson-article .achord-song .achord-header {
    display: none;
}

.lesson-link-banner {
    max-width: 840px;
    margin: 20px auto;
    padding: 1rem;
    background-color: var(--bg-control);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-align: center;
}

.lesson-link-banner a {
    font-weight: 700;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 1.1em;
}

/* --- Tavim Player (מתוסף 6) --- */
.tavim-wrapper {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    background: var(--bg-song);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

/* הערה: לא מעצבים background/padding על .tavim-notation — abcjs במצב responsive
   דורס אותו בסגנון-inline (טריק aspect-ratio), והתווים הם fill="currentColor" כך
   שמצב-הלילה כבר קריא (תווים בהירים על רקע כהה). גזירת-קצוות נמנעת ע"י staffwidth-22. */

/* מובייל: כפתורי בקרה עם יעדי-מגע נוחים (≥44px) וריווח אחיד */
@media (max-width: 560px) {
    .tavim-wrapper { padding: 12px; }
    .tavim-controls { gap: 8px; padding: 10px; margin: 14px 0; }
    .tavim-controls button {
        min-height: 44px;
        min-width: 0;
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 15px;
    }
}

.abcjs-cursor {
    stroke: #ff2121 !important;
    stroke-width: 2px !important;
}

.abcjs-note_playing {
    fill: #ffe46b !important;
    stroke: #e74c3c !important;
    stroke-width: 2px;
}

.tavim-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-page);
    border-radius: 8px;
    flex-wrap: wrap;
}

.tavim-controls button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
    min-width: 80px;
}

.tavim-controls button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tavim-controls button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ===== מודול אצבוע — כפתורים ===== */
.whistle-btn {
    transition: background-color 0.2s, transform 0.15s;
    font-size: 13px !important;
}
.whistle-btn:hover {
    transform: translateY(-2px);
}

/* ===== מצב תווים — דיאגרמות בתוך SVG ===== */
.whistle-fingering {
    pointer-events: none;
    animation: whistleFadeIn 0.25s ease;
}
@keyframes whistleFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== פאנל תו נוכחי ===== */
#whistle-panel {
    margin: 12px 0 0;
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: wpFadeIn 0.3s ease;
    direction: rtl;
}
@keyframes wpFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wp-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.wp-instrument-label {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #222);
}
.wp-note-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent, #0073aa);
    min-width: 55px;
    text-align: center;
    transition: color 0.2s;
}
.wp-mode-btn {
    font-size: 12px !important;
    padding: 5px 12px !important;
    background: transparent;
    border: 1px solid var(--border-color, #ccc) !important;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #555);
    transition: background 0.2s;
}
.wp-mode-btn:hover {
    background: var(--bg-page, #f5f5f5);
}

.wp-diagram-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 80px;
}
.wp-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}
.wp-diagram svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}
.wp-hint {
    font-size: 12px;
    color: var(--text-secondary, #888);
    text-align: center;
}
.wp-no-data {
    font-size: 13px;
    color: #e74c3c;
    margin: 0;
}

/* שם הפאנל */
.wp-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid var(--border-color, #eee);
    padding-bottom: 6px;
    margin-bottom: 2px;
}

/* כפתורי מצב פעילים */
.wp-mode-btn--active {
    background: var(--bg-page, #f0f0f0) !important;
    border-color: var(--text-primary, #333) !important;
    color: var(--text-primary, #333) !important;
    font-weight: 600;
}
.wp-mode-btns {
    display: flex;
    gap: 6px;
}

/* ===== אצבוע מלא ===== */
#whistle-full-panel {
    margin: 10px 0 0;
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 10px;
    padding: 12px 14px;
    animation: wpFadeIn 0.3s ease;
    direction: rtl;
}
.wfp-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #333);
    margin-bottom: 10px;
    text-align: center;
}
.wfp-strip {
    display: flex;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
}
.wfp-strip::-webkit-scrollbar { height: 4px; }
.wfp-strip::-webkit-scrollbar-track { background: var(--bg-page, #f5f5f5); border-radius: 2px; }
.wfp-strip::-webkit-scrollbar-thumb { background: var(--border-color, #ccc); border-radius: 2px; }

.wfp-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 3px;
    border-radius: 5px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s, background 0.2s;
    flex-shrink: 0;
    cursor: default;
}
.wfp-note--active {
    border-color: var(--accent, #0073aa);
    background: rgba(0,115,170,0.07);
}
.wfp-svg svg {
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
}
.wfp-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    text-align: center;
}

#tavim-play {
    background: #28a745;
    color: white;
}

#tavim-pause {
    background: #ffc107;
    color: #212529;
}

#tavim-stop {
    background: #dc3545;
    color: white;
}

#tavim-tempo {
    background: #17a2b8;
    color: white;
}

.metronome-icon {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #c0c0c0;
    border: 3px solid #7fe98c;
    position: relative;
    cursor: pointer;
    transition: all 0.15s ease;
}

.metronome-icon:before {
    content: "♪";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666;
}

.metronome-on {
    background: #21e25a !important;
    box-shadow: 0 0 20px 4px #49ff90, 0 0 5px #21e25a !important;
    border-color: #0d8f46 !important;
    transform: scale(1.1);
}

.metronome-on:before {
    color: #fff !important;
}

.tempo-display {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tempo-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.tempo-slider {
    width: 120px;
}

.tempo-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-align: center;
    background-color: var(--bg-song);
    color: var(--text-primary);
}

.hidden {
    display: none !important;
}

/* --- תיקון עיצוב לכפתור "הוסף אקורד" --- */
#achord-upload-form .add-chord-btn {
    background-color: var(--accent-primary) !important;
    color: var(--accent-primary-text) !important;
}

/* =============================================== */
/*תיקון התנגשות בין תצוגת האקורדים לנגן התווים 
/* =============================================== */
.lesson-section .achord-song,
.lesson-section .tavim-wrapper {
    isolation: isolate;
}

/* --- *** תוספת: שיפורי CSS למגירת הפונטים *** --- */
.new-drawer-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}


.new-drawer-selector-wrapper {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-md);
}

.new-drawer-font-list {
    padding: 4px 0;
    list-style: none;
    margin: 0;
}

.new-drawer-font-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
    opacity: 0.8;
}

.new-drawer-font-list li .font-name {
    font-size: 1.1rem;
    transition: font-family 0.3s;
}

.new-drawer-font-list li:hover {
    background-color: var(--bg-control-hover);
}

.new-drawer-font-list li.active {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    opacity: 1;
}

.new-drawer-font-list li.loading {
    cursor: not-allowed;
    opacity: 0.5;
}

.new-drawer-font-list li.error {
    opacity: 0.6;
    text-decoration: line-through;
    color: #e53935;
    cursor: not-allowed;
}

.new-drawer-font-list li.error:hover {
    background-color: transparent;
}

.new-drawer-font-list li.loaded {
    opacity: 1;
}

.font-info-link {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.5;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.new-drawer-font-list li:hover .font-info-link,
.new-drawer-font-list li.active .font-info-link {
    opacity: 1;
}

.new-drawer-font-list li.loading .font-name::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-start: 8px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: oh-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes oh-spin {
    to { transform: rotate(360deg); }
}

.new-drawer-font-list li.active .font-info-link {
    color: var(--accent-primary-text);
}

/* פתרון: הסתרת פוטר התבנית */
    #main-footer,
    .oceanwp-footer-bar {
        display: none !important;
    }

    /* === פוטר מעודכן - מותאם למשתני CSS === */
    .achord-main-footer {
        margin-top: 3rem;
        padding-top: 1rem;
        border-top: 2px solid var(--border-color);
        background: var(--bg-page);
    }

    .related-posts-section {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .related-posts-section h3 {
        color: var(--text-primary);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .related-posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .related-post-card {
        display: block;
        padding: 1rem;
        background: var(--bg-song);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: var(--transition-fast);
    }

    .related-post-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--accent-primary);
    }

    .related-post-title {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .related-post-performer {
        display: block;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    /* קישורי פוטר חדשים */
    .achord-footer-links {
        background: var(--bg-control);
        padding: 2rem 1.5rem 1rem;
    }

    .footer-section {
        margin-bottom: 1.5rem;
    }

    .footer-section h4 {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .footer-links-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-links-row a {
        color: #00008b;
        /* צבע כחול כהה קבוע */
        text-decoration: none;
        font-size: 0.9rem;
        padding: 0.5rem 0;
        /* הגדלת הגובה של הקישורים */
        border-bottom: 1px solid transparent;
        transition: var(--transition-fast);
    }

    .footer-links-row a:hover {
        color: #00008b;
        /* צבע כחול כהה קבוע במעבר עכבר */
        border-bottom-color: #00008b;
        /* צבע כחול כהה קבוע גם לקו התחתון */
    }

    /* זכויות יוצרים */
    .footer-copyright {
        text-align: center;
        padding: 1.5rem 0 1rem;
        border-top: 1px solid var(--border-color);
        margin-top: 2rem;
    }

    .footer-copyright p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin: 0;
    }

    /* מובייל */
    @media (max-width: 768px) {
        .related-posts-grid {
            grid-template-columns: 1fr;
        }

        .footer-links-row {
            flex-direction: column;
            gap: 5rem;
        }

        .footer-links-row a {
            padding: 5rem 0;
        }
    }

    /* =========================================
   עיצוב מערכת הטאבים (Single Page)
   ========================================= */
    .achord-tabs-nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 1.5rem 0 2rem;
        flex-wrap: wrap;
    }

    .tab-btn {
        background-color: var(--bg-control, #f1f5f9);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: 50px;
        padding: 10px 24px;
        font-family: var(--font-body);
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tab-btn:hover {
        background-color: var(--bg-control-hover);
        transform: translateY(-2px);
    }

    .tab-btn.active {
        background-color: var(--accent-primary);
        color: var(--accent-primary-text);
        border-color: var(--accent-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.05);
    }

    .achord-tab-content {
        animation: fadeSlideUp 0.3s ease-out forwards;
    }

    @keyframes fadeSlideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    .achord-tab-content .tavim-wrapper {
        border: none;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    @media (max-width: 600px) {
        .achord-tabs-nav {
            gap: 8px;
            margin-bottom: 1.5rem;
        }

        .tab-btn {
            padding: 8px 16px;
            font-size: 0.95rem;
            flex: 1;
            text-align: center;
            white-space: nowrap;
        }
    }


    .related-posts-section h3 {
        color: var(--text-primary);
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .related-posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .related-post-card {
        display: block;
        padding: 1rem;
        background: var(--bg-song);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: var(--transition-fast);
    }

    .related-post-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: var(--accent-primary);
    }

    .related-post-title {
        display: block;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .related-post-performer {
        display: block;
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    /* קישורי פוטר חדשים */
    .achord-footer-links {
        background: var(--bg-control);
        padding: 2rem 1.5rem 1rem;
    }

    .footer-section {
        margin-bottom: 1.5rem;
    }

    .footer-section h4 {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .footer-links-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .footer-links-row a {
        color: #00008b;
        /* צבע כחול כהה קבוע */
        text-decoration: none;
        font-size: 0.9rem;
        padding: 0.5rem 0;
        /* הגדלת הגובה של הקישורים */
        border-bottom: 1px solid transparent;
        transition: var(--transition-fast);
    }

    .footer-links-row a:hover {
        color: #00008b;
        /* צבע כחול כהה קבוע במעבר עכבר */
        border-bottom-color: #00008b;
        /* צבע כחול כהה קבוע גם לקו התחתון */
    }

    /* זכויות יוצרים */
    .footer-copyright {
        text-align: center;
        padding: 1.5rem 0 1rem;
        border-top: 1px solid var(--border-color);
        margin-top: 2rem;
    }

    .footer-copyright p {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin: 0;
    }

    /* מובייל */
    @media (max-width: 768px) {
        .related-posts-grid {
            grid-template-columns: 1fr;
        }

        .footer-links-row {
            flex-direction: column;
            gap: 5rem;
        }

        .footer-links-row a {
            padding: 5rem 0;
        }
    }

    /* =========================================
   עיצוב מערכת הטאבים (Single Page)
   ========================================= */
    .achord-tabs-nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 1.5rem 0 2rem;
        flex-wrap: wrap;
    }

    .tab-btn {
        background-color: var(--bg-control, #f1f5f9);
        color: var(--text-secondary);
        border: 1px solid var(--border-color);
        border-radius: 50px;
        padding: 10px 24px;
        font-family: var(--font-body);
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tab-btn:hover {
        background-color: var(--bg-control-hover);
        transform: translateY(-2px);
    }

    .tab-btn.active {
        background-color: var(--accent-primary);
        color: var(--accent-primary-text);
        border-color: var(--accent-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: scale(1.05);
    }

    .achord-tab-content {
        animation: fadeSlideUp 0.3s ease-out forwards;
    }

    @keyframes fadeSlideUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    .achord-tab-content .tavim-wrapper {
        border: none;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    @media (max-width: 600px) {
        .achord-tabs-nav {
            gap: 8px;
            margin-bottom: 1.5rem;
        }

        .tab-btn {
            padding: 8px 16px;
            font-size: 0.95rem;
            flex: 1;
            text-align: center;
            white-space: nowrap;
        }
    }


    /* =========================================

/* =========================================

/* =========================================
   Classic Iframe Embed (Compact & Clean)
   ========================================= */

    .achord-clean-embed {
        position: relative;
        /* יחס 16:9 חובה */
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        background: #000;

        /* --- הגדרות הגודל הקומפקטיות --- */
        /* מובייל: משאירים שוליים בצדדים */
        width: 90%;

        /* מחשב: נועלים רוחב מקסימלי (מה שנותן גובה של כ-250px) */
        max-width: 450px;

        /* מירכוז */
        margin: 20px auto 40px;

        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        z-index: 5;
    }

    /* הוידאו עצמו */
    .achord-clean-embed iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* מבטיח שלא יהיו שוליים לבנים */
        display: block;
    }

/* --- Simple Search (Mobile First / Omnibox) --- */
.ams-simple-search-wrapper {
    max-width: 650px;
    margin: 0 auto 2rem auto;
}

.ams-omnibox {
    display: flex;
    align-items: center;
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 50px;
    padding: 5px 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ams-omnibox:focus-within {
    border-color: var(--accent-primary, #3b82f6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.ams-search-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    color: var(--text-secondary, #64748b);
    margin-left: 10px;
}

.ams-omnibox-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1e293b);
    outline: none;
    font-family: inherit;
}

/* נגישות: מחוון focus גלוי לשדות חיפוש (WCAG 2.4.7) — outline הוסר בלי תחליף */
.ams-omnibox-input:focus-visible,
.achord-dynamic-search-form input:focus-visible,
.ams-simple-search-form input:focus-visible {
    outline: 2px solid var(--auf-gold, #b5936a);
    outline-offset: -2px;
    border-radius: 8px;
}

.ams-omnibox-input::placeholder {
    color: var(--text-secondary, #64748b);
    opacity: 0.7;
}

/* Difficulty Pills */
.ams-difficulty-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.ams-pill input[type="radio"] {
    display: none;
}

.ams-pill-text {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg-song, #fff);
    color: var(--text-secondary, #64748b);
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.2s;
    user-select: none;
}

.ams-pill input[type="radio"]:checked+.ams-pill-text {
    background: var(--accent-primary, #3b82f6);
    color: var(--accent-primary-text, #fff);
    border-color: var(--accent-primary, #3b82f6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ams-pill:hover .ams-pill-text {
    border-color: var(--text-secondary, #64748b);
}

/* --- כפתור toggle פאנל סינון --- */
.ams-filter-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 2px solid var(--accent-primary, #1459d8);
    background: var(--bg-page, #f8fafc);
    color: var(--accent-primary, #1459d8);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    margin-right: 6px;
    white-space: nowrap;
}

.ams-filter-toggle-label {
    font-family: inherit;
}

.ams-filter-toggle:hover,
.ams-filter-toggle--active {
    background: var(--accent-primary, #3b82f6);
    color: #fff;
    border-color: var(--accent-primary, #3b82f6);
}

/* --- פאנל סינון מתקדם --- */
.ams-filter-panel[hidden] { display: none !important; }

.ams-filter-panel {
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ams-filter-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ams-filter-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ams-filter-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--bg-page, #f8fafc);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
}

.ams-filter-select:focus {
    outline: none;
    border-color: var(--accent-primary, #3b82f6);
}

/* --- Shared Search Results Styles --- */
.achord-search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    font-size: 0.95rem;
    color: var(--text-secondary, #64748b);
    font-weight: 600;
}

.achord-search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.achord-search-result-item {
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}

.achord-search-result-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-primary, #3b82f6);
}

.achord-search-result-item .result-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    flex-wrap: wrap;
    gap: 15px;
}

.achord-search-result-item .result-title {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
    font-family: var(--font-header), inherit;
}

.achord-search-result-item .result-singer {
    font-size: 0.95rem;
    color: var(--text-secondary);
    background: transparent;
    padding: 0;
}

.achord-search-result-item .result-singer::before {
    content: '🎤 ';
    opacity: 0.7;
}

.achord-search-result-item .result-difficulty {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 30px;
}

.badge-beginner {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-advanced {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


.achord-search-no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 1.2rem;
    background: var(--bg-song);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    font-weight: 600;
    margin-top: 15px;
}

/* ── Personal Version Editor ─────────────────── */

/* כפתור עריכה — נקודה ירוקה כשיש גרסה אישית */
#achord-personal-edit {
    position: relative;
}
#achord-personal-edit.has-personal::after {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    border: 1px solid var(--bg-song);
}

/* Modal overlay */
.achord-personal-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.achord-personal-modal[hidden] { display: none !important; }

.achord-personal-modal-inner {
    background: var(--bg-song, #fff);
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    gap: 12px;
    direction: rtl;
}

.achord-personal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.achord-personal-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}
.achord-personal-modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
}

.achord-personal-modal-hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.achord-personal-modal-hint code {
    background: var(--bg-page, #f1f5f9);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
}

.achord-personal-textarea {
    width: 100%;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.7;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    background: var(--bg-page, #f8fafc);
    color: var(--text-primary);
    resize: vertical;
    box-sizing: border-box;
}

.achord-personal-modal-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.achord-personal-btn-save {
    background: var(--accent-primary, #1459d8);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.achord-personal-btn-save:hover { opacity: 0.88; }
.achord-personal-btn-save:disabled { opacity: 0.5; cursor: default; }

.achord-personal-btn-reset {
    background: none;
    border: 1px solid #e53935;
    color: #e53935;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.9rem;
    cursor: pointer;
}
.achord-personal-btn-reset:hover { background: #fef2f2; }

.achord-personal-btn-cancel {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    margin-inline-start: auto;
}
.achord-personal-btn-cancel:hover { background: var(--bg-page); }

.achord-personal-modal-status {
    margin: 0;
    font-size: 0.85rem;
    min-height: 1.2em;
    color: #2e7d32;
}

@media print {
    .achord-personal-modal { display: none !important; }
}
/* ─────────────────────────────────────────────── */

/* ── Paired save bar: אישי מול כללי ──────────────── */
.achord-save-bar {
    display: flex;
    gap: 10px;
    margin: 12px 0 6px;
}
.achord-save-bar__btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: start;
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity .15s, box-shadow .15s;
}
.achord-save-bar__btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.achord-save-bar__btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.achord-save-bar__title { font-size: 0.98rem; font-weight: 700; line-height: 1.2; }
.achord-save-bar__sub   { font-size: 0.76rem; line-height: 1.25; opacity: 0.82; }

/* אישי — עדין, מסומן כפרטי */
.achord-save-bar__btn--personal {
    background: var(--bg-page, #F7F3EC);
    border-color: var(--border-color, #d8cfc0);
    color: var(--text-primary, #0D1B33);
}
/* כללי — ה-CTA הזהוב המוכר */
.achord-save-bar__btn--public {
    background: var(--auf-gold, #B5936A);
    border-color: var(--auf-gold, #B5936A);
    color: #fff;
}
.achord-save-bar__btn--public .achord-save-bar__sub { opacity: 0.92; }

@media (max-width: 540px) {
    .achord-save-bar { flex-direction: column; }
}
/* ─────────────────────────────────────────────── */

/* ── Proposal note input ─── */
.achord-proposal-note {
    width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-page, #f8fafc);
    color: var(--text-primary);
    box-sizing: border-box;
    direction: rtl;
}

/* ── My Versions Page ─────────────────────────── */
.ams-my-versions {
    max-width: 700px;
    margin: 0 auto;
    font-family: var(--font-body, inherit);
}
.ams-mv-section { margin-bottom: 40px; }
.ams-mv-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    border-bottom: 2px solid var(--accent-primary, #1459d8);
    padding-bottom: 6px;
    margin-bottom: 16px;
}
.ams-mv-empty {
    color: var(--text-secondary, #64748b);
    font-size: 0.9rem;
}
.ams-mv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ams-mv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,255,255,0.88);
    background: var(--bg-song, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 12px 16px;
}
.ams-mv-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ams-mv-song-link {
    font-weight: 700;
    color: var(--accent-primary, #1459d8);
    text-decoration: none;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ams-mv-song-link:hover { text-decoration: underline; }
.ams-mv-singer, .ams-mv-date, .ams-mv-note, .ams-review-by {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}
.ams-mv-note { font-style: italic; }

.ams-mv-status {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.status-pending  { background: #fef3c7; color: #92400e; }
.status-approved { background: #dcfce7; color: #166534; }
.status-rejected { background: #fee2e2; color: #991b1b; }

.ams-mv-btn {
    font-size: 0.82rem;
    padding: 5px 12px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.ams-mv-btn-edit {
    background: var(--accent-primary, #1459d8);
    color: #fff;
}
.ams-mv-btn-edit:hover { opacity: 0.85; }

/* ── Review Proposals Page ──────────────────── */
.ams-review-proposals { max-width: 800px; margin: 0 auto; }
.ams-review-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ams-review-item {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.ams-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 10px;
}
.ams-review-content {
    background: var(--bg-page, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    font-size: 0.82rem;
    line-height: 1.6;
    direction: rtl;
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
    margin: 0 0 12px;
    color: var(--text-primary);
    font-family: monospace;
}
/* ── Diff Toolbar ── */
.ams-diff-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.ams-diff-toggle {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-page, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ams-diff-toggle.active {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

/* ── Diff Panel ── */
.ams-diff-panel {
    margin: 0 0 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    font-family: monospace;
    font-size: 0.82rem;
}
.ams-diff-stats {
    padding: 5px 10px;
    background: var(--bg-page, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
}
.ams-diff-stat-add    { color: #16a34a; font-weight: 600; }
.ams-diff-stat-remove { color: #dc2626; font-weight: 600; }
.ams-diff-table {
    max-height: 260px;
    overflow-y: auto;
}
.ams-diff-row {
    display: flex;
    align-items: baseline;
    padding: 1px 0;
    line-height: 1.5;
}
.ams-diff-row:hover { filter: brightness(0.96); }
.ams-diff-add    { background: #dcfce7; }
.ams-diff-remove { background: #fee2e2; }
.ams-diff-sign {
    width: 20px;
    min-width: 20px;
    text-align: center;
    color: #64748b;
    font-weight: 700;
    user-select: none;
}
.ams-diff-add    .ams-diff-sign { color: #16a34a; }
.ams-diff-remove .ams-diff-sign { color: #dc2626; }
.ams-diff-text {
    flex: 1;
    padding: 0 6px;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-primary, #1e293b);
}

.ams-review-actions { display: flex; gap: 8px; }
.ams-review-btn {
    padding: 7px 18px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.ams-review-approve { background: #22c55e; color: #fff; }
.ams-review-approve:hover { background: #16a34a; }
.ams-review-reject  { background: #ef4444; color: #fff; }
.ams-review-reject:hover  { background: #dc2626; }
.ams-review-btn:disabled { opacity: 0.5; cursor: default; }
.ams-review-status { margin: 8px 0 0; font-size: 0.85rem; color: #2e7d32; }

/* שדה סיבת דחייה */
.ams-reject-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ams-reject-reason {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1c7ba;
    border-radius: 8px;
    font-size: 0.85rem;
    background: #fafafa;
    min-width: 180px;
}
.ams-reject-reason:focus { outline: none; border-color: #b5936a; }

/* ── באנר גרסה משותפת ── */
.ams-shared-banner {
    margin: 8px 0 0;
    padding: 6px 12px;
    background: #f0f7ff;
    border: 1px solid #c3daf5;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1e4a7a;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ams-shared-back {
    margin-inline-start: auto;
    font-size: 0.8rem;
    color: #2563eb;
    text-decoration: none;
}
.ams-shared-back:hover { text-decoration: underline; }

/* ── כפתור הצע שינוי — נקודה כתומה כשיש הצעה ממתינה ── */
#achord-propose-edit {
    position: relative;
}
#achord-propose-edit.has-pending-proposal::after {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    border: 1px solid var(--bg-song);
}

/* ── Bookmark Icon (SVG) ── */
.ams-bookmark-icon {
    width: 1.1em; height: 1.1em;
    display: inline-block; vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.2s, stroke 0.2s;
}

/* ── Save Button (Bookmark) ── */
.ams-save-btn { opacity: 0.5; transition: opacity 0.2s, transform 0.15s; }
.ams-save-btn:hover { opacity: 1; transform: scale(1.15); }
.ams-save-btn.is-saved { opacity: 1; }
.ams-save-btn.is-saved .ams-bookmark-icon {
    fill: var(--text-primary, #00171F);
    stroke: var(--text-primary, #00171F);
}

/* Bookmark icon in titles & stat cards — always filled */
.ams-mv-title .ams-bookmark-icon,
.ams-stat-icon .ams-bookmark-icon {
    fill: var(--text-primary, #00171F);
    stroke: var(--text-primary, #00171F);
}
/* Inline bookmark in text — outline only */
.ams-mv-empty .ams-bookmark-icon { fill: none; stroke: currentColor; }

/* ── Saved Songs Page ── */
.ams-saved-songs { max-width: 780px; margin: 0 auto; }
.ams-saved-count { color: var(--text-secondary, #64748b); font-size: 0.85rem; margin: -6px 0 14px; }
.ams-saved-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ams-saved-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    transition: box-shadow 0.15s;
}
.ams-saved-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.ams-saved-song-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}
.ams-saved-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
.ams-saved-singer {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748b);
}
.ams-saved-song-link:hover .ams-saved-title { text-decoration: underline; }
.ams-saved-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ams-saved-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg-page, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
}
.ams-saved-remove {
    background: none;
    border: none;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.ams-saved-remove:hover { color: #ef4444; background: #fee2e2; }

/* ── User Profile Page ── */
.ams-profile { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.ams-profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.ams-avatar-img { border-radius: 50%; display: block; }
.ams-profile-info { flex: 1; }
.ams-profile-name  { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; color: var(--text-primary, #1e293b); }
.ams-profile-email { font-size: 0.85rem; color: var(--text-secondary, #64748b); margin: 0 0 4px; }
.ams-profile-since { font-size: 0.8rem; color: var(--text-secondary, #94a3b8); margin: 0; }
.ams-profile-role-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 20px;
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
    font-weight: 600;
}
.ams-profile-edit-link {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
}
.ams-profile-edit-link:hover { text-decoration: underline; }

.ams-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.ams-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 20px 12px;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.ams-stat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); }
.ams-stat-card--editor { border-color: #bae6fd; background: rgba(240,249,255,0.95); }
.ams-stat-icon { font-size: 1.6rem; }
.ams-stat-num  { font-size: 2rem; font-weight: 800; color: var(--text-primary, #1e293b); line-height: 1; }
.ams-stat-label { font-size: 0.78rem; color: var(--text-secondary, #64748b); text-align: center; }

.ams-profile-section {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.ams-profile-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 12px; color: var(--text-primary, #1e293b); }
.ams-profile-proposal-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ams-prop-badge {
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.ams-prop-pending  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.ams-prop-approved { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.ams-prop-rejected { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

.ams-profile-proposals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ams-profile-proposal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-page, #f8fafc);
    border-radius: 8px;
}
.ams-profile-proposal-song { flex: 1; font-size: 0.9rem; color: var(--text-primary); text-decoration: none; }
.ams-profile-proposal-song:hover { text-decoration: underline; }
.ams-profile-proposal-date { font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }

.ams-notice {
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
/* ─────────────────────────────────────────────── */
/* ── Barre Badge ── */
.ams-barre-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
.ams-barre-free {
    background-color: #16a34a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
}
.ams-barre-semi {
    background-color: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde047;
}
.ams-barre-advanced {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.ams-barre-medium {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* ─────────────────────────────────────────────── */
/* ── Easy-mode toggle (בבר-החיפוש) — מצב גרסה קלה גלובלי ── */
.ams-easy-mode-row { margin-top: 4px; }
.ams-easy-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
.ams-easy-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ams-easy-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-color, #cbd5e1);
    transition: background 0.2s;
    flex: 0 0 auto;
}
.ams-easy-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ams-easy-toggle-input:checked + .ams-easy-toggle-switch {
    background: var(--accent-primary, #3b82f6);
}
.ams-easy-toggle-input:checked + .ams-easy-toggle-switch::after {
    transform: translateX(-20px);
}
.ams-easy-toggle-input:focus-visible + .ams-easy-toggle-switch {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

/* ─────────────────────────────────────────────── */
/* ── Version Note (גרסה בינונית) — הודעה משולבת בראש השיר ── */
.ams-version-note {
    display: block;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-control-hover, #f1f5f9);
    border-inline-start: 3px solid var(--accent-primary, #2563eb);
    line-height: 1.55;
}
.ams-version-note__title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary, #111827);
    margin-bottom: 2px;
}
.ams-version-note__text {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

/* ════════════════════════════════════════════════════════════
   המחברת האישית (Notebook)
   ════════════════════════════════════════════════════════════ */
.ams-notebook,
.ams-nb-editor-wrap,
.ams-nb-view {
    max-width: 920px;
    margin: 0 auto;
    color: var(--text-primary, #0D1B33);
}

/* ── כותרת ── */
.ams-nb-head { text-align: center; margin-bottom: 1.75rem; }
.ams-nb-title {
    font-size: 1.9rem;
    margin: 0 0 .35rem;
    color: var(--text-primary, #0D1B33);
}
.ams-nb-tagline {
    color: var(--text-secondary, #5a6475);
    margin: 0 0 1.1rem;
    font-size: .98rem;
}
.ams-nb-head-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── כפתורים ── */
.ams-nb-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1.05rem;
    border-radius: 10px;
    border: 1px solid var(--border-color, #DCD0C1);
    background: var(--bg-control, #fff);
    color: var(--text-primary, #0D1B33);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .05s;
}
.ams-nb-btn:hover { background: var(--bg-control-hover, #eee); }
.ams-nb-btn:active { transform: translateY(1px); }
.ams-nb-btn--primary {
    background: var(--accent-primary, #B68C64);
    color: var(--accent-primary-text, #fff);
    border-color: var(--accent-primary, #B68C64);
}
.ams-nb-btn--primary:hover { filter: brightness(.95); background: var(--accent-primary, #B68C64); }
.ams-nb-btn--ghost { background: transparent; }

/* ── צ'יפים לסינון ── */
.ams-nb-filters {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.ams-nb-chip {
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #DCD0C1);
    background: var(--bg-control, #fff);
    color: var(--text-secondary, #5a6475);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ams-nb-chip:hover { background: var(--bg-control-hover, #f0ebe2); }
.ams-nb-chip.is-active {
    background: var(--accent-primary, #B68C64);
    color: var(--accent-primary-text, #fff);
    border-color: var(--accent-primary, #B68C64);
}

/* ── תווית מצב פרסום ── */
.ams-nb-status {
    display: inline-block;
    margin-inline-start: .5rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}
.ams-nb-status--pending   { background: #FFF4E0; color: #9A6A00; }
.ams-nb-status--published { background: #E6F5E9; color: #1E7A34; }

/* ── מצב ריק ── */
.ams-nb-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px dashed var(--border-color, #DCD0C1);
    border-radius: 14px;
    background: var(--bg-song, #fff);
}
.ams-nb-empty p { margin: .3rem 0; }
.ams-nb-empty-sub { color: var(--text-secondary, #5a6475); font-size: .95rem; }

/* ── תיקיות ── */
.ams-nb-folders { display: flex; flex-direction: column; gap: 1.1rem; }
.ams-nb-folder {
    border: 1px solid var(--border-color, #DCD0C1);
    border-radius: 14px;
    background: var(--bg-song, #fff);
    overflow: hidden;
}
.ams-nb-folder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--border-color, #DCD0C1);
    background: rgba(0,0,0,.02);
}
.ams-nb-folder-name { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.ams-nb-folder-count {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary, #5a6475);
    background: var(--bg-control, #f0ece4);
    border-radius: 999px;
    padding: .05rem .55rem;
}
.ams-nb-folder-tools { display: inline-flex; gap: .25rem; }
.ams-nb-icon-btn {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: .35rem .45rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.ams-nb-icon-btn:hover { background: var(--bg-control-hover, #eee); }

/* ── פריטים ── */
.ams-nb-items { list-style: none; margin: 0; padding: 0; }
.ams-nb-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.05);
    transition: opacity .2s;
}
.ams-nb-item:last-child { border-bottom: 0; }
.ams-nb-item--empty {
    color: var(--text-secondary, #5a6475);
    font-size: .9rem;
    font-style: italic;
    justify-content: center;
}
.ams-nb-item-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.ams-nb-item-badge {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: var(--bg-control, #f0ece4);
    color: var(--text-secondary, #5a6475);
    white-space: nowrap;
}
.ams-nb-item-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ams-nb-item-main:hover .ams-nb-item-title { color: var(--accent-primary, #B68C64); }
.ams-nb-item-sub {
    color: var(--text-secondary, #5a6475);
    font-size: .85rem;
    white-space: nowrap;
}
.ams-nb-item-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; }
.ams-nb-move {
    font-size: .82rem;
    padding: .25rem .4rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #DCD0C1);
    background: var(--bg-control, #fff);
    color: var(--text-primary, #0D1B33);
    max-width: 130px;
}

/* ── סרגל עליון בעורך/בצפייה ── */
.ams-nb-view-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.ams-nb-editor-heading { font-weight: 700; font-size: 1.05rem; }

/* באנר-הקשר בעורך: מבהיר שהשמירה היא למחברת הפרטית */
.ams-nb-context-banner {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 0 0 1.4rem;
    padding: .85rem 1rem;
    background: var(--uc-gold-tint, #F5ECE0);
    border: 1px solid var(--uc-border, #E4D9C8);
    border-inline-start: 4px solid var(--uc-gold, #B5936A);
    border-radius: 12px;
    line-height: 1.55;
}
.ams-nb-context-banner__icon { font-size: 1.3rem; line-height: 1.2; flex: 0 0 auto; }
.ams-nb-context-banner__text { font-size: .96rem; color: var(--text-primary, #0D1B33); }
.ams-nb-context-banner__text em {
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .ams-nb-item { flex-wrap: wrap; }
    .ams-nb-item-main { flex: 1 1 100%; }
    .ams-nb-move { max-width: 100%; flex: 1 1 auto; }
}


/* ══ unichord · מגירת-אפשרויות: כותרת + סגירה + מצב-פתוח ══ */
/* הכפתור היה שלוש נקודות-ASCII ("...") ב-24px עם line-height 36px, כלומר הן
   ישבו על קו-הבסיס בתחתית הכפתור וקראו כ"המשך טקסט" ולא כ"נפתח תפריט".
   כאן: שלוש נקודות עגולות ממורכזות שמתחלפות ב-✕ כשהמגירה פתוחה. */
#achord-options-toggle .uc-ic-x { display: none; }
#achord-options-toggle[aria-expanded="true"] .uc-ic-dots { display: none; }
#achord-options-toggle[aria-expanded="true"] .uc-ic-x { display: block; }
#achord-options-toggle[aria-expanded="true"] {
    background: var(--bg-control-hover);
    color: var(--accent-primary);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.drawer-head-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.drawer-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.drawer-close-btn:hover { background: var(--bg-control-hover); }
.drawer-close-btn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }