/* Responsive stage and reader, shared by phone, tablet and desktop. */
.fs-overlay { --fs-text:#ffffff; --fs-chord:#ffab66; }
#fs-view.light { --fs-text:#252b33; --fs-chord:#b94c00; }
.chord-line.tab-line { color:var(--fs-text); }
:root { --surface:#131c22; --text-dim:#a1adb6; --nav-bg:#18232b; --accent:#00e676; --primary-grad:linear-gradient(120deg,#00e676,#69ff9e); }
* { box-sizing:border-box; }
body { background:radial-gradient(circle at top,#1a1a1a 0%,#000000 70%); background-color:#000; width:100%; }
button,input,textarea { font-family:inherit; }
button { touch-action:manipulation; transition:background .18s,border-color .18s,box-shadow .18s; }
button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button { min-height:44px; }
button:hover { filter:brightness(1.12); }
.btn-go,.fs-action-btn,.settings-save-btn,.menu-new-btn { text-transform:none; letter-spacing:0; font-weight:700; border-radius:14px; }
.btn-go { padding:17px 24px; box-shadow:0 8px 30px #00e67624; }
.title-input,.login-input,#setlist-input,#editor-input { background:#10191f; border-color:#2b3b46; text-align:left; font-size:16px; color:#edf3f7; }
#start-screen { padding:80px 24px 32px; }
.main-title { margin:10px 0; font-size:clamp(32px,5vw,48px); letter-spacing:-1.5px; }
.subtitle { line-height:1.6; max-width:500px; }
.field-label { width:100%; max-width:500px; color:#aebbc5; font-size:13px; font-weight:600; margin:0 0 9px; }
#setlist-input { min-height:200px; resize:vertical; }
.voice-card { background:#152129; border:1px solid #2b3b46; gap:16px; padding:18px; }
.voice-info { min-width:0; }.voice-label { font-size:16px; }.voice-warn,.voice-cmd { font-size:12px; line-height:1.6; }
.switch-container { flex-shrink:0; }.voice-warn { color:#c2ac8c; }
.navbar-capsule { border-radius:22px; gap:4px; padding:8px; max-width:calc(100% - 24px); bottom:calc(16px + env(safe-area-inset-bottom)); }
.nav-btn { min-width:48px; padding:8px 6px; border-radius:14px; }.nav-btn:hover { background:#ffffff0d; }.nav-btn span { color:#aab7c0; text-transform:none; font-size:11px; font-weight:600; }
#stage-current { font-size:clamp(32px,8vw,104px); overflow-wrap:anywhere; max-width:1100px; }
#stage-next { font-size:clamp(18px,3vw,32px); overflow-wrap:anywhere; }
#stage-count { font-size:12px; color:#a1adb6; }
#side-menu { background:#10191f; width:min(320px,90vw); left:-320px; }
.menu-item { background:#18252e; border-color:#2b3b46; }.menu-item-meta { color:#a1adb6; }
.fs-overlay { padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); gap:10px; }
.fs-head { flex-wrap:wrap; padding-bottom:10px; gap:8px; flex-shrink:0; }
.fs-song { order:-1; flex:0 0 100%; text-align:left; font-size:clamp(16px,3vw,24px); text-transform:none; white-space:normal; overflow-wrap:anywhere; }
.fs-icon-btn { width:44px; height:44px; border-radius:12px; }
.fs-body,#fs-main-content:not(.chord-view) { min-height:0; padding:16px 0; font-size:calc(clamp(20px,3vw,36px) * var(--fs-scale,1)); line-height:1.65; overflow-wrap:anywhere; text-align:left; user-select:text; -webkit-user-select:text; }
#fs-main-content.chord-view { font-size:calc(clamp(14px,2vw,19px) * var(--fs-scale,1)); line-height:1.65; padding:16px 0; overflow-x:hidden; }
.chord-line { white-space:pre; }.chord-block { margin-bottom:12px; }.chord-line.tab-line { color:var(--fs-text); }
.fs-body.hide-chords .chord { visibility:hidden; display:inline; }
.fs-controls { position:static; transform:none; order:1; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px; flex-shrink:0; padding:8px 0; border-top:1px solid var(--fs-head-border); }
.fs-controls::before { content:'Rolagem'; color:var(--fs-dim); font-size:11px; }
.key-box,.font-box { flex-direction:row; align-items:center; border:0; border-left:1px solid var(--fs-head-border); margin:0 0 0 4px; padding:0 0 0 8px; gap:4px; }
.speed-btn,.font-btn { width:44px; height:44px; border-radius:12px; font-size:15px; }.speed-indicator { min-width:20px; }
.fs-foot { order:2; gap:8px; padding:0; flex-shrink:0; }.fs-foot .fs-action-btn { padding:12px; font-size:14px; }
#editor-input { min-height:0; resize:none; line-height:1.65; font-family:ui-monospace,Consolas,monospace; }
#settings-modal>* { width:100%; max-width:640px; margin-left:auto; margin-right:auto; }
@media(min-width:900px) { #start-screen { justify-content:center; } #fs-main-content { width:100%; max-width:1000px; align-self:center; } .fs-head,.fs-controls,.fs-foot { width:100%; max-width:1000px; align-self:center; } .fs-song { order:0; flex:1; } .nav-btn { min-width:74px; } }
@media(max-width:380px) { .fs-overlay { padding-left:10px; padding-right:10px; } .fs-controls { gap:3px; } .fs-controls::before { display:none; } .key-box,.font-box { padding-left:4px; margin-left:0; } }
@media(orientation:landscape) and (max-height:600px) { .fs-head { padding-bottom:4px; }.fs-song { order:0; flex:1; }.fs-overlay { gap:4px; }.fs-controls { padding:4px 0; }.fs-foot { position:absolute; right:12px; bottom:12px; width:150px; }.fs-controls { padding-right:160px; }.fs-body { padding:8px 0; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }

/* High-contrast surfaces for stage visibility. */
:root { --surface:#000; --nav-bg:#000; }
.title-input,.login-input,#setlist-input,#editor-input,
.voice-card,.menu-item,.music-results .menu-item,.settings-row,
#side-menu,.navbar-capsule,.menu-new-btn,.btn-logout,
.settings-save-btn { background:#000; border-color:#292929; }
.voice-warn { color:#ff4400; }
#menu-btn { background:#000; border-radius:12px; }

#btn-start { display:flex; align-items:center; justify-content:center; flex-shrink:0; min-height:56px; padding:16px 24px; line-height:1.2; text-align:center; background:linear-gradient(135deg,#00b09b,#96c93d); }

/* Six actions remain visible on narrow phones. */
@media(max-width:600px) { .navbar-capsule { width:calc(100% - 20px); gap:0; padding:6px; } .navbar-capsule .nav-btn { min-width:0; flex:1; padding:8px 2px; } .navbar-capsule .nav-btn span { font-size:10px; } }
.request-search-row { display:flex; align-items:center; width:100%; gap:8px; max-width:600px; }
.request-search-row .fs-search-input { flex:1; min-width:0; margin:0; border-radius:24px; }
#request-mic { width:48px; height:48px; flex-shrink:0; background:#000; color:var(--accent); border:1px solid #333; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
#request-mic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
#request-mic.listening { color:#ff674d; border-color:#ff674d; }
#request-voice-status { color:#aaa; font-size:13px; min-height:20px; line-height:1.5; max-width:600px; }

/* Subtle contrast refinement, preserving the stage palette. */
:root { --text-dim:#a8adb4; }
.title-input,.login-input,#setlist-input,#editor-input,
.voice-card,.menu-item,.music-results .menu-item,.settings-row,
#side-menu,.navbar-capsule,.menu-new-btn,.btn-logout,
.settings-save-btn { border-color:#34383d; }
.title-input::placeholder,.login-input::placeholder,
#setlist-input::placeholder,.fs-search-input::placeholder,.music-input::placeholder { color:#9299a2; opacity:1; }
.field-label,.subtitle,.menu-item-meta,.nav-btn span { color:#b0b7bf; }
.menu-item:hover,.nav-btn:hover { background:#101310; border-color:#42614c; }
.nav-btn.active-info,.nav-btn.active-info span { color:#00e676; }
.fs-search-input:focus,.music-input:focus,.title-input:focus,#setlist-input:focus { border-color:#00e676; box-shadow:0 0 0 2px #00e67618; }
#request-mic { border-color:#3c4841; background:#050a07; }
#request-voice-status { color:#b0b7bf; }
.voice-warn { color:#ff4400; }

#fs-view.light .fs-search-title,
#fs-view.light .fs-search-cta { color:#111; }
#fs-cifra-go { background:#00e676; color:#000; }

#fs-view.light .fs-search-title { color:#fff; }

#fs-view .fs-search-title { color:#fff; }

#fs-view .fs-search-title { color:#fff; }
#fs-view.light .fs-search-title { color:#111; }
#fs-cifra-go { background:#00e676; color:#fff; }

#fs-view.light #request-mic { background:#fff; border-color:#ddd; }

#fs-view.light .fs-search-results .menu-item { background:#f4f4f4; border-color:#d9d9d9; }
#fs-view.light .fs-search-results .menu-item:hover,
#fs-view.light .fs-search-results .menu-item:active,
#fs-view.light .fs-search-results .menu-item:focus-visible { background:#e4f7ec; border-color:#00b85e; }
#fs-view.light .fs-search-results .menu-item-name { color:#18212b; }
#fs-view.light .fs-search-results .menu-item-meta,
#fs-view.light #request-voice-status { color:#555f69; }

#fs-cifra-query { appearance:none; -webkit-appearance:none; background:var(--fs-bg); color:var(--fs-text); border:1px solid var(--fs-btn-border); }
#fs-cifra-query:focus,#fs-cifra-query:focus-visible { outline:none; border-color:#00e676; box-shadow:0 0 0 1px #00e676; }
#fs-view.light #fs-cifra-query { background:#fff; color:#18212b; color-scheme:light; }
#fs-view.light #fs-cifra-query:-webkit-autofill { -webkit-text-fill-color:#18212b; -webkit-box-shadow:0 0 0 1000px #fff inset; }
#fs-cifra-query::selection { background:#c6f5dc; color:#18212b; }


/* The reader owns vertical scrolling; horizontal swipes still switch songs. */
#fs-page { touch-action:pan-y pinch-zoom; }

/* Alternate between the current song and a complete setlist sheet. */
#stage-view-toggle { position:absolute; top:calc(16px + env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); z-index:160; min-height:44px; padding:8px 12px; color:#bac3ca; background:#141414; border:1px solid #333; border-radius:12px; font-size:13px; }
#stage-sheet { position:absolute; inset:calc(76px + env(safe-area-inset-top)) 20px calc(130px + env(safe-area-inset-bottom)); overflow-y:auto; z-index:20; color:#fff; }
#stage-sheet[hidden] { display:none; }
#stage-sheet-title { font-size:clamp(20px,4vw,32px); margin:0 0 20px; overflow-wrap:anywhere; }
#stage-sheet-list { margin:0; padding-left:2.4em; font-size:clamp(17px,3.6vw,25px); }
#stage-sheet-list li { padding:0 0 4px; color:#929292; }
#stage-sheet-list button { display:block; width:100%; text-align:left; background:transparent; color:#eee; border:0; border-radius:8px; padding:10px 8px; font:inherit; line-height:1.35; overflow-wrap:anywhere; }
#stage-sheet-list button[aria-current] { background:#133022; color:var(--accent); font-weight:700; }
#app-content.sheet-mode #main-stage,#app-content.sheet-mode #touch-prev,#app-content.sheet-mode #touch-next { display:none; }
@media(orientation:landscape) and (max-height:600px) { #stage-sheet { top:60px; bottom:85px; } }

#autosave-status { width:100%; max-width:500px; font-size:12px; color:#a7b2aa; margin:-4px 0 16px; }
.show-menu-row { display:flex; align-items:center; gap:8px; padding:8px; }
.show-menu-open { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:1; min-width:0; text-align:left; border:0; background:transparent; color:inherit; padding:8px; }
.show-menu-open .menu-item-name { overflow-wrap:anywhere; }
.show-menu-delete { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; background:transparent; border:1px solid #443333; border-radius:10px; color:#ef9393; }
.show-menu-delete svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* The full button surface is a stable touch target, including icon padding. */
#fs-view button { min-width:48px; min-height:48px; box-sizing:border-box; touch-action:manipulation; }
#fs-view button * { pointer-events:none; }
#fs-view .fs-icon-btn,#fs-view .speed-btn,#fs-view .font-btn { flex-shrink:0; }
#fs-view .fs-icon-btn:hover,#fs-view .fs-icon-btn:active { transform:none; }

/* Toasts are visual feedback only, including while transparent. */
#toast { pointer-events:none; }
#btn-google-login { display:flex; align-items:center; justify-content:center; gap:12px; }
#btn-google-login .google-mark { display:block; flex-shrink:0; }

/* Keep the reader's scroll/compositor layer underneath the header hit targets. */
#fs-view .fs-head { position:relative; z-index:311; isolation:isolate; }
#fs-view .fs-head button { position:relative; pointer-events:auto; }
#fs-view .fs-back-btn { background:transparent; border-color:transparent; color:var(--fs-text); }

#stage-count-select { min-height:44px; padding:10px; border:1px solid #444; border-radius:10px; color:#fff; background:#111; font-size:16px; flex-shrink:0; }
#stage-five-list[hidden] { display:none; }
#app-content.five-mode #stage-current,#app-content.five-mode #stage-next { display:none; }
#app-content.five-mode #main-stage { top:calc(68px + env(safe-area-inset-top)); bottom:calc(110px + env(safe-area-inset-bottom)); justify-content:flex-start; overflow-y:auto; padding:12px 24px; }
#stage-five-list { width:100%; max-width:900px; margin:8px auto 0; padding-left:1.65em; text-align:left; font-size:clamp(23px,5.75vw,39px); line-height:1.3; }
#stage-five-list li { padding:8px 10px; margin-bottom:4px; color:#a8adb4; overflow-wrap:anywhere; border-radius:10px; }
#stage-five-list li[aria-current] { background:#10321f; color:#fff; font-weight:750; box-shadow:inset 4px 0 #00e676; }
#invert-next-toggle:disabled + .slider { opacity:.35; }
@media(orientation:landscape) and (max-height:600px) { #app-content.five-mode #main-stage { top:54px; bottom:80px; padding:4px 20px; } #stage-five-list { font-size:clamp(20px,4.5vh,29px); margin-top:2px; } #stage-five-list li { padding:3px 10px; margin-bottom:2px; } #app-content.five-mode #stage-count { margin-bottom:2px; } }

/* Bound the app to Android's actual visible area after auth and keyboard changes. */
html { width:100%; height:100%; overflow:hidden; }
body { position:fixed; inset:0; width:100%; height:var(--app-height,100dvh); overscroll-behavior:none; }

#setlist-format-help { width:100%; max-width:500px; color:#aab1bb; font-size:13px; line-height:1.6; margin:-14px 0 24px; }
#setlist-format-help strong,#setlist-format-help span { color:#ffca6b; }
#app-content.section-mode #stage-current,#app-content.section-mode #stage-count,#stage-next.next-section { color:#ffca6b; }
#stage-sheet-list .setlist-section,#stage-five-list .setlist-section { color:#ffca6b; list-style:none; font-weight:800; border-left:3px solid #ffca6b; padding:10px 12px; margin:18px 0 10px -1.4em; background:#ffca6b0a; border-radius:8px; }
#stage-five-list .setlist-section { font-size:clamp(16px,4vw,26px); line-height:1.3; margin-top:10px; }
.nav-btn:disabled { opacity:.3; pointer-events:none; }

/* Fade controls first; release their layout space only when the fade completes. */

#payment-screen { position:fixed; inset:0; z-index:1500; height:var(--app-height,100dvh); overflow-y:auto; background:radial-gradient(circle at top,#1a1a1a 0%,#000 70%); padding:32px 24px; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; }
#payment-screen > * { width:100%; max-width:500px; }
#payment-screen p { margin:0; line-height:1.5; color:#b0b7bf; }
#payment-screen #payment-price { color:#00e676; font-size:38px; font-weight:800; }
#payment-screen #payment-status { min-height:48px; font-size:14px; }
#payment-screen button:disabled { opacity:.5; cursor:wait; }
.menu-account-email { font-size:13px; color:#a1adb6; overflow-wrap:anywhere; }


/* Controls and lyrics share one page and leave the viewport through ordinary scrolling. */
#fs-page { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; max-width:1000px; align-self:center; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; gap:10px; }
#fs-page > .fs-head { order:0; }
#fs-page > .fs-controls { order:1; position:static; padding-right:0; }
#fs-page > .fs-foot { order:2; position:static; width:100%; }
#fs-page > #fs-main-content { order:3; flex:none; overflow:visible; width:100%; min-height:200px; padding-bottom:32px; }