/* Fontes da marca AG7 (Space Grotesk + Space Mono), servidas daqui — sem CDN. */
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(spacegrotesk-300-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(spacegrotesk-300-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(spacemono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(spacemono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(spacemono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(spacemono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* CROQUI — identidade AG7: preto · creme · prata. Tudo em caixa alta, sem emojis. */
:root{
  --preto:#0a0a0a; --creme:#f7f7f5; --prata:#c8c8c8;
  --prata-grad:linear-gradient(135deg,#e8e8e8 0%,#b0b0b0 30%,#d8d8d8 50%,#909090 70%,#c0c0c0 100%);
  --fonte:'Space Grotesk',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --fundo:#0a0a0a; --painel:#111111; --painel2:#171717;
  --linha:rgba(255,255,255,.10); --linha-forte:rgba(255,255,255,.22);
  --texto:#f2f2f0; --fraco:#8c8c8c;
  --marca:#c8c8c8; --marca-fraca:rgba(255,255,255,.07); --sobre-marca:#0a0a0a; --botao-marca:var(--prata-grad);
  --ok:#7fd49b; --atencao:#e5c07b; --erro:#ef8a8a; --campo:#0d0d0d;
  --sombra:0 12px 32px rgba(0,0,0,.45); --raio:10px; --raio-p:6px; --suave:cubic-bezier(.4,0,.2,1);
  color-scheme:dark;
}
html[data-tema=claro]{
  --fundo:#f7f7f5; --painel:#ffffff; --painel2:#efefec;
  --linha:rgba(10,10,10,.10); --linha-forte:rgba(10,10,10,.22);
  --texto:#0a0a0a; --fraco:#6e6e6e; --marca:#0a0a0a; --marca-fraca:rgba(10,10,10,.06); --sobre-marca:#ffffff; --botao-marca:#0a0a0a;
  --ok:#1f7a45; --atencao:#9a6512; --erro:#b42318; --campo:#ffffff;
  --sombra:0 10px 28px rgba(10,10,10,.12); color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--texto);font:14px/1.35 var(--fonte);overflow:hidden;overscroll-behavior:none;text-transform:uppercase;letter-spacing:.02em}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit;color:inherit;text-transform:uppercase}
::placeholder{text-transform:uppercase;color:var(--fraco);opacity:1}
:focus-visible{outline:1.5px solid var(--marca);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{background:transparent;border:1px solid var(--linha-forte);border-radius:var(--raio-p);padding:6px 11px;cursor:pointer;min-height:34px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;transition:background .15s var(--suave),border-color .15s var(--suave)}
button:hover{background:var(--marca-fraca);border-color:var(--marca)}
button.on,button.ativo{background:var(--botao-marca);border-color:transparent;color:var(--sobre-marca)}
button.ibtn{border-color:transparent;padding:0 9px;min-width:36px;display:inline-flex;align-items:center;justify-content:center}
button.ibtn:hover{border-color:var(--linha-forte)}
input,select,textarea{background:var(--campo);border:1px solid var(--linha-forte);border-radius:var(--raio-p);padding:5px 8px;min-height:32px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
input[type=checkbox]{min-height:0;width:15px;height:15px;padding:0;border:0;background:none;accent-color:var(--marca);flex:none}
input[type=range]{padding:0;accent-color:var(--marca)}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em}

#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#formLogin{display:flex;flex-direction:column;gap:12px;width:min(340px,86vw);background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);padding:28px;box-shadow:var(--sombra)}
#formLogin .logo{width:44px;height:44px;border-radius:10px;background:var(--preto);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
#formLogin h1{font-size:30px;letter-spacing:-.03em}
#formLogin .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--fraco)}
#erroLogin{color:var(--erro);margin:0;min-height:1em;font-family:var(--mono);font-size:11px}

#app{position:fixed;inset:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
#topo{display:flex;align-items:center;gap:6px;padding:6px 10px 0;background:var(--painel);border-bottom:1px solid var(--linha)}
#marca{font-weight:700;font-size:17px;letter-spacing:-.03em;padding:0 4px 6px 4px}
#marca small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.18em;color:var(--fraco);margin-left:8px}
#nomeProj{width:170px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;background:transparent;border-color:transparent;margin-bottom:6px}
#nomeProj:focus{border-color:var(--linha-forte);background:var(--campo)}
#abas{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;align-self:flex-end}
.aba{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;white-space:nowrap;cursor:pointer;color:var(--fraco);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;transition:color .15s var(--suave)}
.aba:hover,.aba.on{color:var(--texto)}
.aba.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--prata-grad)}
html[data-tema=claro] .aba.on::after{background:#0a0a0a}
.aba b{font-weight:400;opacity:.5;padding:0 2px}.aba b:hover{opacity:1}
#topo>button,#topo>span{margin-bottom:6px}
#estado{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;margin:0 6px 12px}
#estado.sujo{background:var(--atencao)}#estado.off{background:var(--erro)}
#corpo{flex:1;display:flex;min-height:0}
#ferr{display:flex;flex-direction:column;gap:3px;padding:6px;background:var(--painel);border-right:1px solid var(--linha);overflow-y:auto}
#ferr button{width:66px;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 2px;font-size:8px;letter-spacing:.06em;line-height:1.1;border-color:transparent}
#ferr button svg{width:22px;height:22px}
#ferr button:hover{border-color:var(--linha-forte)}
#palco{position:relative;flex:1;min-width:0;background:var(--fundo)}
#tela{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;cursor:crosshair}
#opcoes{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;max-width:calc(100% - 20px)}
#opcoes:empty{display:none}
#opcoes>*{background:color-mix(in srgb,var(--painel) 92%,transparent);border:1px solid var(--linha);border-radius:var(--raio-p);padding:4px 8px;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;box-shadow:var(--sombra)}
#opcoes label{display:flex;align-items:center;gap:6px}
#opcoes input{width:70px}
#dica{position:absolute;left:10px;bottom:54px;background:color-mix(in srgb,var(--painel) 92%,transparent);border:1px solid var(--linha);padding:5px 10px;border-radius:var(--raio-p);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;pointer-events:none;max-width:72%}
#dica:empty{display:none}
#barra{position:absolute;left:10px;bottom:10px;right:10px;display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--painel) 92%,transparent);border:1px solid var(--linha);padding:4px 8px;border-radius:var(--raio);flex-wrap:wrap;box-shadow:var(--sombra)}
#barra label{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fraco)}
#barra select{min-height:28px;padding:2px 4px}
#barra button{min-height:28px;padding:2px 10px}
#zoomTxt{min-width:46px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
#lateral{width:340px;background:var(--painel);border-left:1px solid var(--linha);display:flex;flex-direction:column;min-height:0}
#abasLat{display:flex;border-bottom:1px solid var(--linha)}
#abasLat button{flex:1;border:none;border-radius:0;font-size:9.5px;letter-spacing:.06em;padding:11px 0;white-space:nowrap;color:var(--fraco);position:relative}
#abasLat button:hover{background:transparent;color:var(--texto)}
#abasLat button.on{background:transparent;color:var(--texto)}
#abasLat button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--prata-grad)}
html[data-tema=claro] #abasLat button.on::after{background:#0a0a0a}
.painel{flex:1;overflow-y:auto;padding:12px;min-height:0}
.painel h3{margin:18px 0 8px;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;color:var(--fraco)}
.painel h3:first-child{margin-top:0}
.linhaF{display:flex;align-items:center;gap:6px;margin:5px 0}
.linhaF>label{flex:0 0 100px;color:var(--fraco);font-family:var(--mono);font-size:10px;letter-spacing:.12em}
.linhaF input,.linhaF select{flex:1;min-width:0}
.linhaF input[type=checkbox]{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
.chips button{padding:3px 8px;min-height:28px;font-size:10.5px}
.painel p{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fraco);line-height:1.5}
.cat{margin:6px 0}
.cat>summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:8px 2px;color:var(--texto)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.card{background:var(--painel2);border:1px solid var(--linha);border-radius:var(--raio-p);padding:6px;text-align:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:border-color .15s var(--suave)}
.card:hover{border-color:var(--marca)}
.card canvas{width:100%;height:56px;display:block;border-radius:3px}
.card .n{font-size:10.5px;margin-top:4px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.card .m{font-family:var(--mono);font-size:9px;color:var(--fraco);margin-top:2px;letter-spacing:.04em}
.painel#pChat{display:flex;flex-direction:column}
#msgs{flex:1;overflow-y:auto}
.msg{margin:7px 0;padding:8px 11px;border-radius:var(--raio);white-space:pre-wrap;max-width:94%;font-size:12.5px;line-height:1.45;letter-spacing:.02em}
.msg.eu{background:var(--marca-fraca);border:1px solid var(--linha-forte);margin-left:auto}
.msg.ag{background:var(--painel2);border:1px solid var(--linha)}
.msg small{display:block;color:var(--ok);margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.12em}
#formChat{display:flex;gap:6px;padding-top:8px}#formChat textarea{flex:1;resize:none}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
#modalCx{background:var(--painel);border:1px solid var(--linha-forte);border-radius:var(--raio);padding:18px;width:min(480px,92vw);max-height:86vh;overflow-y:auto;box-shadow:var(--sombra)}
#modalCx h2{margin:0 0 12px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em}
#modalCx .lista button{display:block;width:100%;text-align:left;margin:4px 0}
#modalCx .acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
#modalCx pre,pre{background:var(--campo);border:1px solid var(--linha);padding:8px;border-radius:var(--raio-p);white-space:pre-wrap;word-break:break-all;user-select:all;text-transform:none;font-family:var(--mono);font-size:11px}
.fantasma{position:fixed;z-index:60;pointer-events:none;background:var(--botao-marca);color:var(--sobre-marca);padding:4px 9px;border-radius:var(--raio-p);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;transform:translate(-50%,-120%)}
.somente #ferr,.somente #bNovaAba,.somente #bUndo,.somente #bRedo,.somente #abasLat [data-p=mob],.somente #abasLat [data-p=chat],.somente #abasLat [data-p=prop],.somente #bProj,.somente #barra label.chk{display:none}
@media (max-width:760px){
  #lateral{position:absolute;right:0;top:0;bottom:0;z-index:20;width:min(340px,92vw);box-shadow:-6px 0 20px rgba(0,0,0,.4)}
  #nomeProj{width:90px}#marca small{display:none}
  #ferr button{width:46px;min-height:46px;font-size:0}
}
#lateral.fechada{display:none}