/* AERO INC — língua do AERO Artist: relevo em papel off-white (ou preto), laranja só como sinal. */
:root {
  --papel: #F6F3EE; --papel2: #EFEBE4; --poco: #ECE8E1;
  --tinta: #1E1C1A; --tinta2: #5E5852; --apagado: #8E877F; --fio: #E3DDD4;
  --acento: #FF6B00; --acento2: #C24F00;
  --sombra: rgba(176,166,153,.55); --luz: #FFFFFF;
  --fundo: rgba(140,126,110,.42); --brilho: rgba(255,255,255,.95); --beira: rgba(140,126,110,.22);
  --xadrez-a: #9a958f; --xadrez-b: #aaa59f;
  --cova: inset 1.5px 1.5px 2px var(--fundo), inset 6px 6px 14px var(--sombra), inset -1.5px -1.5px 2px var(--luz), inset -5px -5px 12px var(--luz);
  --cova-p: inset 1px 1px 1.5px var(--fundo), inset 3px 3px 7px var(--sombra), inset -1px -1px 1.5px var(--luz), inset -3px -3px 7px var(--luz);
  --labio: 1px 1px 1px var(--brilho), -1px -1px 1px var(--beira);
  --sai: 7px 7px 16px var(--sombra), -7px -7px 16px var(--luz);
  --sai-p: 3px 3px 7px var(--sombra), -3px -3px 7px var(--luz);
  --mono: SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --suave: cubic-bezier(.22, .61, .36, 1);
}
:root[data-tema="escuro"] {
  --papel: #1C1B1A; --papel2: #181716; --poco: #171615;
  --tinta: #E9DDD3; --tinta2: #B5ABA2; --apagado: #8F8A84; --fio: #2C2A28;
  --acento2: #FF8A33;
  --sombra: rgba(0,0,0,.55); --luz: rgba(255,245,235,.045);
  --fundo: rgba(0,0,0,.8); --brilho: rgba(255,240,225,.07); --beira: rgba(0,0,0,.55);
  --xadrez-a: #6f6a65; --xadrez-b: #7d7873;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel: #1C1B1A; --papel2: #181716; --poco: #171615;
    --tinta: #E9DDD3; --tinta2: #B5ABA2; --apagado: #8F8A84; --fio: #2C2A28;
    --acento2: #FF8A33;
    --sombra: rgba(0,0,0,.55); --luz: rgba(255,245,235,.045);
    --fundo: rgba(0,0,0,.8); --brilho: rgba(255,240,225,.07); --beira: rgba(0,0,0,.55);
    --xadrez-a: #6f6a65; --xadrez-b: #7d7873;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 15px/1.55 Inter, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
h2 { margin: 0 0 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta2); font-weight: 700; }
.rotulo, .dica, .quem, .trilha { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.dica { text-transform: none; letter-spacing: .04em; margin: 10px 0 0; line-height: 1.5; }

.topo { display: flex; align-items: center; gap: 18px; padding: 14px 22px; }
.marca { font: 700 13px var(--mono); letter-spacing: .3em; display: flex; gap: 8px; }
.marca .sufixo { color: var(--acento); }
.trilha { flex: 1; }
.topo-dir { display: flex; align-items: center; gap: 14px; }

.aviso {
  margin: 0 22px 10px; padding: 10px 14px; border-radius: 14px; background: var(--poco);
  box-shadow: var(--cova-p), var(--labio); color: var(--acento2); font-size: 13.5px;
}

.mesa { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(380px, 1fr) 320px; gap: 18px; padding: 4px 22px 22px; }
.placa { background: var(--papel); border-radius: 30px; padding: 20px; box-shadow: var(--sai); min-height: 0; display: flex; flex-direction: column; }
.coluna { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: 4px; margin: -4px; scrollbar-width: thin; }
.coluna .placa { flex: 0 0 auto; }
.coluna .placa:last-child { flex: 1 1 auto; min-height: 180px; }
.titulo-linha { display: flex; justify-content: space-between; align-items: baseline; }

.poco { background: var(--poco); border-radius: 22px; box-shadow: var(--labio); position: relative; overflow: hidden; min-height: 0; }
.poco::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--cova); }

