/* A Bancada — ported from the approved prototype (z-bancada.html): one
   screen committed to the bench's warm dark, the workbench of someone who
   spends the day on it. The bar is content, not decoration. */
:root{
  --b-bg:#191512; --b-mesa:#211d19; --b-peca:#2a251f; --b-peca2:#362f27; --b-line:#413931;
  --b-ink:#f2ede6; --b-ink2:#a99e90; --b-ink3:#736a5f; --b-ink4:#4e463d;
  --b-at:#63a4e6; --b-ca:#5fc48a; --b-ve:#b98ee8; --b-co:#eaa63f; --b-cp:#4fc4c0; --b-al:#e37460;
  --b-dsp:"Fraunces",ui-serif,Georgia,serif;
  --b-txt:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --b-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --b-t:130ms;
  --cor:var(--b-co);
  color-scheme:dark;
}
.hue-attendance{--cor:var(--b-at)} .hue-counter{--cor:var(--b-cp)} .hue-billing{--cor:var(--b-co)}
.hue-sale{--cor:var(--b-ve)} .hue-field{--cor:var(--b-ca)} .hue-review{--cor:var(--b-al)} .hue-identify{--cor:var(--b-ink2)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--b-bg);color:var(--b-ink);font:15px/1.55 var(--b-txt);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--b-co);outline-offset:2px}
code,.mono{font-family:var(--b-mono);font-size:.92em}
kbd{font:600 10px var(--b-mono);border:1px solid var(--b-line);border-radius:4px;padding:1px 5px;margin-left:6px;color:var(--b-ink3)}
.rot{font:600 9.5px/1 var(--b-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--b-ink3)}
.t-muted{color:var(--b-ink3)} .t-good{color:var(--b-ca)} .t-warn{color:var(--b-co)} .t-bad{color:var(--b-al)} .t-accent{color:var(--b-at)}
.vaz{color:var(--b-ink3);font-size:13px;padding:6px 2px;margin:0}

