:root {
  --bg: #16181b; --panel: #1e2125; --panel2: #262a2f; --line: #33383e; --fg: #e8eaed; --dim: #8d949c;
  --acc: #4aa3ff; --acc2: #2b6cb0; --warn: #e0a030; --bad: #e03a3a; --ok: #4caf7a; --hl: rgba(255, 220, 0, .38);
  --focus: rgba(255, 140, 0, .55);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       display: flex; flex-direction: column; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.dim { color: var(--dim); }

/* ---- barra de topo */
#top { display: flex; align-items: center; gap: 16px; padding: 8px 12px; background: #0f1012; border-bottom: 1px solid var(--line);
       flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; color: inherit; text-decoration: none; }
.brand img { width: 22px; height: 22px; }
.brand small { color: var(--dim); font-weight: 400; }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.fld { display: flex; align-items: center; gap: 6px; color: var(--dim); white-space: nowrap; }
.fld select { max-width: 220px; }
select, input[type=search], input[type=number], input:not([type]) {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; min-height: 30px; }
select:focus, input:focus, canvas:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.chk { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.chk b { color: var(--bad); font-weight: 600; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; min-height: 30px;
       cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--acc); }
.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.ic { background: none; border: 1px solid transparent; border-radius: 6px; min-width: 30px; height: 30px; cursor: pointer;
      font-size: 16px; line-height: 1; }
.ic:hover { border-color: var(--line); background: var(--panel2); }
.ic.on { color: var(--warn); }

/* ---- área principal: resultados | ecrã(s) | manual */
/* --mw: largura do manual, mudada ao arrastar a barra #split (guardada no browser) */
/* áreas com nome: esconder um painel não empurra os outros para outra coluna.
   --rw (pesquisas) e --sw (ecrã de parâmetros) são calculados em app.js (applyLayout); o manual fica com o resto */
#main { flex: 1; display: grid; min-height: 0; grid-template-areas: "res s0 scr s1 man";
        grid-template-columns: var(--rw, 300px) 7px var(--sw, 640px) 7px minmax(0, 1fr); }
#results { grid-area: res; } #split0 { grid-area: s0; } #screens { grid-area: scr; } #split { grid-area: s1; } #manual { grid-area: man; }
#main.collapsed { grid-template-columns: 34px 0 var(--sw, 640px) 7px minmax(0, 1fr); }
#main.collapsed #split0 { display: none; }
/* sem backup o ecrã e a barra do manual ficam escondidos: só pesquisas | manual */
#main.noparams { grid-template-columns: var(--rw, 300px) 7px 0 0 minmax(0, 1fr); }
#main.noparams.collapsed { grid-template-columns: 34px 0 0 0 minmax(0, 1fr); }
#main.noparams #screens, #main.noparams #split { display: none; }
.split { cursor: col-resize; background: var(--line); position: relative; touch-action: none; }
.split::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 40px; margin-top: -20px;
                border-left: 1px solid var(--dim); border-right: 1px solid var(--dim); }
.split:hover, .split.drag { background: var(--acc2); }
body.dragging { cursor: col-resize; user-select: none; }
body.dragging #pageScroll, body.dragging canvas { pointer-events: none; }
.panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#results { border-right: 1px solid var(--line); }
#manual { border-left: 1px solid var(--line); }
#main.collapsed #results .tab, #main.collapsed #results .tabs button[data-tab] { display: none; }
#main.collapsed #btnCollapse { transform: rotate(180deg); margin: 0; width: 100%; }
#vlabel { display: none; }
#main.collapsed #results { cursor: pointer; }
#main.collapsed #results:hover { background: var(--panel2); }
#main.collapsed #vlabel { display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; padding: 14px 0;
  margin: 0 auto; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); user-select: none; }
#vlabel span { writing-mode: horizontal-tb; }

