.bar-top { background: linear-gradient(180deg, var(--tint), var(--steel-2)); border-bottom: 1px solid var(--line); padding: 28px 0 0; }
  .crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
  .crumbs a { text-decoration: none; }
  .bar-top h1 { color: var(--navy); font-size: clamp(1.8rem, 3vw, 2.5rem); }
  .modes { display: flex; gap: 4px; margin-top: 22px; }
  .modes button { border: 0; background: none; padding: 12px 18px; font-weight: 650; border-bottom: 3px solid transparent; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
  .modes button[aria-selected=true] { color: var(--navy); border-bottom-color: var(--orange); background: #fff; border-radius: 6px 6px 0 0; }
  .modes .new { font: 600 .68rem var(--mono); background: var(--orange); color: #fff; padding: 3px 6px; border-radius: 3px; }

  .layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; padding-top: 28px; padding-bottom: 80px; }
  .filters { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
  .fgroup { border-bottom: 1px solid var(--line); padding: 16px 0; }
  .fgroup:first-child { padding-top: 0; }
  .fgroup h2 { font: 650 .82rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; color: var(--muted); font-stretch: 100%; }
  .opt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .93rem; cursor: pointer; }
  .opt input { width: 17px; height: 17px; accent-color: var(--ink); flex: none; }
  .opt span { flex: 1; }
  .opt small { font: 500 .76rem var(--mono); color: var(--muted); }
  .bsearch { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 10px; font-size: .88rem; margin-bottom: 8px; }
  .blist { max-height: 260px; overflow: auto; }
  .fclose { display: none; }

  .tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
  .sbox { position: relative; flex: 1; min-width: 240px; }
  .sbox svg { position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; color: var(--muted); }
  .sbox input { width: 100%; height: 50px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 14px 0 44px; font-size: 1rem; }
  .sbox input:focus { outline: 0; border-color: var(--ink); }
  .tools select { height: 50px; border: 1px solid var(--line); border-radius: var(--r); padding: 0 12px; background: #fff; }
  .ffab { display: none; }
  .info { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-size: .9rem; color: var(--muted); }
  .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border: 0; border-radius: 20px; padding: 5px 10px 5px 12px; font-size: .82rem; font-weight: 600; }
  .chip svg { width: 13px; height: 13px; }

  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #fff; transition: border-color .15s, box-shadow .15s; }
  .card:hover { border-color: #CBD5E3; box-shadow: 0 14px 30px -20px rgba(0,14,51,.4); }
  .card .ph { position: relative; aspect-ratio: 4/3; background: var(--steel-2); border-radius: 0; display: flex; align-items: center; justify-content: center; padding: 14px; border: 0; width: 100%; }
  .card .ph img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
  .card .ph .stock { position: absolute; left: 10px; top: 10px; }
  .card .bd { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .card .br { font: 600 .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--orange-ink); }
  .card .cd { font: 600 .9rem var(--mono); }
  .card .nm { font-size: .9rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: none; border: 0; padding: 0; text-align: left; font-weight: 500; }
  .card .nm:hover { text-decoration: underline; }
  .card .act { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
  .card .act .btn { flex: 1; min-height: 38px; font-size: .88rem; padding: 0 10px; }
  .card mark { background: #FFE2B8; color: inherit; }
  .more-wrap { text-align: center; margin-top: 28px; }
  .noresult { border: 1px dashed #C9D3E2; border-radius: 10px; padding: 40px 24px; text-align: center; }
  .noresult h3 { font-size: 1.3rem; margin-bottom: 8px; }

  /* Ficha do produto */
  dialog { border: 0; border-radius: 12px; padding: 0; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: 0 40px 80px -30px rgba(0,14,51,.6); }
  dialog::backdrop { background: rgba(0,14,51,.55); }
  .pd { display: grid; grid-template-columns: 1fr 1.1fr; }
  .pd .pimg { background: var(--steel-2); display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 340px; position: relative; }
  .pd .pimg img { max-height: 320px; object-fit: contain; mix-blend-mode: multiply; }
  .pd .pinfo { padding: 28px; display: flex; flex-direction: column; gap: 12px; position: relative; }
  .pd .x { position: absolute; right: 14px; top: 14px; }
  .pd h2 { font-size: 1.35rem; font-stretch: 105%; line-height: 1.2; padding-right: 40px; }
  .spec { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .9rem; margin: 4px 0; }
  .spec dt { color: var(--muted); }
  .spec dd { margin: 0; font-weight: 600; }
  .pd .desc { font-size: .92rem; color: var(--muted); white-space: pre-line; }
  .pd .buy { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .pd .buy .btn { flex: 1; }
  .rel { padding: 20px 28px 26px; border-top: 1px solid var(--line); }
  .rel h3 { font-size: .95rem; margin-bottom: 12px; }
  .rel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .rel a { display: block; text-decoration: none; font-size: .8rem; line-height: 1.25; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
  .rel a img { height: 60px; width: 100%; object-fit: contain; margin-bottom: 6px; }
  .rel a b { font: 600 .75rem var(--mono); display: block; }

  /* Cotação em lote */
  .lote { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 80px; }
  .lote-in { position: sticky; top: 92px; align-self: start; }
  .lote-in h2 { font-size: 1.5rem; margin-bottom: 8px; }
  .lote-in p { color: var(--muted); font-size: .94rem; }
  .lote-in textarea { width: 100%; min-height: 240px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; font: 500 .88rem/1.6 var(--mono); resize: vertical; }
  .lote-in textarea:focus { outline: 0; border-color: var(--ink); }
  .drop { display: flex; align-items: center; gap: 10px; border: 1px dashed #C9D3E2; border-radius: var(--r); padding: 12px 14px; margin-top: 10px; font-size: .88rem; color: var(--muted); cursor: pointer; }
  .drop:hover, .drop.over { border-color: var(--ink); color: var(--ink); }
  .drop input { display: none; }
  .lote-in .bar { display: flex; gap: 10px; margin-top: 14px; }
  .lote-in .bar .btn:last-child { flex: 1; }
  .sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
  .sum div { border-radius: 8px; padding: 14px 16px; }
  .sum b { display: block; font: 700 1.6rem/1 var(--sans); font-stretch: var(--wide); }
  .sum span { font-size: .84rem; }
  .sum .s1 { background: var(--ok-bg); color: var(--ok); }
  .sum .s2 { background: var(--warn-bg); color: var(--warn); }
  .sum .s3 { background: var(--steel); color: var(--muted); }
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th { text-align: left; font: 600 .74rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); }
  td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  td .mono { font-size: .86rem; }
  td .found { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; }
  td .found img { width: 40px; height: 40px; object-fit: contain; }
  td .found .t { font-size: .86rem; line-height: 1.25; }
  td select { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 6px; font-size: .84rem; }
  td .qty { height: 34px; }
  td .qty input { width: 44px; }
  .tag { font: 600 .72rem var(--sans); padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
  .tag.ok { background: var(--ok-bg); color: var(--ok); }
  .tag.pa { background: var(--warn-bg); color: var(--warn); }
  .tag.no { background: var(--steel); color: var(--muted); }
  .lote-out .foot-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; align-items: center; flex-wrap: wrap; }
  .lote-out .foot-act span { margin-right: auto; color: var(--muted); font-size: .9rem; }
  .lote-empty { border: 1px dashed #C9D3E2; border-radius: 10px; padding: 48px 28px; color: var(--muted); }
  .lote-empty h3 { color: var(--ink); margin-bottom: 8px; }

  @media (max-width: 920px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .filters { position: fixed; inset: 0; z-index: 95; background: #fff; max-height: none; padding: 20px var(--gutter) 90px; transform: translateY(100%); transition: transform .25s; top: 0; }
    .filters.open { transform: none; }
    .fclose { display: flex; position: fixed; left: 0; right: 0; bottom: 0; padding: 14px var(--gutter); background: #fff; border-top: 1px solid var(--line); }
    .fclose .btn { flex: 1; }
    .ffab { display: inline-flex; }
    .lote { grid-template-columns: 1fr; }
    .lote-in { position: static; }
    .pd { grid-template-columns: 1fr; }
    .pd .pimg { min-height: 220px; padding: 20px; }
    .pd .pimg img { max-height: 200px; }
    .rel ul { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sbox { flex-basis: 100%; min-width: 0; }
    .card .act .btn-ghost { display: none; }
    .tools select { flex: 1; }
    table thead { display: none; }
    table, tbody, tr, td { display: block; }
    tr { border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
    td { border: 0; padding: 4px 0; }
    .sum b { font-size: 1.3rem; }
  }
  @media (max-width: 340px) { .grid { grid-template-columns: 1fr; } }

/* Cotação em lote: modos digitar / colar / planilha */
.modo-lote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--steel); padding: 5px; border-radius: 12px; margin: 16px 0 14px; }
.modo-lote button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; border-radius: 9px; padding: 9px 4px; font-weight: 600; font-size: .84rem; color: var(--muted); }
.modo-lote button svg { width: 20px; height: 20px; }
.modo-lote button[aria-selected=true] { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(22,33,62,.12); }
.lote-cab, .linha-lote { display: grid; grid-template-columns: minmax(0, 1fr) 84px 32px; gap: 8px; align-items: center; }
.lote-cab { font: 600 .7rem var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 2px 6px; }
#linhas-lote { display: grid; gap: 6px; max-height: 360px; overflow: auto; padding: 2px; }
.linha-lote input { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: #fff; width: 100%; }
.linha-lote .lc { font: 500 .92rem var(--mono); text-transform: uppercase; }
.linha-lote .lc::placeholder { text-transform: none; font-family: var(--sans); }
.linha-lote .lq { text-align: center; font-weight: 600; }
.linha-lote input:focus { outline: 0; border-color: var(--navy-2); box-shadow: 0 0 0 3px var(--tint); }
.rm-linha { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.rm-linha:hover { background: var(--bad-bg); color: var(--bad); }
.add-linha { margin-top: 8px; width: 100%; height: 42px; border: 1px dashed #C9D3E2; border-radius: 10px; background: none; color: var(--navy); font-weight: 600; }
.add-linha:hover { border-color: var(--navy-2); background: var(--tint); }
.dica { font-size: .82rem !important; margin: 10px 0 0; }
kbd { font: 600 .74rem var(--mono); background: var(--steel); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.como { margin: 0 0 10px; padding-left: 20px; color: var(--muted); font-size: .9rem; display: grid; gap: 4px; }
.drop.grande { flex-direction: column; text-align: center; padding: 28px 18px; gap: 8px; border-width: 2px; border-radius: 14px; background: var(--steel-2); }
.drop.grande b { color: var(--navy); font-size: .98rem; }
.drop.grande span { font-size: .84rem; }
.drop.grande svg { color: var(--orange); }
.arq-status { font-size: .88rem; margin: 10px 0 4px; min-height: 1em; }
.arq-status.ok { color: var(--ok); }
.arq-status.erro { color: var(--bad); }
#modelo-lote { background: none; border: 0; padding: 0; font-size: .88rem; color: var(--navy); cursor: pointer; }

/* Cards sempre alinhados: título (2 linhas), marca (1 linha), código (1 linha), botão no rodapé */
.grid { align-items: stretch; }
.card .bd { gap: 4px; padding: 14px 14px 16px; }
.card .nm { order: 0; font-size: .93rem; font-weight: 600; color: var(--navy); line-height: 1.3; min-height: calc(1.3em * 2); -webkit-line-clamp: 2; }
.card .br { order: 1; margin-top: 6px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .cd { order: 2; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); min-height: 1.4em; }
.card .cd .sem { font: 400 .8rem var(--sans); color: var(--muted); }
.card .act { order: 3; padding-top: 12px; }
.card .ph { flex: none; }