:root{--bg:#101a29;--panel:#1b293b;--text:#f3f5f9;--muted:#aeb8c7;--accent:#ffbd2e;--border:#35465b}body.light{--bg:#fafafa;--panel:white;--text:#152338;--muted:#66758b;--border:#dce1e8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui,Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:10px max(16px,calc((100vw - 1040px)/2));position:sticky;top:0;background:var(--bg);z-index:4;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;color:var(--accent);font-size:23px;line-height:20px;letter-spacing:-1px}.brand span{color:var(--text);font-weight:300}.brand strong{color:var(--accent);font-weight:500}.bigc{font-size:64px;line-height:50px;font-weight:400}.topright,.line,.controls,.viewerBar,.viewerBottom{display:flex;align-items:center;gap:8px}.line{justify-content:space-between;margin:10px 0;flex-wrap:wrap}input,select,textarea,button{border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--text);padding:11px;font:inherit;min-width:0}input,textarea{width:100%}button{cursor:pointer;white-space:nowrap}button:hover{border-color:var(--accent)}button.active,#signin,#signup,#newSong,#newRep,#newSchedule,#newGroup,form button[type=submit]{background:var(--accent);color:#142033;border-color:var(--accent);font-weight:650}.secondary{background:var(--panel)!important;color:var(--text)!important}.subtle{padding:8px}.topright select{max-width:180px}h1{font-size:23px;margin:8px 0}h2{font-size:18px}.auth{max-width:370px;margin:9vh auto;padding:20px;display:grid;gap:12px}.auth p{color:var(--muted)}.error{color:#ff8e8e}main,.page{max-width:1040px;margin:auto;padding:20px 16px 110px}nav{position:fixed;bottom:0;z-index:5;display:flex;justify-content:center;gap:4px;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);padding:8px 5px calc(8px + env(safe-area-inset-bottom))}nav button{flex:1;max-width:240px;font-size:13px;padding:11px 4px}.hidden{display:none!important}.items{display:grid;gap:8px;margin-top:12px}.item{background:var(--panel);padding:12px;border:1px solid var(--border);border-radius:10px;display:flex;justify-content:space-between;gap:8px;align-items:center}.item .desc{min-width:0;flex:1;cursor:pointer}.item .desc b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item small,small{color:var(--muted)}.item .actions{display:flex;gap:6px}.item button{padding:8px}.alphabet{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}.alphabet button{padding:4px 7px;font-size:12px}dialog{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:14px;width:min(94vw,850px);max-height:92dvh;overflow:auto}dialog::backdrop{background:#000a}#songForm{display:grid;gap:10px}#songForm textarea{font-family:ui-monospace,Consolas,monospace;line-height:1.5}#viewer{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column}#viewer .viewerBar,#viewer .controls,.viewerBottom{padding:7px;justify-content:center;flex-wrap:wrap;border-bottom:1px solid var(--border)}#viewTitle{flex:1;text-align:center;min-width:90px}.controls button{padding:8px}#viewContent{flex:1;overflow:auto;padding:22px max(12px,calc((100vw - 1100px)/2));font:22px/1.55 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;touch-action:pan-y}.songLine{white-space:pre-wrap;min-height:1.55em}.chord{color:var(--accent);font-weight:650}.comment{color:#5da8ff;font-style:italic}.chorus{font-weight:750}.section{color:var(--accent);font-weight:700}.viewerBottom{border-top:1px solid var(--border);border-bottom:0}.viewerBottom span{min-width:70px;text-align:center}#toast{position:fixed;bottom:75px;left:50%;transform:translateX(-50%);background:#33465c;color:white;padding:12px 22px;border-radius:9px;display:none;z-index:30;max-width:95vw}#repDetail{margin-top:18px}.muted{color:var(--muted)}@media(max-width:640px){.topright select{max-width:110px}.topright{gap:3px}header{padding:10px}.brand{font-size:17px;line-height:16px}.bigc{font-size:47px;line-height:38px}.line>input{flex:1;min-width:100px}.line>select{max-width:55%}#viewer .controls{gap:4px}.controls button{font-size:12px;padding:7px}#viewContent{padding:12px;font-size:19px}.page{padding:16px 12px 105px}nav button{font-size:12px}}

/* V0.4 — apresentação e leitura */
#viewer .viewerBar{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-height:57px}
#viewerSettings{flex:none;font-size:21px;min-width:43px;padding:7px 11px}
#viewerControls{display:flex;gap:6px;align-items:center;max-height:36dvh;overflow:auto}
#viewerControls.hidden{display:none!important}
#viewerBottom{display:flex;align-items:center;justify-content:center;min-height:28px;font-size:12px;color:var(--muted);padding:3px}
#viewerBottom.hidden{display:none!important}
#viewContent{min-height:0;overscroll-behavior:contain;overflow-x:hidden}
#viewContent.paged{overflow-y:hidden;cursor:default;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.songBlock{break-inside:avoid;page-break-inside:avoid;display:flow-root}
.songLine.section{font-size:.68em;color:var(--muted);font-weight:500;letter-spacing:.02em;min-height:1.55em;padding-top:.55em;padding-bottom:.2em}
.songLine.section .section-label{display:inline-block;border-left:2px solid var(--border);padding-left:.55em}
.songLine.section .section-chords{font-size:1.3em;color:var(--accent);font-weight:600}
@media(max-width:640px){#viewer .viewerBar{padding:8px 10px}#viewContent{padding:12px 14px}}

.group-manage{gap:8px}.group-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.group-actions button{font-size:13px;padding:8px 10px}.danger-outline{border-color:#b45b58!important;color:#ffb3ae!important}@media(max-width:480px){.group-manage{align-items:flex-start}.group-actions{flex-direction:column}}