:root{--navy:#172c4c;--accent:#236ce6;--accent2:#155bcf;--muted:#708099;--line:#dde4f1;--bg:#f5f7fb;--panel:#fff;--text:#1a2a45;--mint:#0d8a67;--soft:#e9f1ff;--rose:#db6493;--purple:#9865d9;--blue:#367be9;--green:#51a474;--shadow:0 3px 15px rgba(14,37,73,.045)}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,"Segoe UI",Arial,Helvetica,sans-serif;font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #d4ddec;border-radius:9px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#69a1f5;box-shadow:0 0 0 3px #ddecff}textarea{resize:vertical;line-height:1.5}a{color:var(--accent)}.app-shell{min-height:100vh}.topbar{height:75px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:30px;padding:0 28px;position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;white-space:nowrap;gap:3px;font-size:26px;font-weight:650;letter-spacing:-1px;color:#18345c}.brand-symbol{font-family:"Segoe UI Symbol",serif;font-size:43px;margin-right:9px;color:var(--accent);line-height:1}.brand-strong{color:var(--accent)}.brand-version{margin-left:8px;background:#eaf2ff;border-radius:6px;padding:2px 6px;font-size:10px;letter-spacing:0;color:#4575bd}.topnav,.top-actions{display:flex;align-items:center;gap:8px}.top-actions{margin-left:auto}.navbutton{border:0;background:transparent;color:#3e4d66;font-weight:600;padding:11px 11px;border-radius:9px;white-space:nowrap}.navbutton span{color:#4777b8;font-size:20px;vertical-align:-1px;margin-right:3px}.navbutton:hover,.btn-light:hover{background:#edf3ff}.save-status{color:#678099;font-size:12px;white-space:nowrap;margin-right:7px}.btn{border:1px solid var(--line);background:#fff;color:#283d61;border-radius:9px;padding:10px 14px;font-weight:650;white-space:nowrap;transition:background .13s,box-shadow .13s}.btn-primary{background:linear-gradient(180deg,#347bed,#175bcf);border-color:#2669d7;color:#fff;box-shadow:0 3px 7px #2768c523}.btn-primary:hover{background:#155ac8}.btn-small{padding:9px 13px}.btn-light{background:#fff}.btn:focus-visible,.navbutton:focus-visible{outline:3px solid #acd1ff}.workspace{display:grid;grid-template-columns:255px minmax(0,1fr) 295px;gap:17px;max-width:1900px;margin:0 auto;padding:20px;align-items:start}.side,.center-area{display:flex;flex-direction:column;gap:15px;min-width:0}.panel{background:var(--panel);border:1px solid #e0e6f0;border-radius:14px;box-shadow:var(--shadow);padding:19px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px}.panel-head h2{font-size:16px;margin:0;color:#1d3251;letter-spacing:-.2px}.tiny-label{font-size:10px;color:#8898b3;font-weight:750;letter-spacing:.8px;white-space:nowrap}.field-label{display:block;font-weight:650;font-size:11px;margin:12px 0 6px;color:#536780}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bar-controls{display:flex;align-items:center;justify-content:space-between;border:1px solid #d4ddec;border-radius:9px;min-height:41px}.bar-controls button{border:none;background:transparent;font-size:20px;color:#50709f;padding:5px 12px}.bar-controls span{font-weight:700}.voice-list{display:flex;flex-direction:column;gap:8px}.voice-row{display:flex;align-items:center;gap:9px;border:1px solid #edf0f7;border-radius:9px;padding:8px 9px;cursor:pointer;transition:background .12s}.voice-row:hover{background:#f4f7ff}.voice-row.active{background:#eaf2ff;border-color:#a5c6fc}.voice-color{width:4px;align-self:stretch;border-radius:4px}.voice-name{font-weight:650;flex:1}.voice-row small{font-size:10px;color:var(--muted)}.voice-row .voice-select{border:0;background:transparent;text-align:left;flex:1;min-width:0;font-weight:650;color:inherit;padding:0}.voice-checkbox{accent-color:var(--accent);width:17px;height:17px;margin:0;flex:none}.small-note{font-size:11px;color:#73849a;line-height:1.6;margin:12px 0 0}.small-link{border:0;background:transparent;color:var(--accent);font-weight:650}.verse-list{display:flex;flex-direction:column;gap:6px}.verse-item{border:1px solid #e4eaf5;border-radius:9px;padding:10px 11px;text-align:left;background:#fff;font-weight:600;color:#3a5377}.verse-item.selected{background:#eaf2ff;border-color:#b6d2fb;color:#1457bf}.tutorial{padding-bottom:11px}.tutorial p{font-size:11px;color:#647691;margin:8px 0}.tutorial kbd{display:inline-block;border:1px solid #dae2ef;box-shadow:0 1px 0 #d0dbe7;border-radius:4px;padding:2px 5px;background:#fbfcff;color:#324767;font-family:inherit}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 4px}.eyebrow{letter-spacing:1.5px;color:#6486bb;font-size:10px;font-weight:800}.editor-heading h1{font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:600;line-height:1.2;color:#152945;margin:5px 0}.editor-heading p{color:#7889a4;font-size:12px;margin:0}.heading-buttons{display:flex;gap:7px}.score-card{padding:0;overflow:hidden}.playbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e5eaf3}.playbar-left,.playbar-right{display:flex;gap:8px;align-items:center}.playbar .btn{padding:9px 12px}.playbar-right{color:#7a8aa4;font-size:11px;white-space:nowrap}.tempo-chip{font-size:12px;padding:7px;background:#f0f5ff;border-radius:8px;color:#4671a9}.score-instructions{padding:10px 16px 0;color:#667894;font-size:11px}.score-canvas{min-height:480px;max-height:calc(100vh - 290px);overflow:auto;padding:6px 13px 12px;background:repeating-linear-gradient(135deg,#fff,#fff 22px,#fcfdff 22px,#fcfdff 44px)}#scoreSvg{width:100%;min-width:690px;height:auto;display:block;user-select:none;touch-action:none}.score-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fbfcff;color:#74849b;border-top:1px solid #e7ebf5;font-size:11px;padding:10px 17px}.score-footer>span:first-child{color:#4f678a;font-weight:600}.state-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3bbb92;margin-right:9px}.mixer-card{padding-bottom:15px}.mixer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.mixer-item{background:#f8faff;border:1px solid #ebf0f8;border-radius:9px;padding:10px}.mixer-name{font-size:12px;font-weight:650;display:flex;align-items:center;gap:6px;margin-bottom:9px}.mixer-name span{width:4px;height:15px;border-radius:3px}.mixer-actions{display:flex;gap:4px;margin-bottom:8px}.mixer-actions button{border:1px solid #dde5f2;border-radius:6px;background:#fff;min-width:35px;padding:4px 7px;color:#5c6f8c}.mixer-actions button.active{background:#dceaff;border-color:#a9cbff;color:#1c62c7}.mixer-item input[type=range]{padding:0;width:100%;accent-color:#286fe4;box-shadow:none}.mixer-percent{font-size:10px;color:#8190a8;float:right}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#eff3fa;border:1px solid #e0e7f3;border-radius:9px;padding:3px;margin-bottom:16px}.segmented button{background:transparent;border:0;padding:9px 6px;border-radius:7px;color:#6b7e9e;font-size:12px;font-weight:750}.segmented button.active{background:#fff;color:#135fcf;box-shadow:0 1px 5px #17375a15}.tool-label{display:block;font-size:11px;color:#4f617e;font-weight:800;margin:16px 0 9px}.note-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.note-tools button{height:62px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #dce3f1;border-radius:9px;background:#fff;font-family:"Segoe UI Symbol",serif;font-size:28px}.note-tools button small{font-family:inherit;font-size:9px;color:#8698b0;margin-top:0}.note-tools button.active{border-color:#6ca2ff;color:#0f61d9;background:#eaf2ff;box-shadow:inset 0 0 0 1px #86b3ff}.tool-buttons{display:flex;gap:6px;margin:11px 0 18px}.tool-buttons .btn{flex:1;font-size:10px;padding:8px 5px}.tool-buttons .btn.active{background:#e6efff;border-color:#8fbaff;color:#125fca}.edit-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.edit-actions .btn{white-space:normal;padding:10px 7px;font-size:11px}.danger{color:#b64153!important}.help-inline{border-left:3px solid #9dc3ff;background:#f2f7ff;padding:10px;margin-top:16px;color:#637b9d;font-size:11px;line-height:1.6}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.9;background:#fcfdff}.full-width{width:100%;margin-top:12px}.file-actions{display:flex;flex-direction:column;gap:8px}.file-actions .btn{font-size:12px;text-align:left;white-space:normal}.right-hint{display:flex;gap:10px;padding:12px 16px;color:#7587a3;font-size:11px;line-height:1.5}.right-hint span{color:#3b7ce0;font-size:23px}.right-hint strong{font-size:12px;color:#5b7093}.right-hint p{margin:5px 0}.site-footer{font-size:11px;color:#8592a7;text-align:center;padding:8px 6px 24px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:90;color:#fff;background:#173765;border-radius:10px;padding:12px 20px;box-shadow:0 12px 35px #0b1d3244;transition:.2s;max-width:90vw;text-align:center}.toast.visible{transform:translate(-50%,0);opacity:1}.toast.error{background:#a8394f}.modal{border:1px solid #dbe4f2;padding:0;border-radius:16px;max-width:650px;width:calc(100vw - 30px);box-shadow:0 30px 90px #0e1b3970}.modal::backdrop{background:#0d1e3e77}.modal-head{padding:15px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3e9f2}.modal-head h2{margin:0;font-size:19px}.close-modal{background:transparent;border:0;font-size:28px;color:#6d83a6}.modal-body{padding:8px 20px 20px;line-height:1.7;color:#475b7a}.modal-body p{margin:13px 0}.modal-body code,.small-note code{background:#edf3ff;color:#2760af;padding:2px 4px;border-radius:4px}
/* SVG score */
.score-paper{fill:#fff}.score-staff-line{stroke:#4c596d;stroke-width:.75}.score-barline{stroke:#617189;stroke-width:1}.score-clef{fill:#253854;font-family:"Noto Music","Segoe UI Symbol","Apple Symbols",serif}.score-note{cursor:grab}.score-note:active{cursor:grabbing}.score-note .hit{fill:transparent;stroke:none}.score-note.selected .selected-halo{fill:#e3efff;stroke:#3479e8;stroke-width:1.3;stroke-dasharray:3 2}.score-note .notehead{fill:#152b4b;stroke:#152b4b}.score-note .notehead.white{fill:#fff;stroke:#152b4b;stroke-width:1.9}.score-note.selected .notehead{fill:#286fe2;stroke:#286fe2}.score-note.selected .notehead.white{fill:#fff;stroke:#286fe2}.score-note .stem,.score-note .beam,.score-note .ledger{stroke:#263854;stroke-width:1.7}.score-note.selected .stem,.score-note.selected .beam,.score-note.selected .ledger{stroke:#286fe2}.score-note:hover .selected-halo{fill:#ecf3ff;stroke:#9cbbef;stroke-width:1}.score-lyric{fill:#45566c;font-family:Georgia,"Times New Roman",serif;font-size:11px}.score-voice-name{fill:#5e6d84;font-size:12px;font-weight:600}.score-header{fill:#3a506f;font-family:Georgia,serif}.score-mark{fill:#9aacc7;font-size:9px}.score-blank-hit{cursor:crosshair;fill:transparent}.score-slot{stroke:#4a91f1;stroke-width:1;stroke-dasharray:3 4;opacity:.42}.score-ghost{fill:#1f77df;opacity:.25}.score-active-voice-bg{fill:#e7f1ff;opacity:.35}.score-highlight{fill:#e8f1ff;opacity:.65}.score-rest{fill:#263854;font-family:"Noto Music","Segoe UI Symbol",serif}.score-bar-number{fill:#9bacbf;font-family:Arial,sans-serif;font-size:9px}.score-key-signature{fill:#1b3352;font-family:"Noto Music","Segoe UI Symbol",serif;font-size:19px}
@media(max-width:1280px){.workspace{grid-template-columns:220px minmax(0,1fr) 260px;gap:10px;padding:12px}.topbar{padding:0 16px;gap:15px}.brand{font-size:21px}.topnav{gap:0}.navbutton{font-size:12px;padding:10px 7px}.panel{padding:14px}.score-card{padding:0}.mixer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.save-status{display:none}}
@media(max-width:1000px){.workspace{grid-template-columns:210px minmax(0,1fr)}.side-right{grid-column:2;grid-row:2}.center-area{grid-column:2;grid-row:1}.side-left{grid-row:1/span 2}.topbar{height:auto;min-height:69px;flex-wrap:wrap;padding:8px 15px}.top-actions{margin-left:auto}.score-canvas{max-height:60vh}.side-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.side-right>.panel:first-child{grid-row:span 2}.right-hint{grid-column:span 2}}
@media(max-width:700px){.workspace{display:flex;flex-direction:column}.side-left,.center-area,.side-right{width:100%}.side-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.topnav{order:3;width:100%;justify-content:space-between;overflow:auto}.top-actions .btn-light{display:none}.topbar{gap:6px}.brand{font-size:23px}.editor-heading h1{font-size:26px}.playbar{flex-wrap:wrap}.playbar-left{flex-wrap:wrap}.score-footer{flex-wrap:wrap}.score-canvas{max-height:55vh}.side-right{display:flex}.side-left .tutorial{grid-column:span 2}}
@media(max-width:450px){.side-left{display:flex}.top-actions .btn-primary{padding:8px 9px;font-size:11px}.brand-version{display:none}.mixer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:13px}.score-card{padding:0}.score-canvas{padding:4px}.heading-buttons .btn{font-size:11px;padding:8px}}
@page{size:A4 portrait;margin:13mm}
@media print{*{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{background:#fff}.topbar,.side,.editor-heading,.playbar,.score-instructions,.score-footer,.mixer-card,.site-footer,.toast,.modal{display:none!important}.workspace{display:block;margin:0;padding:0;max-width:100%}.center-area{display:block}.score-card{padding:0;box-shadow:none;border:0;overflow:visible}.score-canvas{max-height:none;min-height:0;padding:0;overflow:visible;background:#fff}#scoreSvg{min-width:0;width:100%;height:auto;max-height:none}.score-active-voice-bg,.score-highlight,.score-note .selected-halo,.score-bar-number{display:none!important}}

/* v1 improvements */
.accidental-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.accidental-actions .btn{font-size:11px;padding:9px 4px}.print-heading{display:none}.print-heading h1{font-family:Georgia,serif;text-align:center;margin:0 0 7px;font-size:22pt}.print-heading p{text-align:center;margin:0 0 12mm;font-size:10pt;color:#555}
@media print{.print-heading{display:block!important;padding:1mm 0 0}.score-card{break-inside:auto}.score-canvas{overflow:visible}}

/* Többoldalas kottanyomtatás: a rendszerhatárok mentén tördelve */
.print-pages{display:none}
@media print{
 .score-canvas{display:none!important}
 .print-pages{display:block!important}
 .print-system{break-inside:avoid;page-break-inside:avoid;margin:0 0 5mm;width:100%}
 .print-system svg{display:block;width:100%;height:auto;overflow:hidden}
 .print-system .score-bar-number{display:none}
 .print-heading{break-after:avoid;page-break-after:avoid}
}