:root {
  --preto: #0B0B0B;
  --sup-1: #121111;
  --sup-2: #181616;
  --sup-3: #211e1e;
  --carmim: #8B0D1A;
  --carmim-vivo: #B3122A;
  --carmim-claro: #E0475B;
  --offwhite: #F5F2ED;
  --texto: #ECE7E0;
  --texto-2: #A9A29A;
  --texto-3: #6F6963;
  --linha: rgba(245, 242, 237, .09);
  --linha-forte: rgba(245, 242, 237, .2);
  --ok: #3FA66B;
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--preto); color: var(--texto); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2 { margin: 0; }
.sobre { margin: 0 0 .2rem; font-size: .64rem; letter-spacing: .36em; text-transform: uppercase; color: var(--carmim-claro); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .75em 1.5em; border-radius: 999px; cursor: pointer;
  font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: .2s; }
.btn-p { padding: .55em 1.1em; font-size: .64rem; }
.btn-cheio { background: var(--carmim); border: 1px solid var(--carmim-vivo); color: var(--offwhite); }
.btn-cheio:hover { background: var(--carmim-vivo); }
.btn-linha { background: transparent; border: 1px solid var(--linha-forte); }
.btn-linha:hover { border-color: var(--carmim-vivo); }
.btn-perigo { background: transparent; border: 1px solid rgba(224, 71, 91, .5); color: var(--carmim-claro); }
.btn-perigo:hover { background: rgba(139, 13, 26, .25); }
.btn:disabled { opacity: .5; cursor: progress; }
.link { background: none; border: 0; cursor: pointer; color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.link:hover { color: var(--carmim-claro); }

/* campos */
input:not([type=checkbox]):not([type=range]), select, textarea {
  width: 100%; padding: .65rem .8rem; border-radius: 9px; border: 1px solid var(--linha); background: var(--preto); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--carmim-vivo); }
select option { background: var(--sup-1); }
textarea { resize: vertical; }
input[type=checkbox] { accent-color: var(--carmim-vivo); width: 16px; height: 16px; }
input[type=range] { width: 100%; accent-color: var(--carmim-vivo); }
.form label { display: flex; flex-direction: column; gap: .35rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); margin-bottom: .9rem; }
.form label small { text-transform: none; letter-spacing: 0; color: var(--texto-3); }
.form .check, .check { flex-direction: row; align-items: center; gap: .5rem; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--texto); cursor: pointer; }
.erro { color: var(--carmim-claro); min-height: 1.2em; margin: .2rem 0 .6rem; font-size: .85rem; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: radial-gradient(circle at 15% 10%, rgba(139, 13, 26, .35), transparent 40%), radial-gradient(circle at 90% 90%, rgba(139, 13, 26, .25), transparent 40%), var(--preto); }
.login-caixa { width: min(380px, 100%); padding: 2.6rem 2.2rem; border-radius: 20px; border: 1px solid var(--linha-forte); background: rgba(18, 17, 17, .85); text-align: center; }
.login-caixa img { margin: 0 auto 1.2rem; }
.login-caixa h1 { font-family: var(--serif); font-weight: 500; font-size: 2.2rem; color: var(--offwhite); }
.login-caixa > p { margin: .2rem 0 1.8rem; color: var(--texto-3); font-size: .8rem; letter-spacing: .1em; }
.login-caixa label { display: flex; flex-direction: column; gap: .35rem; text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 1rem; }
.login-caixa .btn { width: 100%; padding: 1em; }
.voltar { display: inline-block; margin-top: 1.4rem; font-size: .78rem; color: var(--texto-3); text-decoration: none; }

