:root{font-family:Arial,Helvetica,sans-serif;color-scheme:dark;--stage-bg:#101828;--stage-text:#fff;--panel-bg:#fff;--panel-text:#172033;--accent:#ef343b;--selected:#d8f5dd;--panel-width:340px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}.app{position:relative;width:100vw;height:100dvh;background:var(--stage-bg);color:var(--stage-text);overflow:hidden;transition:background .2s,color .2s}body[data-theme=light]{color-scheme:light;--stage-bg:#fff;--stage-text:#111827}.stage{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8d95a3 transparent}.stage-content{min-height:100%;width:100%;padding:95px clamp(30px,8vw,150px) 110px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:1.05em;font-size:56px;font-weight:800;line-height:1.35;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere}.stage-content:empty{min-height:0}.stage-content .verse{margin:0;white-space:pre-wrap}.stage-content .verse-label{display:block;font-size:.38em;opacity:.65;font-weight:600;margin-bottom:.5em;letter-spacing:.05em;text-transform:uppercase}.stage-title{font-size:.48em;opacity:.7;margin:0 0 .8em}.stage-footer{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);font-size:13px;opacity:.55;pointer-events:none;max-width:60vw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.corner-button{position:absolute;top:20px;width:48px;height:48px;border-radius:12px;border:1px solid #596273;background:#1e293b;color:#fff;z-index:3;font-size:26px;display:grid;place-items:center;box-shadow:0 4px 20px #0003}.left-button{left:22px}.right-button{right:22px}.corner-button:hover{background:#364256}
.pager{
    position:absolute;
    bottom:20px;
    left:22px;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:3;
    padding:5px;
    background:#1e293b;
    border:1px solid #485468;
    border-radius:12px;
    color:#fff;
    box-shadow:0 4px 20px #0004;
    opacity: 0.5;
}
.pager button{width:41px;height:40px;border:0;background:#364256;color:#fff;border-radius:8px;font-size:22px}.pager button:hover:not(:disabled){background:#536279}.pager button:disabled{opacity:.32;cursor:default}.pager span{font-size:14px;font-variant-numeric:tabular-nums;min-width:49px;text-align:center}.side-panel{position:absolute;top:0;bottom:0;width:min(var(--panel-width),94vw);z-index:5;background:var(--panel-bg);color:var(--panel-text);box-shadow:0 0 32px #0004;display:flex;flex-direction:column;transition:transform .3s ease;visibility:hidden}.songs-panel{left:0;transform:translateX(-105%)}.settings-panel{right:0;transform:translateX(105%)}.side-panel.open{transform:translateX(0);visibility:visible}.panel-header{height:70px;flex-shrink:0;padding:0 16px 0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e5ec}.panel-header h2{font-size:20px;margin:0}.close-button{width:38px;height:38px;background:#f0f1f5;color:#283447;border:0;border-radius:9px;font-size:27px}.songs-sections{display:flex;flex-direction:column;min-height:0;flex:1}.selected-section,.all-section{display:flex;flex-direction:column;min-height:0;position:relative}.selected-section{flex:0 0 33.333%}.all-section{flex:1}.section-heading{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;flex-shrink:0}.section-heading h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#d82b36;margin:0}.count{font-size:12px;background:#eef0f5;color:#536075;padding:3px 7px;border-radius:9px}.song-list{list-style:none;margin:0;padding:5px 8px 10px;overflow:auto;flex:1;min-height:0;scrollbar-width:thin}.song-item{padding:0;margin:3px 0;display:flex;align-items:center;gap:6px;border-radius:8px;background:#f4f5f8;border:1px solid transparent;min-height:39px}.song-item:hover{background:#e9edf5}.song-item.active{background:var(--selected);border-color:#88c99b}.song-item.dragging{opacity:.35}.song-item.drag-over{border:2px dashed #ef343b}.song-name{background:none;color:inherit;min-width:0;flex:1;text-align:left;white-space:normal;border:0;padding:10px 5px 10px 10px;font-size:14px;font-weight:600}.song-name:hover{text-decoration:underline}.song-action{border:0;background:#e0e5ec;color:#253248;border-radius:6px;min-width:30px;height:30px;margin-right:5px;font-size:19px}.song-action:hover{background:#cfd9e9}.song-item .grip{font-size:18px;color:#8b96a5;margin-left:8px;cursor:grab;user-select:none}.search-wrap{padding:0 13px 10px;flex-shrink:0}.search-wrap input{width:100%;height:39px;border:1px solid #d7dce5;border-radius:9px;padding:0 12px;background:#fff;color:#172033;outline:none}.search-wrap input:focus{border-color:#ee3942;box-shadow:0 0 0 2px #ee394228}.resize-handle{height:10px;flex-shrink:0;background:#e8ebf1;cursor:row-resize;position:relative;touch-action:none}.resize-handle::after{content:'';position:absolute;top:4px;left:calc(50% - 22px);width:44px;height:3px;border-radius:3px;background:#aab3c3}.resize-handle:focus-visible{outline:2px solid #ef343b}.list-placeholder{padding:10px 22px;margin:0;font-size:13px;line-height:1.5;color:#81899a}.selected-section.has-songs .list-placeholder{display:none}.panel-tip{font-size:12px;color:#7d8696;padding:12px 19px;border-top:1px solid #e7eaf0;margin:0;line-height:1.4}.settings-body{overflow:auto;padding:23px;display:flex;flex-direction:column;gap:16px;font-size:14px}.settings-body>label:not(.switch-label){display:flex;justify-content:space-between;font-weight:700}.settings-body input[type=range]{width:100%;accent-color:#ee343b;margin:0}
.setting-row{
    display:flex;
    gap:9px
}
.secondary,.reset-button{border:1px solid #d9dfe8;background:#f4f5f8;border-radius:8px;padding:10px;color:#162133}.secondary{flex:1;font-weight:700;font-size:17px}

.settings-body fieldset{
    border:1px solid #e0e4ed;
    border-radius:9px;
    margin:0;
    padding:14px
}

.settings-body legend{font-weight:700;padding:0 6px}.choice{flex:1;background:#f6f7fa;padding:10px 6px;border-radius:8px;text-align:center}.choice input,.switch-label input{accent-color:#e83442}.settings-body select{border:1px solid #d9dfe8;border-radius:8px;padding:10px;background:white;color:#172033}.switch-label{display:flex;align-items:center;gap:8px;line-height:1.4}.reset-button{margin-top:14px}.toast{position:absolute;z-index:10;bottom:80px;left:50%;transform:translate(-50%,15px);background:#fef1f2;color:#9b1c2b;border:1px solid #f4b6bf;border-radius:10px;padding:10px 16px;max-width:90vw;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:600px){.corner-button{top:12px;width:43px;height:43px}.left-button{left:12px}.right-button{right:12px}.pager{left:12px;bottom:12px}.stage-content{padding:85px 21px 90px;font-size:36px}.panel-header{height:60px}}

/* DALRÉSZ-NAVIGÁTOR */

.section-navigator {
    position: absolute;
    left: 22px;
    bottom: 90px;
    z-index: 3;

    min-width: 130px;
    max-width: 220px;
    max-height: 45vh;
    overflow-y: auto;

    padding: 8px;
    border-radius: 12px;

    background: #1e293b;
    border: 1px solid #485468;
    box-shadow: 0 4px 20px #0004;

    color: white;
    opacity: 0.5;
}

.section-navigator[hidden] {
    display: none;
}

.section-navigator-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.55;
    padding: 5px 10px 8px;
}

#sectionNavigatorList {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.section-nav-button {
    background: transparent;
    border: 0;
    border-radius: 7px;

    color: white;
    text-align: left;
    font-size: 13px;

    padding: 8px 12px;
    width: 100%;

    transition: background 0.15s ease;
}

.section-nav-button:hover {
    background: #364256;
}

/* Versszak kiemelése */

.stage-content .verse {
    position: relative;
    border-radius: 12px;
}

/* 0,4 másodperces háttérvillanás */

.stage-content .verse.section-flash {
    animation: sectionFlash 1.2s ease-out;
}

@keyframes sectionFlash {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(255, 210, 70, 0.24);
    }

    100% {
        background-color: transparent;
    }
}

@media (max-width: 600px) {
    .section-navigator {
        left: 12px;
        bottom: 82px;
        max-width: 160px;
    }
}

#fullscreenBtn {
    width: 100%;
    padding: 12px 16px;

    border: 1px solid #485468;
    border-radius: 8px;

    background: #293548;
    color: white;

    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    transition: background-color 0.2s ease;
}

#fullscreenBtn:hover {
    background: #3b4d66;
}