.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; color: var(--dim); }
.tabs button.on { color: var(--fg); border-bottom-color: var(--acc); }
.tabs.small button { padding: 6px 8px; font-size: 13px; }
#btnCollapse { margin-left: auto; }
.tab { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.search { display: flex; gap: 6px; padding: 8px; }
.search input { flex: 1; min-width: 0; }
.count { padding: 0 10px 6px; color: var(--dim); font-size: 12px; }
.list { overflow: auto; flex: 1; min-height: 0; }

.hit { padding: 6px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.hit:hover { background: var(--panel2); }
.hit.sel { background: #24364a; }
.hit .h1 { display: flex; gap: 8px; align-items: baseline; }
.hit .num { font: 600 13px Consolas, "DejaVu Sans Mono", monospace; color: var(--acc); }
.hit .key { font: 12px Consolas, "DejaVu Sans Mono", monospace; color: var(--warn); }
.hit .vals { margin-left: auto; font: 12px Consolas, "DejaVu Sans Mono", monospace; white-space: nowrap; }
.hit .vals .d { color: var(--bad); }
.hit .t { color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit .w { color: var(--dim); font-size: 12px; }
.hit .s { color: var(--dim); font-size: 12px; margin-top: 2px; }
.hit mark, .s mark { background: var(--hl); color: inherit; }
.hit .kids { margin-top: 4px; padding-left: 12px; font: 12px Consolas, monospace; color: var(--dim); }
.tog { color: var(--dim); cursor: pointer; padding: 0 2px; }

/* ---- ecrãs de parâmetros */
#screens { display: flex; gap: 6px; padding: 6px; background: #1c1c1c; min-width: 0; min-height: 0; }
#screens.stack { flex-direction: column; }
.screenwrap { flex: 1; min-width: 0; min-height: 0; position: relative; }
.screenwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- manual */
.mbar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mbar select { max-width: 45%; }
.mbar .sp { flex: 1; }
#pNum { width: 64px; text-align: right; }
#pTot { margin: 0 4px; }
.mhits { max-height: 112px; overflow: auto; border-bottom: 1px solid var(--line); font-size: 13px; }
.mhits:empty { display: none; }
.mhits .hd { padding: 4px 8px; color: var(--dim); }
.mhits .mh { padding: 3px 8px 3px 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mhits .mh:hover { background: var(--panel2); }
.mhits .mh.on { background: #24364a; }
.mhits .mh .wk { color: var(--warn); }
.mbody { flex: 1; display: flex; min-height: 0; }
aside#side { width: 42%; max-width: 280px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
aside .it { padding: 4px 8px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #2a2e33; }
aside .it:hover { background: var(--panel2); }
aside .it .pg { color: var(--dim); float: right; margin-left: 6px; }
aside .it .by { color: var(--dim); font-size: 11px; }
aside .it .x { float: right; color: var(--dim); margin-left: 6px; }
aside .it .x:hover { color: var(--bad); }
#pageScroll { flex: 1; overflow: auto; background: #50555b; position: relative; min-width: 0; }
#pageBox { position: relative; margin: 10px auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
#pageImg { display: block; width: 100%; height: auto; }
#pageMore { margin: 0 auto; }
#pageMore .pbox { margin: 10px 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
#pageMore img { display: block; width: 100%; height: auto; }
#marks { position: absolute; inset: 0; pointer-events: none; }
#marks .r { position: absolute; background: var(--hl); mix-blend-mode: multiply; }
#marks .f { position: absolute; outline: 3px solid var(--focus); background: rgba(255, 140, 0, .25); border-radius: 2px; }
.empty { padding: 30px 20px; color: #ddd; text-align: center; }

/* ---- rodapé, balões, diálogos */
#status { display: flex; gap: 16px; padding: 4px 12px; background: #0f1012; border-top: 1px solid var(--line); color: var(--dim);
          font-size: 13px; white-space: nowrap; overflow: hidden; }
#statusText { overflow: hidden; text-overflow: ellipsis; flex: 1; }
#jobsText { color: var(--warn); }
.tip { position: fixed; z-index: 50; max-width: 420px; background: #fffbe6; color: #111; border: 1px solid #999; padding: 5px 8px;
       font-size: 13px; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 0;
         width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dlghead { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.dlghead h2 { margin: 0; font-size: 17px; flex: 1; }
.dlgbody { padding: 4px 16px 16px; }
.dlgbody h3 { font-size: 14px; margin: 18px 0 6px; color: var(--acc); }
.rows .r, .lib .m { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.rows .r .n, .lib .m .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; }
.lib .lh { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--panel2); border-radius: 8px 8px 0 0; }
.lib .lh b { flex: 1; }
.row { display: flex; align-items: center; flex-wrap: wrap; }
.gap { gap: 8px; }
.bar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; width: 160px; }
.bar i { display: block; height: 100%; background: var(--acc); }

/* ---- demonstração: biblioteca só de leitura */
body.demo #bMark, body.demo #bNote, body.demo aside .it .x, body.demo #libList .btn, body.demo #libList .chk,
body.demo .demo-hide { display: none !important; }

/* ---- ecrãs estreitos (tablet ao pé da máquina, telemóvel) */
@media (max-width: 1100px) {
  body { overflow: auto; }
  #main, #main.collapsed, #main.noparams { display: flex; flex-direction: column; }
  #main > * { flex: none; }
  .split { display: none !important; }
  #results { border-right: 0; border-bottom: 1px solid var(--line); }
  #results .tab { flex: none; }
  #results .list { flex: none; max-height: 40vh; }
  #main.collapsed #results { max-height: 44px; flex-direction: row; }
  #main.collapsed #results .tabs { border: 0; }
  #main.collapsed #btnCollapse { width: auto; transform: rotate(-90deg); }
  #main.collapsed #vlabel { writing-mode: horizontal-tb; margin: 0; padding: 0 4px; }
  #screens { min-height: 75vw; flex-direction: column; }
  #main.noparams #screens { display: none; }
  #manual { min-height: 80vh; border-left: 0; border-top: 1px solid var(--line); }
  #top { gap: 8px; flex-direction: column; align-items: stretch; }
  .fld select { max-width: 150px; }
}