/* layout */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.4rem 1rem; border-right: 1px solid var(--linha); background: var(--sup-1); }
.lat-marca { display: flex; align-items: center; gap: .7rem; padding: 0 .6rem 1.6rem; text-decoration: none; border-bottom: 1px solid var(--linha); margin-bottom: 1rem; }
.lat-marca span { display: flex; flex-direction: column; font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; color: var(--offwhite); }
.lat-marca em { font-family: var(--sans); font-style: normal; font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--carmim-claro); }
.lat-nav { display: flex; flex-direction: column; gap: .2rem; }
.lat-nav a { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border-radius: 10px; text-decoration: none; color: var(--texto-2); font-size: .85rem; }
.lat-nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lat-nav a:hover { background: var(--sup-2); color: var(--texto); }
.lat-nav a.ativo { background: linear-gradient(90deg, rgba(139, 13, 26, .45), rgba(139, 13, 26, .1)); color: var(--offwhite); box-shadow: inset 2px 0 0 var(--carmim-vivo); }
.lat-rodape { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 1rem .6rem 0; border-top: 1px solid var(--linha); font-size: .8rem; color: var(--texto-3); }
.conteudo { padding: 2rem clamp(1rem, 3vw, 2.6rem) 4rem; min-width: 0; }
.vista-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.vista-cab h1 { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--offwhite); }
.acoes-cab { display: flex; gap: .6rem; flex-wrap: wrap; }

/* aviso */
.aviso { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: 1.2rem; border-radius: 12px;
  border: 1px solid rgba(224, 71, 91, .35); background: linear-gradient(90deg, rgba(139, 13, 26, .28), rgba(139, 13, 26, .06)); }
.aviso b { color: var(--offwhite); }
.aviso .btn { margin-left: auto; }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.kpi { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--sup-1); }
.kpi small { display: block; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--texto-3); }
.kpi strong { display: block; margin: .35rem 0 .1rem; font-family: var(--serif); font-size: 2.3rem; font-weight: 500; line-height: 1; color: var(--offwhite); font-variant-numeric: tabular-nums; }
.kpi span { font-size: .76rem; color: var(--texto-2); }
.kpi .medidor { height: 4px; margin-top: .6rem; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.kpi .medidor i { display: block; height: 100%; background: var(--carmim-vivo); border-radius: 0 2px 2px 0; }

/* cartões e gráficos */
.graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.cartao { padding: 1.2rem 1.3rem 1.3rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--sup-1); margin-bottom: .9rem; }
.graficos .cartao { margin: 0; }
.cartao.largo { grid-column: 1 / -1; }
.cartao h2 { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texto); margin-bottom: .9rem; }
.cartao h2.mt { margin-top: 1.4rem; }
.nota-g { margin: -.6rem 0 .9rem; font-size: .76rem; color: var(--texto-3); }
.hbar { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; align-items: center; gap: .3rem .8rem; }
.hbar-rot { font-size: .8rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.hbar-alvo { position: relative; display: flex; align-items: center; gap: .5rem; height: 22px; cursor: default; }
.hbar-alvo i { display: block; height: 14px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--carmim-vivo); transition: background .15s; }
.hbar-alvo:hover i { background: var(--carmim-claro); }
.hbar-alvo b { font-size: .76rem; font-weight: 500; color: var(--texto); font-variant-numeric: tabular-nums; }
.colunas { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 1.2rem; border-bottom: 1px solid var(--linha-forte); }
.coluna { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; cursor: default; }
.coluna i { display: block; width: min(70%, 40px); border-radius: 4px 4px 0 0; background: var(--carmim-vivo); min-height: 2px; }
.coluna:hover i { background: var(--carmim-claro); }
.coluna b { font-size: .72rem; font-weight: 500; color: var(--texto); margin-bottom: .25rem; }
.colunas-eixo { display: flex; gap: 2px; margin-top: .4rem; }
.colunas-eixo span { flex: 1; text-align: center; font-size: .72rem; color: var(--texto-3); }
.vazio-g { color: var(--texto-3); font-size: .85rem; padding: 1rem 0; }
.dica-flut { position: fixed; z-index: 100; pointer-events: none; padding: .45rem .7rem; border-radius: 8px; font-size: .78rem;
  background: var(--offwhite); color: var(--preto); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }

/* listas */
.lista-alt { list-style: none; margin: 0; padding: 0; }
.lista-alt li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--linha); font-size: .85rem; }
.lista-alt li:last-child { border-bottom: 0; }
.lista-alt small { display: block; color: var(--texto-3); font-size: .72rem; }
.lista-alt .de { color: var(--texto-3); text-decoration: line-through; margin-right: .4rem; }
.lista-alt .para { color: var(--offwhite); font-weight: 500; }
.lista-alt .quando { color: var(--texto-3); font-size: .74rem; text-align: right; }
.sobe { color: var(--carmim-claro); font-size: .72rem; } .desce { color: var(--ok); font-size: .72rem; }

