*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#212529;background:#f8f9fa;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px}#app{height:100%}.login-wrapper{background:url(/bg-login.jpg) 50%/cover no-repeat fixed;justify-content:center;align-items:center;min-height:100%;padding:1rem;display:flex}.login-card{-webkit-backdrop-filter:blur(16px);background:#ffffffeb;border:1px solid #0000001a;border-radius:.5rem;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:380px;padding:2rem 2rem 1.75rem;display:flex;box-shadow:0 .5rem 1.5rem #0003}.login-logo{width:64px;height:64px}.login-title{color:#212529;margin-top:-.25rem;font-size:1.25rem;font-weight:600}.login-card .input-group,.login-card .btn-primary{width:100%}.input-group{flex-direction:column;display:flex}.input-group input{color:#212529;background:#fff;border:1px solid #ced4da;outline:none;width:100%;padding:.5rem .75rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}.input-group input:focus{z-index:1;border-color:#86b7fe;position:relative;box-shadow:0 0 0 .2rem #0d6efd40}.input-group input:first-child{border-bottom:none;border-radius:.375rem .375rem 0 0}.input-group input:last-child{border-radius:0 0 .375rem .375rem}.input-group input:only-child{border-bottom:1px solid #ced4da;border-radius:.375rem}.login-error{color:#dc3545;text-align:center;font-size:.875rem}.layout{height:100%;display:flex;position:relative;overflow:hidden}.side-panel{z-index:100;background:#fff;border-right:1px solid #dee2e6;flex-direction:column;width:min(300px,85vw);height:100%;transition:transform .2s;display:flex;position:fixed;top:0;left:0;transform:translate(-100%)}.side-panel.open{transform:translate(0)}.layout.panel-pinned .side-panel{flex-shrink:0;position:relative;transform:none}.layout.panel-pinned .viewer{flex:1}.panel-header{background:#f8f9fa;border-bottom:1px solid #dee2e6;align-items:center;gap:.5rem;padding:.625rem .75rem;display:flex}.panel-header input[type=search]{color:#212529;background:#fff;border:1px solid #ced4da;border-radius:.375rem;outline:none;flex:1;padding:.375rem .75rem;font-size:.875rem;transition:border-color .15s,box-shadow .15s}.panel-header input[type=search]:focus{border-color:#86b7fe;box-shadow:0 0 0 .2rem #0d6efd40}.panel-content{flex-direction:column;flex:1;padding:.375rem;display:flex;overflow-y:auto}.panel-footer{background:#f8f9fa;border-top:1px solid #dee2e6;flex-shrink:0;padding:.5rem .75rem}.btn-logout{color:#6c757d;cursor:pointer;text-align:center;background:0 0;border:none;border-radius:.25rem;width:100%;padding:.375rem;font-size:.8rem;transition:color .15s,background .15s}.btn-logout:hover{color:#dc3545;background:#fff1f2}.btn-panel-toggle{flex-shrink:0;font-size:1rem}.layout.panel-pinned .btn-panel-toggle{display:none}.btn-pin{justify-content:center;align-items:center;display:inline-flex}.event-item{border-bottom:1px solid #e9ecef;border-radius:.375rem;padding:.5rem .625rem}.event-date{color:#6c757d;font-size:.75rem;font-weight:500}.event-name{color:#212529;margin:.1rem 0 .35rem;font-size:.9rem;font-weight:600}.song-item{cursor:pointer;border-radius:.375rem;flex-direction:column;gap:.1rem;padding:.375rem .5rem;transition:background .1s;display:flex}.song-item:hover{background:#e9ecef}.song-item.selected{background:#cfe2ff;border-left:3px solid #0d6efd;padding-left:calc(.5rem - 3px)}.song-item.selected:hover{background:#b6d4fe}.song-name{font-size:.9rem;font-weight:500}.song-source{color:#6c757d;font-variant-numeric:tabular-nums;font-size:.75em;font-weight:600}.song-author{color:#6c757d;font-size:.775rem}.panel-hint{color:#6c757d;padding:.5rem;font-size:.875rem}.panel-error{color:#dc3545;padding:.5rem;font-size:.875rem}.viewer{background:#e9ecef;flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.viewer-topbar{background:#fff;border-bottom:1px solid #dee2e6;flex-shrink:0;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex}.viewer-no-song{color:#adb5bd;font-size:.9rem}.viewer-header{background:#fff;border-bottom:1px solid #dee2e6;flex-direction:column;flex-shrink:0;display:flex}.viewer-row1{align-items:center;gap:.4rem;min-width:0;padding:.4rem .625rem;display:flex}.viewer-source-prefix{color:#6c757d;white-space:nowrap;font-variant-numeric:tabular-nums;background:#e9ecef;border-radius:.25rem;flex-shrink:0;padding:.1rem .35rem;font-size:.7rem;font-weight:700}.viewer-title{white-space:nowrap;text-overflow:ellipsis;color:#212529;flex:1;min-width:0;font-size:.9rem;font-weight:600;overflow:hidden}.arr-meta{flex-shrink:0;align-items:flex-end;display:flex}.arr-meta-inner{flex-direction:column;align-items:flex-end;gap:.1rem;display:flex}.arr-meta-line1{color:#495057;white-space:nowrap;font-size:.7rem;font-weight:600}.arr-meta-line2{color:#6c757d;white-space:nowrap;gap:.5rem;font-size:.68rem;display:flex}.meta-label{color:#adb5bd;margin-right:.15rem;font-weight:600}.viewer-row2{background:#f8f9fa;border-top:1px solid #e9ecef;align-items:center;gap:.4rem;min-width:0;padding:.3rem .625rem;display:flex;overflow:hidden}.arr-tabs{flex-wrap:nowrap;flex:1;gap:.25rem;min-width:0;display:flex;overflow:hidden}.viewer-row2-right{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.arr-media{align-items:center;gap:.4rem;display:flex}.arr-audio{flex:1;min-width:180px;max-width:320px;height:2rem}.arr-yt-audio-wrap{flex-shrink:1;align-items:center;min-width:0;display:flex}.yt-audio{background:#dc3545;border-radius:.375rem;align-items:center;gap:.4rem;min-width:0;padding:.25rem .5rem;display:flex}.yt-audio-btn{color:#fff;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0;font-size:1rem;line-height:1}.yt-audio-time{color:#fff;font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.7rem}.yt-audio-seek{accent-color:#fff;cursor:pointer;flex:1;min-width:60px;max-width:200px;height:3px}.yt-external-link{color:#fffc;flex-shrink:0;align-items:center;padding-left:.2rem;display:inline-flex}.yt-external-link:hover{color:#fff}.song-multi-pdf{color:#ffc107;cursor:help;margin-left:.3rem;font-size:.85em}.arr-tab{color:#495057;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #dee2e6;border-radius:.375rem;padding:.25rem .625rem;font-size:.8rem;transition:background .1s,color .1s,border-color .1s}.arr-tab:hover{background:#e9ecef;border-color:#adb5bd}.arr-tab.active{color:#fff;background:#0d6efd;border-color:#0d6efd}.viewer-body{flex-direction:column;flex:1;display:flex;overflow:hidden}.pdf-container{background:#495057;flex:1;position:relative;overflow:hidden}.pdf-container:before{content:"";opacity:.12;pointer-events:none;z-index:0;filter:invert();background:url(/logo.svg) 50%/240px 240px no-repeat;position:absolute;inset:0}.pdf-spread{z-index:1;flex-direction:row;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:0}.pdf-page{display:block;box-shadow:0 .25rem .75rem #00000080}.pdf-nav{cursor:pointer;z-index:2;background:0 0;align-items:center;width:20%;height:100%;transition:background .15s;display:flex;position:absolute;top:0}.pdf-nav-left{justify-content:flex-start;padding-left:.75rem;left:0}.pdf-nav-right{justify-content:flex-end;padding-right:.75rem;right:0}.pdf-nav-hidden{display:none}.pdf-nav:hover,.pdf-nav-active{background:#00000040}.pdf-nav-arrow{color:#ffffffd9;opacity:0;pointer-events:none;font-size:2.5rem;font-weight:300;line-height:1;transition:opacity .15s}.pdf-nav:hover .pdf-nav-arrow,.pdf-nav-active .pdf-nav-arrow{opacity:1}.pdf-loading{color:#adb5bd}.btn-spread{flex-shrink:0;justify-content:center;align-items:center;padding:.25rem .4rem;display:inline-flex}.yt-wrapper{background:#212529;flex:1;justify-content:center;align-items:center;padding:1rem;display:flex}.yt-frame{aspect-ratio:16/9;border:none;border-radius:.5rem;width:100%;max-width:960px}.btn-primary{color:#fff;cursor:pointer;background:#0d6efd;border:1px solid #0d6efd;border-radius:.375rem;padding:.5rem 1rem;font-size:1rem;font-weight:500;transition:background .15s,border-color .15s}.btn-primary:hover{background:#0b5ed7;border-color:#0a58ca}.btn-icon{cursor:pointer;color:#495057;background:#fff;border:1px solid #dee2e6;border-radius:.375rem;flex-shrink:0;padding:.25rem .5rem;font-size:.875rem;line-height:1;transition:background .1s,border-color .1s}.btn-icon:hover{background:#e9ecef;border-color:#adb5bd}.btn-event{color:#0d6efd;cursor:pointer;background:#fff;border:1px solid #dee2e6;border-radius:.375rem;margin-top:.35rem;padding:.2rem .6rem;font-size:.775rem;transition:background .1s}.btn-event:hover{background:#e7f1ff;border-color:#0d6efd}.btn-back{cursor:pointer;color:#6c757d;text-align:left;background:0 0;border:none;border-radius:.25rem;padding:.35rem .5rem;font-size:.85rem}.btn-back:hover{color:#212529}@media (width>=768px){.side-panel{flex-shrink:0;position:relative;transform:none}.layout:not(.panel-pinned) .side-panel{position:fixed;transform:translate(-100%)}.layout:not(.panel-pinned) .side-panel.open{transform:translate(0)}}