/* PENAHX LAB — interface unificada (Luz, Tinta, Sinal) */
:root {
  --bg: #08080a;
  --panel: #0e0e12;
  --line: #27272f;
  --txt: #f2f1ed;
  --dim: #9a9aa6;
  --red: #e0000f;
  --lime: #c8fa4b;
  --font-sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Roboto Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt); font:12px/1.4 var(--font-sans); overflow:hidden; }
#app { display:grid; grid-template-columns: 1fr 350px; height:100%; }
#stage { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:12px; }
#stage.drop::after { content:'solte aqui: imagem, vídeo ou música'; position:absolute; inset:16px; border:2px dashed var(--red); border-radius:4px; background:rgba(8,8,10,.86); display:flex; align-items:center; justify-content:center; font:12px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; pointer-events:none; z-index:4; }
canvas { background:#000; box-shadow:0 0 0 1px var(--line); max-width:100%; max-height:100%; touch-action:none; user-select:none; cursor:crosshair; }
#bar { position:absolute; left:12px; top:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; align-items:center; background:rgba(14,14,18,.82); backdrop-filter:blur(8px); padding:5px 7px; border:1px solid var(--line); border-radius:3px; }
#panel { background:var(--panel); border-left:1px solid var(--line); overflow:auto; padding:12px 14px 40px; min-width:0; }
button, select, input[type=text] { background:#17171d; color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:4px 8px; font:11px/1.3 var(--font-mono); letter-spacing:.03em; transition:border-color .15s, background .15s, color .15s; }
button { cursor:pointer; }
button:hover, select:hover { border-color:#5a5a66; }
button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--lime); outline-offset:1px; }
button.on { background:var(--red); border-color:var(--red); color:#fff; }
details { border-top:1px solid var(--line); padding:6px 0; }
summary { cursor:pointer; color:var(--dim); text-transform:uppercase; letter-spacing:.14em; font:600 10px/1.4 var(--font-mono); padding:4px 0; }
summary:hover { color:var(--txt); }
.row { display:grid; grid-template-columns: 1fr 56px; gap:2px 8px; align-items:center; margin:6px 0; }
.row label { user-select:none; cursor:pointer; font-size:12px; }
.row .v { text-align:right; color:var(--dim); font:11px var(--font-mono); font-variant-numeric:tabular-nums; }
.row input[type=range] { grid-column:1 / 3; width:100%; accent-color:var(--red); margin:0; cursor:pointer; }
.row.inline { grid-template-columns: 1fr auto; }
.row.inline input, .row.inline select { justify-self:end; }
.row.learn label { color:var(--lime); font-weight:600; }
.lab-header { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 6px; }
h1 { font:700 13px/1.2 var(--font-sans); letter-spacing:.26em; margin:0; text-transform:uppercase; }
h1 small { color:var(--lime); letter-spacing:.12em; font:500 11px var(--font-mono); margin-left:6px; }
.lab-nav { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid var(--line); font:10px/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; }
.lab-nav a { color:var(--dim); text-decoration:none; padding:3px 6px; border:1px solid transparent; border-radius:2px; transition:color .15s, border-color .15s, background .15s; }
.lab-nav a:hover { color:var(--txt); border-color:var(--line); }
.lab-nav a.active { color:#08080a; background:var(--lime); border-color:var(--lime); font-weight:600; }
.lab-nav a.back { color:var(--txt); border-color:var(--line); margin-right:2px; }
.lab-nav a.back:hover { border-color:var(--lime); color:var(--lime); }
#modoLink { font:10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--dim); text-decoration:underline; cursor:pointer; background:none; border:0; padding:2px 4px; }
#modoLink:hover { color:var(--lime); }
#blurb { color:var(--dim); font-size:11.5px; margin:0 0 8px; line-height:1.45; }
.tools { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.tools > select { flex:1; min-width:0; }
.hint { color:var(--dim); font-size:11px; margin:6px 0; line-height:1.4; }
#err { position:absolute; left:12px; bottom:12px; right:12px; background:#300; color:#fbb; padding:8px; white-space:pre-wrap; font:11px var(--font-mono); display:none; max-height:40%; overflow:auto; z-index:3; border:1px solid #822; }
#fps { color:var(--dim); padding:0 4px; font:10.5px var(--font-mono); }
.meters { display:inline-flex; gap:2px; align-items:flex-end; height:16px; width:26px; padding:2px; border:1px solid var(--line); border-radius:2px; background:#121217; }
.meters i { display:block; width:6px; background:var(--lime); height:12%; transition:height 40ms linear; }
body.full #panel, body.full #bar { display:none; }
body.full #app { grid-template-columns: 1fr; }
body.full #stage { padding:0; }
/* modo simples (celular): cena, cor, beat/música, aleatório, PNG e gravar */
body.simple #app { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
body.simple #panel { border-left:0; border-top:1px solid var(--line); max-height:45vh; padding:8px 12px 14px; }
body.simple #panel > :not(.keep), body.simple #groups > :not(.keep) { display:none !important; }
body.simple #bReset, body.simple #bFull, body.simple #selRes, body.simple #fps { display:none; }
body.simple #stage { padding:6px; }
body.simple #bar { left:6px; top:6px; right:6px; justify-content:space-between; }
body.simple button, body.simple select, body.simple input[type=text] { min-height:38px; font-size:12px; }