/* top bar */
.fita{flex:1;max-width:320px;height:8px;border-radius:99px;background:var(--b-peca);display:flex;overflow:hidden;gap:1px}
.fita i{display:block;flex:1;height:100%;background:var(--cor)}
.fita i.pass{background:transparent;box-shadow:inset 0 0 0 1px var(--cor)}
.avail{display:flex;gap:2px;margin-left:auto}
.av{border:1px solid var(--b-line);background:none;border-radius:99px;padding:3px 10px;font-size:11.5px;color:var(--b-ink3)}
.av.on.av-available{border-color:var(--b-ca);color:var(--b-ca);background:#182a20}
.av.on.av-busy{border-color:var(--b-co);color:var(--b-co);background:#2c2318}
.av.on.av-away{border-color:var(--b-ink3);color:var(--b-ink2);background:var(--b-peca)}

/* the room: rail + stage */
.sala{display:grid;grid-template-columns:342px 1fr;min-height:calc(100vh - var(--top-h) - var(--status-h))}
.rail{border-right:1px solid var(--b-line);padding:15px 14px 30px;display:flex;flex-direction:column;gap:8px}
.rail>.rot{margin:10px 0 1px}
.starters{display:flex;flex-direction:column;gap:6px}
.novo{border:1px dashed var(--b-line);background:none;border-radius:10px;padding:11px;color:var(--b-ink2);font-size:13.5px;width:100%;text-align:left;transition:all var(--b-t) ease}
.novo:hover{border-color:var(--cor);color:var(--cor)}

/* the piece */
.pc{background:var(--b-peca);border:1px solid var(--b-line);border-left:3px solid var(--cor);border-radius:0 10px 10px 0;padding:11px 13px 12px;display:block;text-decoration:none;transition:background var(--b-t) ease,border-color var(--b-t) ease}
.pc:hover{background:var(--b-peca2)}
.pc.on{background:var(--b-peca2);border-color:var(--cor)}
.pc.alarme{box-shadow:0 0 0 1px var(--b-al);animation:grita 1.6s ease-in-out infinite}
@keyframes grita{50%{box-shadow:0 0 0 3px #e3746055}}
.pc.rota{border-style:dashed;border-left-style:solid}
.pc .l1{display:flex;gap:8px;align-items:baseline;margin-bottom:2px}
.pc .l1 b{font:600 14px var(--b-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tec{font:600 9.5px/16px var(--b-mono);color:var(--b-ink4);border:1px solid var(--b-line);border-radius:4px;padding:0 5px;flex:none}
.pc.on .tec{color:var(--cor);border-color:var(--cor)}
.pc .l1 .q{margin-left:auto;font:600 11px var(--b-mono);color:var(--b-ink2);flex:none}
.pc .l1 .key{font:600 10px var(--b-mono);color:var(--b-ink4);flex:none}
.pc .qm{font-size:12.5px;color:var(--b-ink2);margin-bottom:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc .note{color:var(--b-co)}
.leg{display:flex;gap:7px;align-items:baseline;margin-top:6px;font:500 11px var(--b-mono);color:var(--b-ink3)}
.leg .g{margin-left:auto;color:var(--b-ink2)}

/* the four bar grammars */
.br{height:6px;border-radius:3px;background:#00000045;display:flex;gap:2px;overflow:hidden}
.br.cheia{gap:0}
.br i{display:block;height:100%;transition:width var(--b-t) ease}
.br .fill{background:var(--cor)}
.br .over{background:var(--cor);opacity:.4;border-left:2px solid var(--b-bg)}
.br .lote{background:#ffffff0f;border-radius:2px;overflow:hidden;position:relative}
.br .lote i{background:var(--cor);height:100%}
.br .tick{flex:1;background:#ffffff10;border-radius:2px}
.br .tick.ok{background:var(--cor)}
.br.presa{background:repeating-linear-gradient(115deg,#ffffff12 0 6px,transparent 6px 12px);border:1px solid var(--b-line);height:8px;border-radius:4px}
/* second channel: how long it has been idle — nothing to do with how much is left */
.esp{height:2px;border-radius:2px;background:#ffffff0d;margin-top:5px;overflow:hidden}
.esp i{display:block;height:100%;background:var(--b-ink4)}
.esp.velha i{background:var(--b-al)}
.esp.calma i{background:var(--b-ink4);opacity:.5}
.tape{display:flex;gap:2px;height:22px;margin-top:2px}
.tape i{flex:1;border-radius:3px;background:var(--cor);opacity:.5}
.tape i.pass{background:transparent;border:1px dashed var(--cor);opacity:.75}

/* the stage */
.palco{padding:22px 26px 56px;min-width:0}
.palco.vazio{display:grid;place-items:center}
.boas{max-width:460px;text-align:center;color:var(--b-ink2)}
.boas h2{font:600 26px/1.2 var(--b-dsp);color:var(--b-ink);margin-bottom:10px}
.cab{margin-bottom:12px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.cab h2{font:600 26px/1.15 var(--b-dsp);letter-spacing:-.01em;text-wrap:balance}
.cab .s{font:12.5px var(--b-mono);color:var(--b-ink3);margin-top:4px}
.grande{margin-left:auto;text-align:right;flex:none}
.grande .k{font:700 26px var(--b-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--cor)}
.grande .d{font:600 9.5px var(--b-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--b-ink3);margin-top:2px}
.palco>.br{height:8px;margin-bottom:0}
.trilha{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:14px 0}
.trilha li{font-size:12px;border:1px solid var(--b-line);border-radius:99px;padding:4px 11px;color:var(--b-ink3)}
.trilha .tr-done{color:var(--b-ink2)} .trilha .tr-done::before{content:"✓ ";color:var(--cor)}
.trilha .tr-skipped{text-decoration:line-through}
.trilha .tr-current{border-color:var(--cor);color:var(--b-ink);background:var(--b-peca)}
.trilha .tr-ahead{border-style:dashed}
.work{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
.work .body{min-width:0}
.passo{font:600 19px var(--b-dsp);margin:4px 0 4px}
.hint{color:var(--b-ink3);font-size:13px;margin:0 0 12px}
.panel{display:flex;flex-direction:column;gap:9px;position:sticky;top:70px}
@media (max-width:1100px){.work{grid-template-columns:1fr}.panel{position:static}}
@media (max-width:760px){.sala{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--b-line)}}

/* nodes */
.px{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:11px;overflow:hidden;margin-bottom:13px}
.px>h3{padding:11px 16px;font-size:13px;color:var(--b-ink2);border-bottom:1px solid var(--b-line)}
.px .in{padding:14px 16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.row>*{flex:1;min-width:180px}
.hd{display:flex;flex-direction:column;margin-bottom:6px}
.hd b{font:600 16px var(--b-dsp)} .hd span{color:var(--b-ink3)}
.tx{margin:4px 0}
.stat .d{font:600 9.5px var(--b-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--b-ink3)}
.stat .k{font:700 30px var(--b-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat .h{font:12px var(--b-mono);color:var(--b-ink3)}
.stat.t-good .k{color:var(--b-ca)} .stat.t-warn .k{color:var(--b-co)} .stat.t-accent .k{color:var(--cor)}
.pairs{margin:0}
.pairs .li{display:flex;gap:11px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--b-peca);font-size:13.5px}
.pairs .li:last-child{border-bottom:0}
.pairs dt{color:var(--b-ink3);flex:0 0 42%} .pairs dd{margin:0;font:600 13px var(--b-mono);font-variant-numeric:tabular-nums;text-align:right;flex:1}
.pairs .t-good dd{color:var(--b-ca)} .pairs .t-warn dd{color:var(--b-co)} .pairs .t-bad dd{color:var(--b-al)} .pairs .t-muted dd{color:var(--b-ink3)} .pairs .t-accent dd{color:var(--cor)}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font:600 10.5px var(--b-mono);border:1px solid currentColor;border-radius:99px;padding:1px 8px;margin-left:6px}
.notice{border:1px solid var(--b-line);border-left:3px solid var(--b-ink3);border-radius:0 10px 10px 0;background:var(--b-mesa);padding:10px 14px;margin-bottom:10px;font-size:14px}
.notice p{margin:4px 0 0;color:var(--b-ink2)}
.notice.t-warn{border-left-color:var(--b-co);background:#2c2318;color:#f3d7a6}
.notice.t-bad{border-left-color:var(--b-al);background:#2d1a16;color:#f5c2b8}
.notice.t-good{border-left-color:var(--b-ca);background:#182a20;color:#cbe9d6}
.notice.t-accent{border-left-color:var(--b-at);background:#17222e;color:#cfe3f7}
.notice ul{margin:6px 0 0;padding-left:18px}
.flash{animation:aparece .3s ease}
@keyframes aparece{from{opacity:0;transform:translateY(-3px)}}
.lst{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:4px}
.lst .pick{width:100%;display:flex;gap:11px;align-items:baseline;text-align:left;background:var(--b-peca);border:1px solid var(--b-line);border-radius:9px;padding:9px 12px;transition:all var(--b-t) ease}
.lst .pick:hover{border-color:var(--cor)}
.lst li.on .pick{border-color:var(--cor);background:var(--b-peca2)}
.lst .pick.static{cursor:default}
.lst .c{flex:1;min-width:0;display:flex;flex-direction:column}
.lst .c small{color:var(--b-ink3);font-size:12px}
.lst .v{font:600 13px var(--b-mono);font-variant-numeric:tabular-nums}
.lst li.t-warn .v{color:var(--b-co)} .lst li.t-bad small{color:var(--b-al)} .lst li.t-good small{color:var(--b-ca)} .lst li.t-muted{opacity:.6}
.field{margin-bottom:12px}
.field label{display:flex;flex-direction:column;gap:5px}
.field label>span,.req label>span,.ed-min label>span,.login label>span{font:600 9.5px var(--b-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--b-ink3)}
input[type=text],input[type=search],input[type=tel],input[type=email],input[type=password],textarea,select{background:var(--b-peca);border:1px solid var(--b-line);border-radius:9px;padding:9px 12px;width:100%;outline:0;transition:border-color var(--b-t) ease}
input:focus,textarea:focus,select:focus{border-color:var(--cor)}
.field.inline{display:flex;gap:6px;margin:6px 0}
.field.inline input{flex:1}
.passos{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--b-line);background:var(--b-peca);border-radius:99px;padding:7px 14px;font-size:13.5px;color:var(--b-ink2);transition:all var(--b-t) ease}
.chip small{color:var(--b-ink3)}
.chip.ok{background:#1c2c3d;border-color:var(--b-at);color:var(--b-at);font-weight:600}
.chip:hover{border-color:var(--cor)}
/* the drawer */
.ced{display:grid;gap:7px;margin-bottom:12px}
.tile{position:relative}
.tile .tap{width:100%;border:1px solid var(--b-line);background:var(--b-peca);border-radius:9px;padding:12px 4px;font:700 16px var(--b-mono);transition:all var(--b-t) ease}
.tile .tap span{display:block;font:600 10px var(--b-txt);color:var(--b-ink3);margin-top:2px}
.tile.tem .tap{border-color:var(--b-ca);background:#182a20;color:var(--b-ca)}
.tile .tap:hover{border-color:var(--b-ca)}
.tile .untap{position:absolute;top:3px;right:3px;border:0;background:#00000055;border-radius:5px;width:20px;height:20px;line-height:18px;font-size:13px;color:var(--b-ink2)}
/* checklist */
.roteiro{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.roteiro .it{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:10px;padding:10px 13px}
.it-h{display:flex;gap:9px;align-items:baseline}
.glyph{font:700 13px var(--b-mono);width:14px;color:var(--b-ink4)}
.v-ok .glyph{color:var(--b-ca)} .v-attention .glyph{color:var(--b-co)} .v-skipped .glyph{color:var(--b-ink3)} .v-answered .glyph{color:var(--b-at)}
.v-attention{border-color:#6b4a1c}
.opt{color:var(--b-ink3);font-size:11px}
.ref{font:12px var(--b-mono);color:var(--b-ink2);margin:3px 0}
.ref.mute{color:var(--b-al);opacity:.85}
.verdict{font-size:12.5px;margin:2px 0}
.skip summary{font-size:12px;color:var(--b-ink3);cursor:pointer;margin-top:4px}
.skip form{display:flex;gap:6px;margin-top:6px}
/* hypotheses */
.hyp{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.hy .pick{width:100%;text-align:left;background:var(--b-peca);border:1px solid var(--b-line);border-radius:10px;padding:10px 13px;transition:all var(--b-t) ease}
.hy .pick:hover{border-color:var(--cor)}
.hy.on .pick{border-color:var(--cor);background:var(--b-peca2)}
.hy-h{display:flex;align-items:baseline}
.hy-h .pct{margin-left:auto;font:600 12px var(--b-mono);color:var(--b-ink2)}
.conf{height:3px;background:#ffffff10;border-radius:2px;margin:6px 0}
.conf i{display:block;height:100%;background:var(--cor);border-radius:2px}
.ev{margin:4px 0 0;padding-left:16px;font-size:12.5px;color:var(--b-ink2)}
.mute-line{font:12px var(--b-mono);color:var(--b-al);margin:2px 0}
.src-line{font-size:11px;color:var(--b-ink4);margin:0}
/* the intent box — an input that becomes what you mean */
.intent{margin-bottom:12px}
.intent input.big{font:500 20px var(--b-txt);padding:16px 18px;border-radius:12px;border-color:var(--cor)}
.morph{display:flex;align-items:center;gap:6px;min-height:34px;padding:8px 2px;font-size:14px;color:var(--b-ink2)}
.morph .ghost{opacity:.75} .morph .ghost b{color:var(--cor)}
.morph .committed b{color:var(--cor)}
.engine{font-size:11px;color:var(--b-ink4);margin:4px 0 0}
/* conversation */
.conv .msgs{display:flex;flex-direction:column;margin-bottom:8px;max-height:340px;overflow:auto;padding-right:4px}
.bol{max-width:82%;padding:9px 13px;border-radius:12px;font-size:14px;margin-bottom:7px;line-height:1.45}
.bol small{display:block;font:10.5px var(--b-mono);color:var(--b-ink3);margin-top:3px}
.bol.cli{background:var(--b-peca);border-bottom-left-radius:3px}
.bol.nos{background:#22354a;border-bottom-right-radius:3px;margin-left:auto}
.bol.sys{background:none;border:1px dashed var(--b-line);font-size:12.5px;color:var(--b-ink3);align-self:center}
.bol .pix{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}.bol .pix code{font-size:11.5px;background:var(--b-soft,rgba(0,0,0,.05));padding:2px 6px;border-radius:4px;word-break:break-all}
.rasc{background:var(--b-peca);border:1px solid var(--b-line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.rasc .c{padding:7px 13px;background:#2c2318;color:var(--b-co);font:600 9.5px/1.6 var(--b-mono);letter-spacing:.13em;text-transform:uppercase}
.rasc textarea{border:0;border-radius:0;background:none;min-height:56px}
.rasc button{margin:0 10px 10px}
/* sources: each fails alone, and a silent one is named */
.src{border:1px solid var(--b-line);border-radius:10px;padding:10px 13px;background:var(--b-mesa)}
.src h4{font:600 9.5px var(--b-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--b-ink3);margin-bottom:6px}
.src.mute{border-style:dashed;background:none}
.src.mute p{margin:0;color:var(--b-al);font-weight:600}
.src.mute small{color:var(--b-ink3);font:11px var(--b-mono)}
/* paper */
.papel{background:#f4efe6;color:#231c14;border-radius:4px;padding:16px 18px;max-width:360px;font:13px var(--b-mono);box-shadow:0 8px 24px #0006;margin-bottom:12px}
.papel .pt{font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.papel .ps{text-align:center;margin-bottom:10px;color:#6b5d4a}
.papel .pl{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted #c9bfae;padding:3px 0}
.papel .pl.t-accent{font-weight:700}
.papel .pf{text-align:center;color:#6b5d4a;font-size:11.5px;margin-top:6px}
.papel .print{display:inline-block;margin-top:10px;color:#231c14;border-color:#c9bfae}
/* actions */
.acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
.acoes button,.acoes summary,.btn{border:1px solid var(--b-line);background:var(--b-peca);border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:all var(--b-t) ease;list-style:none;cursor:pointer;text-decoration:none;display:inline-block}
.acoes summary::-webkit-details-marker{display:none}
.p1,.acoes .p1{background:var(--b-co);border-color:var(--b-co);color:#291a02}
.p1[disabled]{opacity:.35;cursor:not-allowed}
.sec{color:var(--b-ink2);background:var(--b-peca);border:1px solid var(--b-line);border-radius:9px;padding:7px 12px}
.perigo{color:var(--b-al)!important}
.req{position:relative}
.req[open]>summary{border-color:var(--cor)}
.req form{position:absolute;z-index:4;top:calc(100% + 6px);left:0;width:320px;background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:9px;box-shadow:0 12px 30px #0008}
.req label{display:flex;flex-direction:column;gap:4px}
.req .check{flex-direction:row;gap:6px;align-items:center;font-size:12.5px;color:var(--b-ink2)}
.dim-hint{font-size:12px;color:var(--b-ink3)}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{background:var(--b-mesa);border:1px solid var(--b-line);border-left:3px solid var(--b-at);border-radius:0 10px 10px 0;padding:10px 14px;font-size:13.5px;box-shadow:0 8px 24px #0008;animation:aparece .3s ease}

/* board */
.quadro{padding:18px}
.gente{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pessoa{background:var(--b-peca);border:1px solid var(--b-line);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;font-size:13px}
.pessoa span{color:var(--b-ink3);font-size:12px}
.pessoa.av-available{border-left:3px solid var(--b-ca)} .pessoa.av-busy{border-left:3px solid var(--b-co)} .pessoa.av-away{border-left:3px solid var(--b-ink4);opacity:.7}
.raias{display:grid;grid-template-columns:repeat(7,minmax(210px,1fr));gap:10px;overflow-x:auto}
.raia{display:flex;flex-direction:column;gap:7px;min-width:0}
.raia h3{font:600 12px var(--b-mono);color:var(--b-ink2);display:flex;justify-content:space-between;padding:4px 2px;border-bottom:1px solid var(--b-line);margin-bottom:4px}
.raia-unowned h3{color:var(--b-al)}
/* queues */
.filas{padding:18px;display:flex;flex-direction:column;gap:16px;max-width:1200px}
.fila{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;padding:14px 16px}
.fila header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.fila header h2{font:600 19px var(--b-dsp)}
.fila header form{margin-left:auto}
.membros{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.membros .pessoa{flex-direction:row;gap:6px;padding:4px 10px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:9px}
/* workflows */
.wfs{padding:18px;max-width:1200px}
.wf-h{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;align-items:flex-start}
.wf-h h2{font:600 24px var(--b-dsp)}
.wf{background:var(--b-peca);border:1px solid var(--b-line);border-left:3px solid var(--cor);border-radius:0 10px 10px 0;padding:12px 14px;text-decoration:none;display:block}
.wf .l1{display:flex;gap:8px;align-items:baseline} .wf .l1 .tec{margin-left:auto}
.wf .qm{font-size:12px;color:var(--b-ink3)}
.editor{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;padding:18px;min-height:calc(100vh - var(--top-h) - var(--status-h))}
.ed{display:flex;flex-direction:column;gap:10px}
.ed header{display:flex;gap:10px;align-items:center}
.ed header h2{font:600 20px var(--b-dsp);margin-right:auto}
.yaml{flex:1;min-height:70vh;font:13px/1.5 var(--b-mono);white-space:pre;tab-size:2}
.ed-side{display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:calc(100vh - 90px)}
.ed-side details{margin-bottom:8px;font-size:13px}
.mapa{padding-left:18px;font-size:13px}
.mapa li{margin-bottom:8px}
.seta{color:var(--b-ink2);font-size:12px}
@media (max-width:1000px){.editor{grid-template-columns:1fr}}
/* login & inbox */
body.login{display:grid;place-items:center;min-height:100vh}
.login form{width:360px;padding:22px;display:flex;flex-direction:column;gap:12px}
.login h1{font:600 22px var(--b-dsp);margin-bottom:6px} .login h1 i{font-style:normal;color:var(--b-co)}
.login label{display:flex;flex-direction:column;gap:5px}
.demo{margin:0;padding-left:18px;font-size:12.5px;color:var(--b-ink2)}
.inbox{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.inbox>section:first-child{grid-row:span 2}
.ed-min{display:flex;flex-direction:column;gap:10px}
.ed-min label{display:flex;flex-direction:column;gap:5px}
/* photos (the OS proof) */
.gal{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.gal .ph{width:96px;height:96px;border-radius:6px;overflow:hidden;background:var(--b-sunk,#0003);display:grid;place-items:center;border:1px solid var(--b-line,#fff2)}
.gal .ph img{width:100%;height:100%;object-fit:cover}
.gal .add label{cursor:pointer;display:grid;place-items:center;width:100%;height:100%;color:var(--b-dim,#aaa)}
.gal .add input[type=file]{display:none}

/* the stage's desk: open-task tabs above the stage */
.mesa{min-width:0;display:flex;flex-direction:column}
.abertas{display:flex;gap:4px;padding:8px 18px 0;overflow-x:auto;border-bottom:1px solid var(--b-line);min-height:8px}
.abertas:empty{display:none}
.abertas .ab{display:flex;align-items:center;gap:6px;max-width:220px;padding:5px 6px 5px 10px;border:1px solid var(--b-line);border-bottom:none;border-radius:9px 9px 0 0;background:var(--b-mesa);font-size:12.5px;color:var(--b-ink2);cursor:pointer;white-space:nowrap}
.abertas .ab::before{content:"";width:6px;height:6px;border-radius:9px;background:var(--cor);flex:none}
.abertas .ab span{overflow:hidden;text-overflow:ellipsis}
.abertas .ab.on{background:var(--b-peca);color:var(--b-ink)}
.abertas .ab.done{opacity:.55}
.abertas .ab button{border:none;background:none;color:var(--b-ink3);padding:0 4px;border-radius:5px}
.abertas .ab button:hover{background:var(--b-peca2);color:var(--b-ink)}
.abertas .dica{margin-left:auto;align-self:center;font:11px var(--b-mono);color:var(--b-ink4);white-space:nowrap}

/* queues in the rail */
.filinhas{display:flex;flex-direction:column;gap:5px}
.filinha{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:center;padding:7px 9px;border:1px solid var(--b-line);border-radius:10px;background:var(--b-mesa)}
.filinha a{text-decoration:none;font-size:13px}
.filinha .n{grid-column:1;font:11px var(--b-mono);color:var(--b-co)}
.filinha.vazia .n{color:var(--b-ink3)}
.filinha .qm{grid-column:1;font-size:12px;color:var(--b-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filinha button{grid-column:2;grid-row:1/span 3;padding:5px 10px;font-size:12.5px}
.filinha button[disabled]{opacity:.35;cursor:not-allowed}

/* metas */
.metas,.agenda,.agentes{padding:20px 26px 60px;max-width:1280px}
.metas-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.metas-cab h2{font:600 22px var(--b-dsp)}
.metas-cab a.sec{text-decoration:none;padding:4px 10px}
.metas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:18px}
.meta-p{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.meta-p.eu{border-color:var(--b-co)}
.meta-p.off{opacity:.55}
.meta-p header{display:flex;align-items:baseline;gap:8px}
.meta-p header b{font:600 16px var(--b-dsp)}
.meta-p .score{margin-left:auto;font:600 18px var(--b-mono);color:var(--b-co)}
.meta-l{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.meta-l .mv{font-family:var(--b-mono);color:var(--b-ink2)}
.meta-l .mv b{color:var(--b-ink)}
.meta-l .mb{grid-column:1/-1;height:6px;border-radius:9px;background:var(--b-peca2);display:flex;overflow:hidden}
.meta-l .mb i{display:block;height:100%;background:var(--b-at);border-radius:9px 0 0 9px}
.meta-l.hit .mb i{background:var(--b-ca)}
.meta-l .mb u{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--b-ca) 0 3px,transparent 3px 5px)}
.meta-l.livre .mb{opacity:.4}
.meta-p .rel summary{cursor:pointer;font-size:12px;color:var(--b-ink3)}
.meta-p .rel pre{white-space:pre-wrap;font:12.5px/1.5 var(--b-mono);background:var(--b-bg);padding:10px;border-radius:8px;margin:8px 0}
.semana{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:8px 0 22px}
.semana figure{margin:0;background:var(--b-mesa);border:1px solid var(--b-line);border-radius:10px;padding:10px 12px}
.semana figcaption{font-size:12.5px;color:var(--b-ink2);margin-bottom:6px}
.semana svg{width:100%;height:60px;display:block}
.semana rect{fill:var(--b-at)}
.semana rect:last-of-type{fill:var(--b-co)}
.semana line{stroke:var(--b-line)}
.semana .dias{display:flex;justify-content:space-around;font:10px var(--b-mono);color:var(--b-ink4)}
h3.rot{margin:6px 0 10px}

/* tables: agenda, agent runs */
.tabela{overflow-x:auto;border:1px solid var(--b-line);border-radius:12px;background:var(--b-mesa)}
.tabela table{border-collapse:collapse;width:100%;font-size:13px}
.tabela th{text-align:left;font:600 10px var(--b-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--b-ink3);padding:10px 12px;border-bottom:1px solid var(--b-line)}
.tabela td{padding:9px 12px;border-bottom:1px solid var(--b-line);vertical-align:top}
.tabela tr:last-child td{border-bottom:none}
.tabela tr.off td{opacity:.5}
.tabela td.resumo{max-width:360px}
.tabela .passos{margin:6px 0 0;padding-left:18px;font-size:12px}
.pill{display:inline-block;font:600 11px var(--b-mono);padding:2px 8px;border-radius:99px;border:1px solid currentColor}
.pairs{display:flex;flex-direction:column;gap:3px;font-size:13px}
.pairs div{display:flex;justify-content:space-between;color:var(--b-ink2)}
.pairs div span:last-child{color:var(--b-ink);font-family:var(--b-mono)}
.novo-agenda{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;align-items:end;background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;padding:14px 16px}
.novo-agenda h3{grid-column:1/-1;font:600 16px var(--b-dsp)}
.novo-agenda label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--b-ink3)}
.novo-agenda label.wide{grid-column:1/-1}
.novo-agenda input,.novo-agenda select{background:var(--b-bg);border:1px solid var(--b-line);border-radius:8px;padding:7px 9px;color:var(--b-ink)}
@media (max-width:760px){.sala{grid-template-columns:1fr}.rail{border-right:none;border-bottom:1px solid var(--b-line)}.tabs{overflow-x:auto}}

/* /financeiro: filters, upload, DRE rows */
.financeiro .fin-tabs{margin:10px 0 16px;border-bottom:1px solid var(--b-line);padding-bottom:8px}
.filtros{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.filtros label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--b-ink3)}
.filtros input,.filtros select{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:8px;padding:7px 9px;color:var(--b-ink)}
.upload{display:flex;align-items:center;gap:10px;margin:10px 0;padding:12px 14px;background:var(--b-mesa);border:1px dashed var(--b-line);border-radius:12px}
.tabela tr.strong td{font-weight:700;border-top:1px solid var(--b-line)}
.tabela tr.sub td{color:var(--b-ink3);font-size:12px}
.tabela tr.t-bad td{background:color-mix(in srgb, var(--b-al) 8%, transparent)}

/* integrações */
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:18px}
.int-card header{flex-wrap:wrap}
.int-desc{font-size:13px;margin:0}
.int-conn{border-top:1px solid var(--b-line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.int-conn-head{display:flex;flex-direction:column;gap:2px}
.int-buttons{display:flex;gap:6px}
.int-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.int-form fieldset{border:1px solid var(--b-line);border-radius:10px;padding:10px 12px}
.int-form legend{font:600 10px var(--b-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--b-ink3);padding:0 6px}
.int-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.int-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--b-ink3)}
.int-form label.wide{grid-column:1/-1}
.int-form input,.int-form select,.int-form textarea{background:var(--b-bg);border:1px solid var(--b-line);border-radius:8px;padding:6px 8px;color:var(--b-ink);font:13px var(--b-txt)}
.int-form textarea{font-family:var(--b-mono)}
.int-form small{color:var(--b-ink4)}
details summary{cursor:pointer;color:var(--b-ink2);font-size:13px}
.ferramentas .tool{display:flex;gap:6px;align-items:baseline;font-size:13px;margin:3px 0}
/* simulações */
.sim-items{display:flex;flex-direction:column;gap:6px}
.sim-item{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:10px;padding:8px 12px}
.sim-item summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sim-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.sim-cols h4{font:600 13px var(--b-txt);margin-bottom:6px}
.sim-talk{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;max-height:420px;overflow:auto}
.sim-talk li{padding:5px 8px;border-radius:8px;background:var(--b-peca)}
.sim-talk li.cliente{background:var(--b-peca2)}
.sim-talk li.agente,.sim-talk li.atendimento{border-left:3px solid var(--b-at)}
.sim-talk li.sistema{opacity:.6;font-size:12px}
@media (max-width:760px){.sim-cols{grid-template-columns:1fr}}
.int-conn-head .pill{align-self:flex-start}
.bol audio{display:block;width:100%;max-width:280px;height:32px;margin-bottom:4px}
.bol img.midia{display:block;max-width:220px;max-height:220px;border-radius:8px;margin-bottom:4px}

/* ---- Clientes · a rede da casa ------------------------------------------ */
.casa-q{display:flex;gap:8px;margin:12px 0 16px}
.casa-q input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--b-line);background:var(--b-peca);color:var(--b-ink);font-size:15px}
.casa-lista{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.casa-lista a{display:block;padding:10px 12px;border:1px solid var(--b-line);border-radius:10px;background:var(--b-peca);color:var(--b-ink);text-decoration:none}
.casa-lista a:hover{border-color:var(--b-co)}
.casa-contrato{border:1px solid var(--b-line);border-radius:14px;background:var(--b-peca);padding:12px 14px;margin:0 0 16px}
.casa-contrato>header{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pill.ok{color:#34d399}.pill.bad{color:#f87171}.pill.muted{color:var(--b-ink3)}
.casa-veredito{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0 8px;font-size:14px}
.casa-wrap{overflow-x:auto}
.casa-svg{width:100%;min-width:820px;height:auto;display:block}
.casa-loading .casa-svg{min-width:0;height:40px}
.casa-loading{display:grid;gap:4px;padding:8px 0}

.casa-svg .edge{fill:none;stroke-width:3;stroke:#3b4b5e}
.casa-svg .edge.flow{stroke:#2f6f5a}
.casa-svg .edge.block{stroke:#7a3b3b}
.casa-svg .edge.idle{stroke:#2a3441;stroke-dasharray:6 6}
.casa-svg .edge.fiber.flow,.casa-svg .edge.fiber.block{stroke-width:4;filter:url(#glow)}
.casa-svg .edge.fiber.rx-good{stroke:#fbbf24}.casa-svg .edge.fiber.rx-warn{stroke:#fb923c}.casa-svg .edge.fiber.rx-poor{stroke:#f87171}
.casa-svg .edge.fiber.idle{stroke:#2a3441}
.casa-svg .edge.dev{stroke-width:2}
.casa-svg .edge.dev.air{stroke-dasharray:2 5}
.casa-svg .pkt{fill:#4ade80;filter:url(#glow);r:4px}
.casa-svg .pkt.block{fill:#f87171}
.casa-svg .node rect{fill:#141b24;stroke-width:2}
.casa-svg .node.ok rect{stroke:#2f9e76}
.casa-svg .node.bad rect{stroke:#ef4444}
.casa-svg .node.unk rect{stroke:#56657a;stroke-dasharray:5 4}
.casa-svg .node.dark{opacity:.45}
.casa-svg .node .t{fill:#e6edf5;font:600 15px system-ui,sans-serif}
.casa-svg .node .l,.casa-svg .l{fill:#9fb0c3;font:12px ui-monospace,monospace}
.casa-svg .icon{font-size:20px}
.casa-svg .node .dot{fill:#56657a}
.casa-svg .node.ok .dot{fill:#34d399}
.casa-svg .node.bad .dot{fill:#ef4444}
.casa-svg .node.pulse rect{animation:casa-pulse 1.4s ease-in-out infinite}
@keyframes casa-pulse{0%,100%{stroke-opacity:1}50%{stroke-opacity:.25}}
.casa-svg .gate rect{stroke-width:2}
.casa-svg .gate text{font:600 11px ui-monospace,monospace;fill:#e6edf5}
.casa-svg .gate.open rect{fill:#10362a;stroke:#34d399}
.casa-svg .gate.shut rect{fill:#3a1414;stroke:#ef4444;animation:casa-pulse 1.4s ease-in-out infinite}
.casa-svg .gate.unk rect{fill:#1b2430;stroke:#56657a}
.casa-svg .dev circle{fill:#141b24;stroke:#2f9e76;stroke-width:2}
.casa-svg .dev.dark{opacity:.35}
.casa-svg .dev .name{font-size:11px}
.casa-detalhes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px}
.casa-detalhes section{border:1px solid var(--b-line);border-radius:10px;padding:10px 12px}
.casa-detalhes h4{margin:0 0 6px;font-size:13px;color:var(--b-ink2)}
.casa-detalhes dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:13px}
.casa-detalhes dt{color:var(--b-ink3)}
.casa-detalhes dd{margin:0}
.rx-good{color:#34d399}.rx-warn{color:#fbbf24}.rx-poor{color:#f87171}

/* platform: switcher, equipe, automações, quadro tabs + acervo */
.trocar select{background:var(--b-mesa);color:var(--b-ink);border:1px solid var(--b-line);border-radius:8px;padding:4px 8px;font-size:12px}
.equipe,.automacoes{padding:18px;display:flex;flex-direction:column;gap:20px}
.equipe section,.automacoes section{border:1px solid var(--b-line);border-radius:12px;padding:14px 16px;background:var(--b-mesa)}
.equipe h2,.automacoes h2{margin:0 0 10px;font:600 15px var(--b-dsp)}
.equipe h3,.automacoes h3{margin:14px 0 6px;font-size:13px;color:var(--b-ink2)}
.equipe form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.equipe input,.equipe select,.automacoes input,.automacoes select{background:var(--b-bg);color:var(--b-ink);border:1px solid var(--b-line);border-radius:8px;padding:5px 8px;font-size:13px}
.equipe .fila-membros,.equipe .pessoa-empresas{margin-bottom:10px}
.equipe .fila-membros button,.equipe .pessoa-empresas b{margin-right:4px}
.equipe button.on{border-color:var(--b-ca);color:var(--b-ca)}
.equipe .modulos label{margin-right:14px;font-size:13px}
.link-senha{border:1px dashed var(--b-at);border-radius:8px;padding:8px 12px;font-size:13px}
.automacoes button.on{border-color:var(--b-ca);color:var(--b-ca)}
.automacoes td.t-good{color:var(--b-ca)}
.quadro .contadores{font:600 12px var(--b-mono);color:var(--b-ink2);margin-bottom:8px}
.quadro .subtabs{display:flex;gap:6px;margin-bottom:14px}
.quadro .subtabs a{text-decoration:none;font-size:13px;color:var(--b-ink2);padding:5px 10px;border-radius:8px;border:1px solid var(--b-line)}
.quadro .subtabs a.on{background:var(--b-peca);color:var(--b-ink)}
.acervo p{margin:0 0 8px;font-size:13px;color:var(--b-ink2)}
.acervo ul.top{margin:8px 0 0;padding-left:18px;font-size:13px}

/* a caixinha: the command palette's card (the palette itself is in the shell block) */
.cx{background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px}
.cx-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cx-chip{background:none;border:1px solid var(--b-line);border-radius:99px;padding:3px 11px;font-size:12px;color:var(--b-ink3);cursor:pointer}
.cx-chip:hover{color:var(--b-ink)}
.cx-chip.on{color:var(--b-bg);background:var(--b-co);border-color:var(--b-co)}
.cx.ghost .cx-chip.on{background:none;color:var(--b-co);border-style:dashed}
.cx-chip.pair{border-color:var(--b-co);color:var(--b-ink)}
.cx-engine{margin-left:auto;font:11px var(--b-mono);color:var(--b-ink4)}
.cx-card{background:var(--b-peca);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;border-left:3px solid var(--b-co)}
.cx-card.lembrete{border-left-color:var(--b-cp)}.cx-card.pedido{border-left-color:var(--b-ve)}.cx-card.tarefa{border-left-color:var(--b-at)}.cx-card.agente{border-left-color:var(--b-ca)}.cx-card.buscar{border-left-color:var(--b-ink3)}
.cx.ghost .cx-card{opacity:.72}
.cx-title{font:600 15px/1.3 var(--b-dsp);color:var(--b-ink)}
.cx-lines{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0;font-size:13px}
.cx-lines dt{color:var(--b-ink3)}.cx-lines dd{margin:0;color:var(--b-ink)}
.cx-picks{display:flex;flex-wrap:wrap;gap:6px}
.cx-pick{background:var(--b-peca2);border:1px solid transparent;border-radius:8px;padding:4px 10px;font-size:12px;color:var(--b-ink2);cursor:pointer}
.cx-pick.on{border-color:var(--b-at);color:var(--b-ink)}
.cx-hits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cx-hits a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--b-ink);padding:5px 6px;border-radius:6px;font-size:13px}
.cx-hits a:hover{background:var(--b-peca2)}
.cx-hits i{font:normal 10.5px var(--b-mono);color:var(--b-ink3);width:48px}
.cx-hits span{color:var(--b-ink3);font-size:12px}
.cx-problem{margin:0;color:var(--b-co);font-size:13px}
.refused .cx-problem{color:var(--b-al)}
.cx-go{display:flex;align-items:center;gap:12px}
.cx-go button{background:var(--b-co);color:var(--b-bg);border:0;border-radius:8px;padding:7px 14px;font:600 13px var(--b-txt);cursor:pointer}
.cx-go button[disabled]{opacity:.35;cursor:not-allowed}
.cx-go span{font-size:11.5px;color:var(--b-ink4)}
.cx-reminders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.cx-reminders li{display:flex;gap:10px;align-items:center}
.cx-reminders b{font:600 12px var(--b-mono);color:var(--b-cp);min-width:150px}
.cx-x{margin-left:auto;background:none;border:0;color:var(--b-ink3);font-size:16px;cursor:pointer}
.cx-examples{list-style:none;margin:0;padding:2px 4px;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--b-ink2)}
.cx-examples i{display:inline-block;width:70px;font:normal 11px var(--b-mono);color:var(--b-ink4)}
.done .cx-card{border-left-color:var(--b-ca)}
.cx-open{font-size:12.5px;color:var(--b-at)}

/* ===== the shell: top bar, sidebar by cargo, status bar, drawer, palette ===== */
:root{--top-h:50px;--status-h:26px;--side-w:212px}
body.app{padding-bottom:var(--status-h)}
.app-top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--b-bg);border-bottom:1px solid var(--b-line)}
.app-top .logo{font:600 16px var(--b-dsp);color:var(--b-ink);text-decoration:none;white-space:nowrap}
.app-top .logo i{font-style:normal;color:var(--b-co)}
.app-top .prov{font-size:13px;color:var(--b-ink2);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.app-top .prov select{background:var(--b-mesa);color:var(--b-ink);border:1px solid var(--b-line);border-radius:8px;padding:5px 8px;font-size:13px;max-width:220px}
.modo{font:600 10px var(--b-mono);letter-spacing:.06em;color:var(--b-co);border:1px solid #6b4d1e;border-radius:4px;padding:2px 6px}
.app-top .cmd{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:var(--b-mesa);border:1px solid var(--b-line);border-radius:10px;padding:7px 12px;color:var(--b-ink3);font-size:14px;cursor:text;text-align:left}
.app-top .cmd:hover{border-color:var(--b-ink4)}
.app-top .cmd .cmd-ph{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-top .cmd kbd{margin:0}
.app-top .spacer,.app-status .spacer{flex:1}
.app-top .avail{margin-left:0}
.ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:none;border:1px solid transparent;color:var(--b-ink2);position:relative;cursor:pointer;font-size:15px;flex:none}
.ic:hover{border-color:var(--b-line);color:var(--b-ink)}
.ic .badge{position:absolute;top:-3px;right:-4px;background:var(--b-al);color:#1a0f0c;font:700 10px var(--b-mono);border-radius:99px;padding:1px 5px;min-width:16px;text-align:center}
.ic.menu{display:none}
.me{position:relative}
.me summary{list-style:none;cursor:pointer}
.me summary::-webkit-details-marker{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--b-peca2);display:grid;place-items:center;font:600 12px var(--b-txt);color:var(--b-ink)}
.me-menu{position:absolute;right:0;top:calc(100% + 8px);width:230px;background:var(--b-mesa);border:1px solid var(--b-line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column;z-index:30}
.me-menu .me-name{padding:8px 10px 10px;border-bottom:1px solid var(--b-line);margin-bottom:4px;display:flex;flex-direction:column}
.me-menu .me-name span{font-size:12px;color:var(--b-ink3)}
.me-menu a,.me-menu button{display:flex;justify-content:space-between;width:100%;text-align:left;padding:7px 10px;border-radius:8px;background:none;border:0;color:var(--b-ink2);font-size:13.5px;text-decoration:none;cursor:pointer}
.me-menu a:hover,.me-menu button:hover{background:var(--b-peca);color:var(--b-ink)}
.me-menu form{margin:0}
.app-body{display:flex;align-items:flex-start}
.app-side{position:sticky;top:var(--top-h);width:var(--side-w);height:calc(100vh - var(--top-h) - var(--status-h));overflow-y:auto;border-right:1px solid var(--b-line);padding:12px 8px 10px;display:flex;flex-direction:column;gap:12px;flex:none;background:var(--b-bg)}
body.side-off .app-side{display:none}
.app-side .grp{display:flex;flex-direction:column;gap:1px}
.app-side .gl{font:600 10px var(--b-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--b-ink4);padding:0 8px 4px}
.app-side .nav{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;color:var(--b-ink2);font-size:13.5px;text-decoration:none}
.app-side .nav .nl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-side .nav:hover{background:var(--b-mesa);color:var(--b-ink)}
.app-side .nav.on{background:var(--b-peca);color:var(--b-ink)}
.app-side .nav .n{font:11px var(--b-mono);color:var(--b-ink3)}
.app-side .nav .n:empty{display:none}
.app-side .nav .n.hot{color:var(--b-co)}
.app-side .nav .chord{display:none;margin:0}
.app-side .nav:hover .chord,body.chording .app-side .nav .chord{display:inline-block}
body.chording .app-side .nav .n{display:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:8px 8px 0;border-top:1px solid var(--b-line)}
.side-foot .fita{max-width:none;flex:none}
.linkish{background:none;border:0;color:var(--b-ink3);font-size:12px;text-align:left;padding:0;cursor:pointer}
.linkish:hover{color:var(--b-ink)}
.app-main{flex:1;min-width:0}
.app-status{position:fixed;left:0;right:0;bottom:0;height:var(--status-h);z-index:20;display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--b-bg);border-top:1px solid var(--b-line);font:11.5px var(--b-mono);color:var(--b-ink3)}
.app-status kbd{margin:0 2px 0 0}
.live{display:flex;align-items:center;gap:6px}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--b-ink4)}
.live[data-state="on"] .dot{background:var(--b-ca)}
.live[data-state="on"]{color:var(--b-ca)}
.live[data-state="off"] .dot{background:var(--b-al)}
.live[data-state="off"]{color:var(--b-al)}
/* the notice drawer */
.drawer[hidden],.app-side[hidden]{display:none}
.drawer{position:fixed;right:0;top:var(--top-h);bottom:var(--status-h);width:min(400px,100vw);z-index:25;background:var(--b-mesa);border-left:1px solid var(--b-line);box-shadow:-20px 0 50px rgba(0,0,0,.45);display:flex;flex-direction:column}
.dr-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--b-line)}
.dr-head b{flex:1;font:600 15px var(--b-dsp)}
.dr-filter{display:flex;gap:4px;padding:8px 12px;flex-wrap:wrap;border-bottom:1px solid var(--b-line)}
.dr-filter button{background:none;border:1px solid var(--b-line);border-radius:99px;padding:2px 10px;font-size:12px;color:var(--b-ink3);cursor:pointer}
.dr-filter button.on{background:var(--b-peca2);color:var(--b-ink);border-color:var(--b-ink4)}
.dr-list{flex:1;overflow-y:auto;padding:6px 8px 12px}
.dr-empty{color:var(--b-ink3);font-size:13px;padding:18px 10px}
.dr-item{display:grid;grid-template-columns:4px 1fr auto;gap:10px;align-items:center;padding:8px 6px;border-bottom:1px solid #2e2822}
.dr-item .sev{width:4px;align-self:stretch;border-radius:2px;background:var(--b-ink4)}
.dr-item.sev-crit .sev{background:var(--b-al)}.dr-item.sev-warn .sev{background:var(--b-co)}.dr-item.sev-info .sev{background:var(--b-at)}.dr-item.sev-ok .sev{background:var(--b-ca)}
.dr-t{display:flex;flex-direction:column;min-width:0;font-size:13.5px}
.dr-t a,.dr-t span{color:var(--b-ink2);text-decoration:none}
.dr-item.unread .dr-t a,.dr-item.unread .dr-t span{color:var(--b-ink);font-weight:600}
.dr-t small{color:var(--b-ink3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-read{background:none;border:1px solid var(--b-line);border-radius:6px;color:var(--b-ink3);width:26px;height:26px;cursor:pointer}
.dr-read:hover{color:var(--b-ca);border-color:var(--b-ca)}
/* the command palette (the caixinha, and "ir para…") */
.palette{position:fixed;inset:0;z-index:40;background:rgba(10,8,6,.55);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.palette[hidden]{display:none}
.pal-form{width:min(680px,100%);background:var(--b-mesa);border:1px solid var(--b-line);border-radius:14px;box-shadow:0 30px 70px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column;max-height:78vh}
.pal-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--b-line)}
.pal-in .pal-ic{color:var(--b-ink3);font-size:16px}
.pal-in input{flex:1;background:none;border:0;outline:none;color:var(--b-ink);font:16px var(--b-txt)}
.pal-in kbd{margin:0}
.pal-nav:empty{display:none}
.pal-nav{padding:6px 8px;border-bottom:1px solid var(--b-line);display:flex;flex-direction:column;gap:1px}
.pal-nav .pn-h{font:600 10px var(--b-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--b-ink4);padding:4px 8px}
.pal-nav a{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:7px;color:var(--b-ink2);text-decoration:none;font-size:14px}
.pal-nav a small{font:11px var(--b-mono);color:var(--b-ink4)}
.pal-nav a.sel,.pal-nav a:hover{background:var(--b-peca);color:var(--b-ink)}
.palette .cx-out{position:static;width:auto;overflow-y:auto}
.palette .cx{border:0;border-radius:0;box-shadow:none;background:none}
/* shortcut help */
.help{position:fixed;inset:0;z-index:45;background:rgba(10,8,6,.55);display:grid;place-items:center;padding:16px}
.help[hidden]{display:none}
.help-box{width:min(620px,100%);background:var(--b-mesa);border:1px solid var(--b-line);border-radius:14px;overflow:hidden}
.help-box table{width:100%;border-collapse:collapse;font-size:13.5px}
.help-box td{padding:7px 14px;border-top:1px solid #2e2822;color:var(--b-ink2)}
.help-box td:first-child{white-space:nowrap;width:1%}
.help-box kbd{margin:0}
/* toasts sit above the status bar */
#toasts{bottom:calc(var(--status-h) + 12px)}
@media (max-width:900px){
  .ic.menu{display:grid}
  .app-side{position:fixed;left:0;top:var(--top-h);z-index:26;display:none;box-shadow:20px 0 50px rgba(0,0,0,.45)}
  body.side-on .app-side{display:flex}
  body.side-off .app-side{display:none}
  .app-top .avail,.app-top .prov,.modo{display:none}
  .app-top .cmd .cmd-ph{display:none}
  .app-top .cmd{flex:0 0 auto}
  .app-top .spacer{display:block}
  .app-status .hint{display:none}
  .sala{grid-template-columns:1fr}
}
/* the sidebar's narrow rail: two letters per item, the name on hover */
.app-top .ic.menu{display:grid}
.app-side .nav .ico{display:none}
.side-collapse{margin-top:auto;background:none;border:1px solid var(--b-line);border-radius:7px;color:var(--b-ink3);font:12px var(--b-mono);padding:5px 8px;cursor:pointer;text-align:left}
.side-collapse:hover{color:var(--b-ink);border-color:var(--b-ink3)}
.side-collapse .when-mini{display:none}
body.side-mini{--side-w:56px}
body.side-mini .app-side{padding:10px 6px;gap:8px}
body.side-mini .app-side .gl{height:1px;padding:0;margin:4px 6px;overflow:hidden;background:var(--b-line);color:transparent}
body.side-mini .app-side .nav{justify-content:center;padding:6px 0;position:relative}
body.side-mini .app-side .nav .nl,body.side-mini .app-side .nav .chord,body.side-mini .side-foot{display:none}
body.side-mini .app-side .nav .ico{display:grid;place-items:center;width:32px;height:26px;border-radius:6px;font:600 11.5px var(--b-mono);color:var(--b-ink2);text-transform:uppercase}
body.side-mini .app-side .nav.on .ico{background:var(--b-peca);color:var(--b-ink)}
body.side-mini .app-side .nav .n{position:absolute;top:1px;right:2px;font-size:9px}
body.side-mini .side-collapse{text-align:center;padding:5px 0}
body.side-mini .side-collapse .when-open{display:none}
body.side-mini .side-collapse .when-mini{display:inline}
@media (max-width:900px){body.side-mini{--side-w:212px}body.side-mini .app-side .nav .nl{display:block}body.side-mini .app-side .nav .ico{display:none}}