/* produtos */
.barra { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.massa { display: flex; align-items: center; gap: .8rem 1rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: .8rem; border-radius: 12px; border: 1px solid rgba(224, 71, 91, .35); background: rgba(139, 13, 26, .14); font-size: .85rem; }
.massa label { display: flex; align-items: center; gap: .4rem; }
.massa input[type=number] { padding: .4rem .6rem; }
.dica { font-size: .78rem; color: var(--texto-3); margin: 0 0 .6rem; }
.dica b { color: var(--texto-2); font-weight: 500; }
.tabela-wrap { overflow-x: auto; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup-1); }
.tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabela th { position: sticky; top: 0; padding: .8rem .7rem; text-align: left; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); background: var(--sup-2); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela th[data-ord] { cursor: pointer; }
.tabela th[data-ord]:hover { color: var(--texto); }
.tabela th.ord-asc::after { content: ' ↑'; color: var(--carmim-claro); }
.tabela th.ord-desc::after { content: ' ↓'; color: var(--carmim-claro); }
.tabela td { padding: .55rem .7rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: rgba(255, 255, 255, .02); }
.tabela tr.oculto td:not(:first-child):not(:nth-last-child(-n+3)) { opacity: .45; }
.num { text-align: right; }
.t-id { color: var(--texto-3); font-variant-numeric: tabular-nums; font-size: .76rem; }
.t-nome { font-weight: 500; color: var(--offwhite); }
.t-nome small { display: block; font-weight: 400; color: var(--texto-3); font-size: .74rem; }
.t-in { width: 100px !important; padding: .4rem .55rem !important; text-align: right; font-variant-numeric: tabular-nums; background: transparent !important; border-color: transparent !important; }
.t-in:hover { border-color: var(--linha) !important; }
.t-in:focus { border-color: var(--carmim-vivo) !important; background: var(--preto) !important; }
.t-in.vazio-preco { border-color: rgba(224, 71, 91, .35) !important; }
.t-in.salvo { border-color: var(--ok) !important; }
.t-in.estoque { width: 70px !important; }
.chave { position: relative; width: 36px; height: 20px; border-radius: 999px; border: 0; cursor: pointer; background: var(--sup-3); transition: .2s; }
.chave::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--texto-3); transition: .2s; }
.chave.on { background: var(--carmim); }
.chave.on::after { left: 19px; background: var(--offwhite); }
.estrela { background: none; border: 0; cursor: pointer; font-size: 1.05rem; color: var(--texto-3); }
.estrela.on { color: var(--carmim-claro); }
.icone-btn { background: none; border: 1px solid transparent; border-radius: 8px; padding: .35rem .5rem; cursor: pointer; color: var(--texto-2); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.icone-btn:hover { border-color: var(--linha-forte); color: var(--offwhite); }
.rodape-tab { font-size: .78rem; color: var(--texto-3); margin-top: .7rem; }

/* gaveta */
.gaveta { margin: 0 0 0 auto; width: min(720px, 100%); height: 100vh; max-height: 100vh; padding: 0; border: 0; border-left: 1px solid var(--linha-forte); background: var(--sup-1); color: var(--texto); }
.gaveta::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.gaveta[open] { animation: entra .3s ease-out; }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
.gaveta form { display: flex; flex-direction: column; height: 100%; }
.gaveta-cab { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.4rem 1.6rem 1rem; border-bottom: 1px solid var(--linha); }
.gaveta-cab h2 { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; color: var(--offwhite); }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; }
.gaveta-rodape { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem; border-top: 1px solid var(--linha); background: var(--sup-2); }
.espaco { flex: 1; }
.fechar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha-forte); background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; }
fieldset { border: 1px solid var(--linha); border-radius: 12px; padding: 1rem 1.1rem .3rem; margin: 0 0 1rem; }
legend { padding: 0 .5rem; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--carmim-claro); }
legend small { letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .8rem; }
.checks { display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding-top: .9rem; }
.checks label { margin: 0 !important; }
output { text-transform: none; letter-spacing: 0; color: var(--offwhite); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; border-radius: 9px; border: 1px solid var(--linha); background: var(--preto); margin-bottom: .9rem; }
.tags input { flex: 1; min-width: 160px; border: 0 !important; padding: .35rem !important; background: transparent !important; }
.tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .7rem; border-radius: 999px; background: var(--sup-3); border: 1px solid var(--linha-forte); font-size: .8rem; cursor: grab; }
.tag button { background: none; border: 0; cursor: pointer; color: var(--texto-3); font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.tag button:hover { color: var(--carmim-claro); }
.acorde-linha { display: grid; grid-template-columns: 1.3fr 1fr 50px 1.2fr 32px; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.acorde-linha output { font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; }
.acorde-linha select:disabled { opacity: .35; }
.acorde-linha .rem { background: none; border: 0; color: var(--texto-3); cursor: pointer; font-size: 1.1rem; }
.acorde-linha .rem:hover { color: var(--carmim-claro); }
#fAddAcorde { margin: .2rem 0 1rem; }

/* config */
.config-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
.usuarios { list-style: none; margin: 0 0 1rem; padding: 0; }
.usuarios li { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--linha); }
.usuarios small { color: var(--texto-3); margin-left: .5rem; }
.linha-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; }

/* toasts */
.toasts { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast { padding: .75rem 1.1rem; border-radius: 10px; background: var(--offwhite); color: var(--preto); font-size: .85rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: entra .25s; }
.toast.erro-t { background: var(--carmim); color: var(--offwhite); }

@media (max-width: 1100px) { .graficos, .config-grade { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: sticky; z-index: 10; height: auto; flex-direction: row; align-items: center; gap: .5rem; padding: .6rem .8rem; border-right: 0; border-bottom: 1px solid var(--linha); overflow-x: auto; }
  .lat-marca { border: 0; padding: 0; margin: 0; }
  .lat-marca span { display: none; }
  .lat-nav { flex-direction: row; }
  .lat-nav a { padding: .55rem; font-size: 0; gap: 0; }
  .lat-nav a svg { width: 20px; height: 20px; }
  .lat-rodape { margin: 0 0 0 auto; padding: 0; border: 0; gap: .6rem; }
  #quemSou { display: none; }
  .barra { grid-template-columns: 1fr 1fr; }
  .barra input { grid-column: 1 / -1; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .acorde-linha { grid-template-columns: 1fr 1fr 40px 32px; }
  .acorde-linha select { grid-column: 1 / -2; }
  .linha-form { grid-template-columns: 1fr; }
}

/* algarismos em Montserrat (Cormorant usa números old-style) */
.kpi strong { font-family: var(--sans); font-weight: 300; font-size: 1.9rem; letter-spacing: -.02em; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ===================== v2 — logo, pirâmide e biblioteca de notas ===================== */
.lat-marca img { width: 46px; height: auto; filter: drop-shadow(0 0 10px rgba(179, 18, 42, .45)); }
.login-caixa img { width: 120px; height: auto; filter: drop-shadow(0 0 24px rgba(179, 18, 42, .5)); }

/* pirâmide no formulário */
#fPiramide { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pir-camada { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; align-items: stretch; border-radius: 10px; transition: background .2s; }
.pir-camada.alvo { background: rgba(139, 13, 26, .18); }
.pir-camada .tags { margin: 0; min-height: 46px; }
.pir-rot { display: flex; align-items: center; gap: .5rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.pir-rot i { display: block; width: 22px; height: 18px; flex: none; }
.pir-rot .t0 { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ff6a7d; }
.pir-rot .t1 { clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); background: var(--carmim-vivo); }
.pir-rot .t2 { clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); background: var(--carmim); }
.tag img { width: 22px; height: 22px; object-fit: contain; margin-left: -.35rem; }
.tag-ini { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -.35rem; border-radius: 50%; background: var(--sup-2); color: var(--carmim-claro); font-family: var(--serif); font-size: .95rem; }
.tag.nova { border-style: dashed; border-color: rgba(224, 71, 91, .6); }
#fClimaSug { color: var(--texto-3); }

/* biblioteca de notas */
.barra-notas { grid-template-columns: 2fr 1fr 1fr; }
.notas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .7rem; }
.nota-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1rem .6rem .9rem; cursor: pointer; text-align: center;
  border-radius: 14px; border: 1px solid var(--linha); background: var(--sup-1); transition: border-color .2s, transform .2s; }
.nota-card:hover { border-color: var(--carmim-vivo); transform: translateY(-2px); }
.nota-card img { width: 64px; height: 64px; object-fit: contain; }
.nota-card strong { font-weight: 500; font-size: .85rem; color: var(--offwhite); line-height: 1.2; }
.nota-card > span { font-size: .7rem; color: var(--texto-3); }
.nota-sem { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px dashed rgba(224, 71, 91, .5);
  font-family: var(--serif); font-size: 1.8rem; line-height: 1; color: var(--carmim-claro); }
.nota-sem small { font-family: var(--sans); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); margin-top: -.6rem; }

/* caixa da nota */
.caixa { width: min(520px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--linha-forte); border-radius: 18px; background: var(--sup-1); color: var(--texto); }
.caixa::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.nota-img-edit { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.nota-prev { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--linha-forte);
  background: radial-gradient(circle, rgba(245, 242, 237, .1), rgba(245, 242, 237, .02) 70%); }
.nota-prev img { width: 84px; height: 84px; object-fit: contain; }
.nota-prev span { font-family: var(--serif); font-size: 3rem; color: var(--carmim-claro); }
.form label.arquivo { display: inline-flex; flex-direction: row; margin: 0 .6rem .4rem 0; color: var(--texto); letter-spacing: .18em; font-size: .64rem; }

@media (max-width: 820px) {
  .pir-camada { grid-template-columns: 1fr; gap: .3rem; }
  .barra-notas { grid-template-columns: 1fr 1fr; }
}

/* ===================== v3 — foto do perfume e importação CSV ===================== */
.foto-edit { display: grid; grid-template-columns: 150px 1fr; gap: 1.1rem; align-items: center; margin-bottom: .9rem; }
.foto-prev { position: relative; width: 150px; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--linha-forte); background: radial-gradient(circle at 50% 110%, rgba(139, 13, 26, .55), transparent 65%), var(--preto); }
.foto-prev img { width: 100%; height: 100%; object-fit: cover; }
.foto-prev img.sem-foto { width: 44%; height: auto; object-fit: contain; opacity: .35; }
.foto-prev span { position: absolute; bottom: .5rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-3); }
.t-prod { display: flex; align-items: center; gap: .7rem; }
.t-foto { width: 34px; height: 42px; flex: none; border-radius: 6px; object-fit: cover; border: 1px solid var(--linha); }
.t-foto.vazia { background: var(--sup-3); border-style: dashed; }

.caixa-larga { width: min(900px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); }
.caixa-larga > .form { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.caixa-larga .gaveta-corpo { overflow-y: auto; }
.passos { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--texto-2); line-height: 1.9; }
.passos b { color: var(--texto); font-weight: 500; }
.regras { margin-bottom: 1rem; padding: .7rem 1rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup-2); font-size: .85rem; color: var(--texto-2); }
.regras summary { cursor: pointer; color: var(--texto); }
.regras ul { margin: .7rem 0 .2rem; padding-left: 1.1rem; line-height: 1.7; }
.regras code { font-size: .78rem; padding: .1rem .35rem; border-radius: 4px; background: var(--preto); color: var(--offwhite); }
.form label.soltar { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.6rem 1rem; margin-bottom: 1rem; cursor: pointer;
  border: 1.5px dashed var(--linha-forte); border-radius: 14px; text-transform: none; letter-spacing: 0; transition: border-color .2s, background .2s; }