.botao {
  font: 600 10.5px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--tinta2);
  background: var(--papel); border: 0; border-radius: 12px; padding: 9px 14px; cursor: pointer; box-shadow: var(--sai-p);
  transition: box-shadow .34s var(--suave), color .34s var(--suave);
}
.botao:hover { color: var(--acento2); transition-duration: .09s; }
.botao:active { box-shadow: var(--cova-p); }
.botao.pequeno { padding: 7px 11px; font-size: 9.5px; }
.botao:focus-visible, input:focus-visible, select:focus-visible, .solta:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.solta {
  display: block; text-align: center; padding: 16px 12px; border-radius: 18px; background: var(--poco);
  box-shadow: var(--cova-p), var(--labio); cursor: pointer; margin-bottom: 14px; color: var(--tinta2);
  transition: color .34s var(--suave);
}
.solta b { display: block; font-size: 13.5px; color: var(--tinta); }
.solta span { font-size: 12px; color: var(--apagado); }
.solta.sobre, .solta:hover { color: var(--acento2); transition-duration: .09s; }

.lista { flex: 1; overflow-y: auto; padding: 14px; scrollbar-width: thin; z-index: 0; }
.lista::-webkit-scrollbar, .palco::-webkit-scrollbar, .coluna::-webkit-scrollbar { width: 5px; }
.lista::-webkit-scrollbar-thumb, .palco::-webkit-scrollbar-thumb { background: var(--apagado); border-radius: 4px; }
.vazio { color: var(--apagado); font-size: 13px; padding: 18px 8px; text-align: center; }

.arte { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px; margin-bottom: 12px; border-radius: 18px; background: var(--papel); box-shadow: var(--sai-p); position: relative; z-index: 1; }
.arte .mini { width: 64px; height: 64px; border-radius: 12px; background: repeating-conic-gradient(var(--xadrez-a) 0 25%, var(--xadrez-b) 0 50%) 0 0 / 14px 14px; display: grid; place-items: center; overflow: hidden; }
.arte .mini img { max-width: 100%; max-height: 100%; display: block; }
.arte .nome { width: 100%; border: 0; background: transparent; color: var(--tinta); font: 600 13.5px Inter, sans-serif; padding: 2px 0; border-radius: 6px; text-overflow: ellipsis; }
.arte .linha { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.arte .campo { display: flex; align-items: center; gap: 5px; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.arte input[type=number] { width: 62px; }
.arte select { font: 11px var(--mono); }
.arte .tam { font: 11px var(--mono); color: var(--tinta2); }
.arte .linha[hidden] { display: none; }
.arte .sem-fundo { color: var(--acento2); font: 10px var(--mono); letter-spacing: .06em; }
.arte .tira { position: absolute; top: 8px; right: 10px; }

input[type=number], select, .nome:focus {
  background: var(--poco); color: var(--tinta); border: 0; border-radius: 10px; padding: 7px 9px;
  font: 13px var(--mono); box-shadow: var(--cova-p), var(--labio); font-variant-numeric: tabular-nums;
}
.ajustes { display: grid; gap: 12px; }
.ajustes label { display: grid; gap: 5px; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.ajustes label.marcar { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: .04em; font-size: 11.5px; }
input[type=checkbox] { accent-color: var(--acento); width: 15px; height: 15px; }

.palco { flex: 1; overflow-y: auto; padding: 20px; scrollbar-width: thin; }
.folha-bloco { margin: 0 auto 26px; max-width: 460px; }
.folha-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
.folha-cab b { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta2); }
.folha-cab .rotulo { text-transform: none; letter-spacing: .04em; }
.folha {
  position: relative; width: 100%; border-radius: 6px; overflow: hidden;
  background: repeating-conic-gradient(var(--xadrez-a) 0 25%, var(--xadrez-b) 0 50%) 0 0 / 16px 16px;
  box-shadow: 0 0 0 1px var(--beira), 4px 6px 14px var(--sombra);
}
.folha .margem { position: absolute; border: 1px dashed rgba(255,107,0,.55); pointer-events: none; }
.folha .peca { position: absolute; display: grid; place-items: center; overflow: visible; }
.folha .peca img { display: block; position: absolute; left: 50%; top: 50%; max-width: none; image-rendering: auto; }
.folha .peca::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); pointer-events: none; }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 0; }
.numeros div { min-width: 0; }
.numeros dt { font: 9.5px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--apagado); }
.numeros dd { margin: 2px 0 0; font: 600 21px Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.numeros dd.sinal { color: var(--acento2); }

.historico { padding: 12px; overflow-y: auto; scrollbar-width: thin; height: 100%; }
.hist { padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; background: var(--papel); box-shadow: var(--sai-p); position: relative; z-index: 1; }
.hist b { font: 600 11px var(--mono); letter-spacing: .1em; color: var(--tinta2); }
.hist .info { font-size: 12px; color: var(--apagado); margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.hist .acoes { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  body { overflow: auto; }
  .mesa { grid-template-columns: 1fr; }
  .placa { min-height: 320px; }
  .lista, .palco { max-height: 480px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }