 body{
        background:#f5f5f5;
    }

    .song-line{
        background:#fff;
        border-radius:12px;
        padding:15px;
        margin-bottom:12px;
        border:1px solid #ddd;
    }

    .line-content{
        position:relative;
        min-height:55px;
    }

    .chords-layer{
        height:24px;
        position:relative;
        margin-bottom:2px;
    }

    .chord{
        position:absolute;
        top:0;
        color:#dc3545;
        font-weight:bold;
        font-size:14px;
    }

    .text-layer{
        font-family:monospace;
        white-space:pre;
        font-size:20px;
        line-height:32px;
    }

    .char{
        position:relative;
        cursor:pointer;
        display:inline-block;
        min-width:12px;
    }

    .char:hover{
        background:#ffe082;
    }

    .line-actions{
        display:flex;
        justify-content:flex-end;
        gap:6px;
        margin-top:10px;
    }

    .line-bold .text-layer{
        font-weight:bold;
    }

    .line-italic .text-layer{
        font-style:italic;
    }

    .empty-line{
        min-height:40px;
    }

    .recent-chords{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .recent-chord{
        cursor:pointer;
    }

/*
|--------------------------------------------------------------------------
| STICKY TOOLBAR
|--------------------------------------------------------------------------
*/

.editor-toolbar{

    position:sticky;

    top:0;

    z-index:9999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:16px 20px;

    margin-bottom:20px;

    background:rgba(245,245,245,0.95);

    backdrop-filter:blur(10px);

    border-bottom:1px solid #ddd;
}

.editor-toolbar-left{
    display:flex;
    align-items:center;
}

.editor-toolbar-right{
    display:flex;
    gap:10px;
}

.editor-title{
    margin:0;
    font-size:28px;
    font-weight:700;
}