:root {
  --bg: #0b0b0b;
  --panel: #161513;
  --panel-2: #1f1d1a;
  --line: #34312b;
  --cream: #f3ddb0;
  --cream-dim: #c9b88f;
  --paper: #e8e4da;
  --muted: #8f897b;
  --danger: #d96b5b;
  --radius: 12px;
  --serif: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--paper); font: 16px/1.5 "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; }
body { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
h1, h2, h3 { font-family: var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); margin: 0; font-weight: 900; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
a { color: var(--cream); }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* layout */
.shell { max-width: 720px; margin: 0 auto; padding: 0 16px 96px; }
header.top { position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 80%, transparent); padding: calc(env(safe-area-inset-top) + 14px) 0 12px; display: flex; align-items: center; gap: 12px; }
header.top img { width: 36px; height: 36px; border-radius: 50%; }
header.top h1 { flex: 1; }
nav.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; background: #0e0d0c; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs a { flex: 1; text-align: center; padding: 12px 4px 10px; text-decoration: none; color: var(--muted); font-family: var(--serif); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
nav.tabs a.on { color: var(--cream); box-shadow: inset 0 2px 0 var(--cream); }

/* controles */
.btn { border: 1px solid var(--cream-dim); background: transparent; color: var(--cream); border-radius: 999px; padding: 9px 16px; cursor: pointer; font-family: var(--serif); letter-spacing: .05em; text-transform: uppercase; font-size: .82rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn.primary { background: var(--cream); color: #1a1710; border-color: var(--cream); font-weight: 900; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.sm { padding: 5px 11px; font-size: .74rem; }
.btn:disabled { opacity: .45; }
.btn.icon { padding: 6px 11px; }
.fab { position: fixed; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 70px); z-index: 7; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--cream); color: #1a1710; font-size: 1.9rem; line-height: 1; box-shadow: 0 6px 18px #000a; cursor: pointer; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }

label.f { display: block; }
label.f > span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 4px; }
input, select, textarea { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cream-dim); outline-offset: 0; }
textarea { resize: vertical; min-height: 110px; }
textarea.chart { font-family: var(--mono); font-size: .85rem; min-height: 280px; white-space: pre; overflow: auto; }

/* cartões e listas */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.list { display: grid; gap: 10px; margin-top: 8px; }
.item { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; text-decoration: none; color: inherit; }
.item:active { background: var(--panel-2); }
.item .t { font-weight: 600; }
.badge { font-family: var(--serif); font-size: .72rem; letter-spacing: .06em; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--cream-dim); white-space: nowrap; }
.badge.key { color: var(--cream); border-color: var(--cream-dim); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 13px; white-space: nowrap; cursor: pointer; font-size: .85rem; }
.chip.on { background: var(--cream); color: #1a1710; border-color: var(--cream); }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.tag { font-size: .78rem; color: var(--cream-dim); }

/* cifra */
pre.chart { font-family: var(--mono); font-size: .88rem; line-height: 1.5; margin: 0; white-space: pre; overflow-x: auto; color: var(--paper); }
pre.chart .ch { color: var(--cream); font-weight: 900; }

/* ordem do setlist */
.seq { counter-reset: n; }
.seq .item::before { counter-increment: n; content: counter(n); font-family: var(--serif); color: var(--cream-dim); width: 1.6em; text-align: center; font-size: 1.1rem; }

/* modo palco */
#stage-view { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
#stage-view .bar { display: flex; gap: 8px; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 10px 8px; background: #0e0d0c; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
#stage-view .title { flex: 1; min-width: 120px; }
#stage-view .title b { font-family: var(--serif); color: var(--cream); letter-spacing: .04em; }
#stage-view .body { flex: 1; overflow: auto; padding: 14px 16px 40vh; }
#stage-view pre.chart { color: #f4f0e6; }
#stage-view .foot { display: flex; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: #0e0d0c; border-top: 1px solid var(--line); }
#stage-view .foot .btn { flex: 1; justify-content: center; }
.hud { font-family: var(--mono); min-width: 2.6em; text-align: center; color: var(--cream); }

/* login */
.login { max-width: 360px; margin: 0 auto; padding: 8vh 20px; text-align: center; }
.login img { width: 190px; max-width: 60%; border-radius: 50%; margin-bottom: 18px; }
.login form { text-align: left; margin-top: 18px; }
.err { color: var(--danger); font-size: .9rem; min-height: 1.3em; }

/* modal */
.sheet-bg { position: fixed; inset: 0; background: #000b; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 720px; max-height: 92dvh; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 18px 18px 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom) + 20px); }
audio { width: 100%; margin-top: 8px; }
.rec { color: var(--danger); animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

#toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--cream); color: #1a1710; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: .25s; z-index: 99; font-weight: 600; max-width: 90vw; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- ícones e refinamentos ---- */
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; pointer-events: none; }
nav.tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-weight: 700; }
nav.tabs a .i { width: 23px; height: 23px; }
.btn { font-weight: 700; }
.btn.icon { min-width: 38px; min-height: 38px; justify-content: center; padding: 6px 9px; }
.btn.sm.icon { min-width: 34px; min-height: 34px; }
.search { position: relative; }
.search .i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 1.2em; height: 1.2em; }
.search input { padding-left: 42px; }
.empty .i { width: 44px; height: 44px; display: block; margin: 0 auto 12px; color: var(--cream-dim); opacity: .8; }
.chev { color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.badge .i { width: .95em; height: .95em; }
.meta { display: inline-flex; align-items: center; gap: 5px; }
.meta .i { width: .95em; height: .95em; }
.tone { display: inline-flex; align-items: center; gap: 6px; color: var(--cream-dim); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.item .t { font-weight: 700; }
.fab .i { width: 26px; height: 26px; vertical-align: middle; }

/* palco: barra em duas linhas e rodapé que cabe em telas estreitas */
#stage-view .bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; }
#stage-view .ctl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#stage-view .grp { display: flex; align-items: center; gap: 6px; }
#stage-view .title { min-width: 0; }
#stage-view .title b, #stage-view .title .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-view .foot .btn { flex: 1 1 0; min-width: 0; padding: 11px 4px; font-size: .72rem; letter-spacing: .02em; white-space: nowrap; justify-content: center; }

/* ---- mais ícones ---- */
.hd { display: flex; align-items: center; gap: 10px; }
.hd .i { color: var(--cream-dim); width: 1.05em; height: 1.05em; }
header.top h1.hd { font-size: 1.2rem; }
.lb { display: inline-flex; align-items: center; gap: 6px; }
.lb .i { width: 1em; height: 1em; opacity: .9; }
.lead { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--cream); }
.lead .i { width: 19px; height: 19px; }
.cap { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 8px; }
.cap .i { width: 1em; height: 1em; }
.chip { display: inline-flex; align-items: center; gap: 6px; }
.chip .i { width: 1em; height: 1em; }
.net { display: grid; place-items: center; color: var(--danger); }
.net[hidden] { display: none; }
.loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 0; }
.loading .i, .btn:disabled .i[data-spin] { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { display: flex; align-items: center; gap: 8px; }
#toast.ok .i { color: #1f6b3a; }
#toast.err { background: var(--danger); color: #fff; }
.tag.meta { display: flex; }

/* observações no palco: destaque e leitura fácil */
#stage-view .obs { background: #231c08; border: 1px solid #5c4a14; border-left: 6px solid var(--cream); border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; color: #fff4d6; font-weight: 700; line-height: 1.45; }
#stage-view .obs-h { display: flex; align-items: center; gap: 7px; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin-bottom: 6px; opacity: .9; }
#stage-view .obs-t[aria-pressed="true"] { background: var(--cream); color: #1a1710; border-color: var(--cream); }

/* palco: 3 grupos de controles podem quebrar linha */
#stage-view .ctl { flex-wrap: wrap; row-gap: 8px; }

/* ---- ideias: lista ---- */
.idea { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-decoration: none; color: inherit; }
.idea:active { background: var(--panel-2); }
.thumb { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; flex: none; background: var(--panel-2); }
.thumb.ph { display: grid; place-items: center; color: var(--cream-dim); border: 1px solid var(--line); }
.idea .t { font-weight: 700; }
.pv { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .9rem; }

/* ---- ideias: detalhe ---- */
.shell.with-composer { padding-bottom: 250px; }
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--cream-dim); text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.cover { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--panel); cursor: zoom-in; }
.cover img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.steps { display: flex; gap: 8px; margin: 16px 0 4px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.step .i { width: 20px; height: 20px; }
.step.done { color: var(--cream-dim); border-color: #4a4434; }
.step.on { border-color: var(--cream); color: var(--cream); background: var(--panel); box-shadow: 0 0 0 1px var(--cream) inset; }

.tl { list-style: none; margin: 22px 0 0; padding: 0 0 0 22px; position: relative; }
.tl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--cream-dim), var(--line)); border-radius: 2px; }
.te { position: relative; margin: 0 0 14px 22px; }
.te .dot { position: absolute; left: -44px; top: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); border: 2px solid var(--cream-dim); display: grid; place-items: center; color: var(--cream); }
.te .dot .i { width: 15px; height: 15px; }
.day { margin: 4px 0 12px 22px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); font-weight: 700; }
.tc { padding: 12px 14px; }
.th { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.th b { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.txt { white-space: pre-wrap; word-break: break-word; font-size: 1.02rem; }
.cap-t { margin-top: 8px; color: var(--paper); opacity: .9; }
.pic { width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in; background: var(--panel-2); }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; word-break: break-all; }
.brk { word-break: break-all; margin-top: 4px; }
.ta { margin-top: 10px; gap: 4px; }
.btn.ghost { border-color: transparent; color: var(--muted); padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover, .btn.ghost:active { color: var(--cream); }
.removed { margin-top: 18px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px; }
.removed summary { cursor: pointer; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.removed .item { margin-top: 10px; }

/* compositor fixo, acima da barra de abas */
.composer { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 68px); z-index: 6; padding: 22px 10px 8px; background: linear-gradient(transparent, var(--bg) 28%); pointer-events: none; }
.composer .in { pointer-events: auto; max-width: 720px; margin: 0 auto; background: var(--panel); border: 1px solid var(--cream-dim); border-radius: 18px; padding: 8px; box-shadow: 0 -6px 24px #000a; }
.composer.busy .in { opacity: .6; pointer-events: none; }
.kinds { display: flex; gap: 6px; margin-bottom: 8px; }
.kinds .chip { padding: 4px 11px; font-size: .78rem; }
.cbar { display: flex; gap: 6px; align-items: flex-end; }
.cbar textarea { flex: 1; min-height: 44px; max-height: 150px; resize: none; padding: 11px 12px; border-radius: 12px; }
.cbar textarea.mono { font-family: var(--mono); font-size: .9rem; }
.cbar .btn.icon { min-width: 44px; min-height: 44px; padding: 0 10px; }
.cbar .btn.rec { color: var(--danger); border-color: var(--danger); animation: pulse 1.1s infinite; }
.rp { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rp audio { flex: 1; margin: 0; height: 36px; min-width: 0; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1.1s infinite; }
.rec-dot[hidden] { display: none; }

/* compositor compacto */
.rp[hidden], .rec-dot[hidden] { display: none; }
.kinds { align-items: center; }
.kinds .chip:not(.on) span { display: none; }
.kinds .chip:not(.on) { padding: 6px 10px; }
.kinds .btn.sm.icon.rec { color: var(--danger); border-color: var(--danger); animation: pulse 1.1s infinite; }
.shell.with-composer { padding-bottom: 210px; }

/* semente → broto → árvore */
.scene { display: block; margin: 14px auto 0; width: min(100%, 260px); color: var(--cream); overflow: visible; }
.scene * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene .fill { fill: var(--cream); fill-opacity: .14; }
.scene .dot { fill: var(--cream); stroke: none; }
.scene g { transform-origin: 80px 74px; animation: grow .8s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes grow { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.scene-cap { text-align: center; color: var(--cream-dim); font-size: .85rem; margin: 6px 0 8px; }