.soltar:hover, .soltar.alvo { border-color: var(--carmim-vivo); background: rgba(139, 13, 26, .1); }
.soltar strong { font-size: .95rem; font-weight: 500; color: var(--offwhite); }
.soltar span { font-size: .8rem; color: var(--texto-3); }
.import-resumo { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.ir { padding: .5rem .9rem; border-radius: 10px; border: 1px solid var(--linha); font-size: .82rem; color: var(--texto-2); }
.ir b { font-size: 1.1rem; font-weight: 500; color: var(--offwhite); margin-right: .2rem; }
.ir.novo { border-color: rgba(63, 166, 107, .5); }
.ir.atual { border-color: rgba(142, 195, 236, .45); }
.ir.erro-ir { border-color: rgba(224, 71, 91, .5); }
.tabela-import td { vertical-align: top; }
.tabela-import tr.erro td { background: rgba(139, 13, 26, .12); }
.selo-acao { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .68rem; letter-spacing: .08em; border: 1px solid var(--linha-forte); }
.selo-acao.novo { color: #7fd6a2; border-color: rgba(63, 166, 107, .5); }
.selo-acao.atualizar { color: #a9d2f2; border-color: rgba(142, 195, 236, .45); }
.selo-acao.erro { color: var(--carmim-claro); border-color: rgba(224, 71, 91, .5); }
.erro-txt, .aviso-txt { display: block; font-size: .78rem; }
.erro-txt { color: var(--carmim-claro); }
.aviso-txt { color: #e3b56f; }
.dica .aviso-txt { display: inline; }
@media (max-width: 820px) { .foto-edit { grid-template-columns: 110px 1fr; } .foto-prev { width: 110px; } }

/* ===================== v4 — foto rápida e logos das marcas ===================== */
.t-foto-btn { width: 40px; height: 50px; flex: none; padding: 0; overflow: hidden; cursor: pointer; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--linha-forte); background: var(--sup-3); color: var(--texto-3); transition: border-color .2s, color .2s; }
.t-foto-btn img { width: 100%; height: 100%; object-fit: cover; }
.t-foto-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.t-foto-btn.vazia { border-style: dashed; }
.t-foto-btn:hover { border-color: var(--carmim-vivo); color: var(--carmim-claro); }
.foto-prev { cursor: pointer; }
.foto-prev:hover { border-color: var(--carmim-vivo); }
.foto-prev:has(.sem-foto)::after { content: "clique para adicionar"; position: absolute; top: .6rem; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--carmim-claro); }

.selo-marca { display: inline-grid; place-items: center; height: 34px; min-width: 34px; padding: 4px 10px; border-radius: 8px; background: var(--offwhite); }
.selo-marca img { max-height: 100%; max-width: 120px; object-fit: contain; }
.selo-marca.escuro { background: #000; border: 1px solid var(--linha-forte); }
.selo-marca.vazio { background: transparent; border: 1px dashed var(--linha-forte); font-family: var(--serif); font-size: .95rem; color: var(--texto-2); }
.selo-marca.grande { height: 84px; width: 100%; padding: 12px 16px; border-radius: 12px; }
.selo-marca.grande img { max-width: 100%; }
.selo-marca.grande.vazio { font-size: 1.2rem; }
.marcas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.marca-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--sup-1); text-align: center; }
.marca-card strong { margin-top: .5rem; font-weight: 500; color: var(--offwhite); }
.marca-card small { color: var(--texto-3); font-size: .74rem; }
.marca-acoes { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; font-size: .78rem; }
.marca-logo-linha { display: flex; align-items: center; gap: .6rem; min-height: 1.2rem; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.marca-logo-linha img { height: 26px; max-width: 90px; object-fit: contain; padding: 2px 6px; border-radius: 5px; background: var(--offwhite); }

/* v6 — logo da marca sempre dentro do selo */
.selo-marca { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; }
.selo-marca img { display: block; width: auto; height: 26px; max-width: 120px; object-fit: contain; }
.selo-marca.grande img { height: 60px; max-width: 100%; }
.marca-logo-linha img { height: 26px; width: auto; }

/* v7 — selo da marca quadrado */
.selo-marca { width: 48px; height: 48px; padding: 0; border-radius: 8px; border: 1.5px solid rgba(245, 242, 237, .85); }
.selo-marca img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; padding: 4px; }
.selo-marca.grande { width: 120px; height: 120px; padding: 0; border-radius: 12px; }
.selo-marca.vazio { width: auto; height: auto; min-height: 48px; padding: 6px 12px; border: 1px dashed var(--linha-forte); }
.selo-marca.grande.vazio { width: 120px; height: 120px; }

/* v7b — borda em degradê no selo da marca */
.selo-marca:not(.vazio) { --fundo-selo: var(--offwhite); border: 2px solid transparent; border-radius: 10px;
  background: linear-gradient(var(--fundo-selo), var(--fundo-selo)) padding-box, linear-gradient(180deg, #e30613 0%, #a8003a 55%, #7a0a1a 100%) border-box; }
.selo-marca.escuro:not(.vazio) { --fundo-selo: #000; }
.selo-marca.grande:not(.vazio) { border-width: 3px; border-radius: 14px; }

/* v7c — selo maior no admin */
.selo-marca img { padding: 2px; }
.selo-marca.grande, .selo-marca.grande.vazio { width: 140px; height: 140px; flex: none; }
.marcas-grade { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }