:root {
    --bg: #f6f7f9; --panel: #ffffff; --fg: #18202b; --muted: #5f6b7a; --line: #e2e6eb;
    --accent: #1f5fbf; --accent-soft: #e8f0fb;
    --ok: #1e7a46; --ok-soft: #e4f4ea; --warn: #9a6200; --warn-soft: #fbf1dc;
    --bad: #b42318; --bad-soft: #fdecea; --info: #1f5fbf; --info-soft: #e8f0fb;
    --off: #6b7280; --off-soft: #eef0f2;
    --radius: 10px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #12161c; --panel: #1a2029; --fg: #e8ecf1; --muted: #9aa5b3; --line: #2b3440;
      --accent: #7aa7ef; --accent-soft: #1e2b40;
      --ok: #6fcf97; --ok-soft: #173225; --warn: #f2c066; --warn-soft: #3a2e14;
      --bad: #f28b82; --bad-soft: #3b1b19; --info: #7aa7ef; --info-soft: #1e2b40;
      --off: #a3acb8; --off-soft: #252c36;
    }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--fg);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; }
  header.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
  h1 { font-size: 24px; margin: 0; letter-spacing: -0.01em; }
  .lead { color: var(--muted); margin: 4px 0 0; max-width: 70ch; }
  .lead b { color: var(--fg); font-variant-numeric: tabular-nums; }
  .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .btn { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 8px;
    padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
  .btn:hover { border-color: var(--accent); }
  .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  @media (prefers-color-scheme: dark) { .btn.primary { color: #0d1420; } }
  .btn.small { padding: 4px 10px; font-size: 12px; }
  .btn:disabled { opacity: .55; cursor: default; }
  a.link { color: var(--accent); text-decoration: none; font-weight: 600; }
  .status-line { color: var(--muted); font-size: 12px; margin-top: 6px; }
  .banner { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
  .banner.bad { border-color: var(--bad); background: var(--bad-soft); }
  .banner.ok { border-color: var(--ok); background: var(--ok-soft); }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
  .card h3 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
  .card .val { font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
  .card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .card.alert .val { color: var(--bad); }
  .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
  select, input, textarea { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 7px 10px; }
  select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
  .filters input[type=search] { min-width: 200px; flex: 1 1 200px; }
  .tablebox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel);
    position: sticky; top: 0; white-space: nowrap; }
  tr:last-child td { border-bottom: 0; }
  td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  td.nw { white-space: nowrap; }
  td.item { min-width: 220px; }
  .late { color: var(--bad); font-weight: 600; }
  .chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .chip.ok { background: var(--ok-soft); color: var(--ok); }
  .chip.warn { background: var(--warn-soft); color: var(--warn); }
  .chip.info { background: var(--info-soft); color: var(--info); }
  .chip.off { background: var(--off-soft); color: var(--off); }
  .empty { text-align: center; color: var(--muted); padding: 28px; }
  .count { color: var(--muted); font-size: 12px; margin: 8px 2px 0; }
  details.method { margin-top: 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
  details.method summary { cursor: pointer; font-weight: 700; }
  details.method h4 { margin: 14px 0 4px; font-size: 13px; }
  details.method p, details.method li { color: var(--muted); }
  details.method ul { margin: 4px 0; padding-left: 20px; }
  /* Painel lateral (cadastro / status) */
  .overlay { position: fixed; inset: 0; background: rgba(10, 14, 20, .45); display: flex; justify-content: flex-end; z-index: 20; }
  .overlay[hidden] { display: none; }
  .sheet { background: var(--panel); width: min(560px, 100%); height: 100%; overflow-y: auto; padding: 20px; box-shadow: -8px 0 30px rgba(0,0,0,.2); }
  .sheet h2 { margin: 0 0 4px; font-size: 18px; }
  .sheet .hint { color: var(--muted); margin: 0 0 14px; font-size: 13px; }
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .grid .full { grid-column: 1 / -1; }
  @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
  label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
  label.f input, label.f select, label.f textarea { width: 100%; font-weight: 400; }
  .req { color: var(--bad); }
  .total-preview { font-size: 13px; color: var(--muted); }
  .total-preview b { color: var(--fg); }
  .sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
  .msg { margin-top: 12px; font-size: 13px; }
  .msg.bad { color: var(--bad); } .msg.ok { color: var(--ok); }
  fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 12px 0 0; }
  legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 0; overflow-x: auto; }
  .tab { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
  .tab:hover { color: var(--fg); }
  .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
  .badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
  .spacer { flex: 1 1 auto; }
  .chk { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
  .chk.top { margin-top: 12px; font-weight: 600; color: var(--fg); }
  .hint-line { color: var(--muted); font-size: 12px; margin: 0 2px 8px; }
  h2.sec { font-size: 15px; margin: 22px 0 8px; }
  th.numh { text-align: right; }
  td.strong { font-weight: 700; }
  table.matrix td.cellbtn { padding: 0; }
  table.matrix button.cell { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; text-align: right; cursor: pointer; font-variant-numeric: tabular-nums; }
  table.matrix button.cell:hover, table.matrix button.cell:focus-visible { background: var(--accent-soft); outline: none; }
  table.matrix button.cell small { display: block; font-size: 10px; color: var(--muted); }
  table.matrix td.low { background: var(--bad-soft); }
  table.matrix td.low button.cell { color: var(--bad); font-weight: 700; }
  td.acts { display: flex; gap: 4px; }
  .nf-link { text-decoration: none; }
  .card.alert .val { color: var(--bad); }
  .filters .btn.primary { margin-left: 2px; }
  .orc { margin: 0 0 18px; }
  .orc-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  .orc-head h2.sec { margin: 0 8px 0 0; }
  tr.clickable { cursor: pointer; }
  tr.clickable:hover td { background: var(--accent-soft); }
  .bar { display: inline-block; vertical-align: middle; width: 120px; height: 8px; border-radius: 99px; background: var(--off-soft); overflow: hidden; margin-right: 8px; }
  .bar span { display: block; height: 100%; }
  .bar.ok span { background: var(--ok); } .bar.warn span { background: var(--warn); } .bar.bad span { background: var(--bad); }
  .sheet.wide { width: min(760px, 100%); }
  .tablebox.inv { margin-top: 12px; max-height: 50vh; overflow-y: auto; }
  input.qty { width: 110px; text-align: right; }
  td.dif.pos { color: var(--ok); font-weight: 700; } td.dif.neg { color: var(--bad); font-weight: 700; }

  /* ===== Layout mais limpo (v3) ===== */
  .wrap { padding-top: 16px; }
  header.top { align-items: center; }
  h1 { font-size: 20px; }
  .status-line#freshness { margin-top: 2px; }
  h2.sec { font-size: 14px; font-weight: 700; margin: 28px 0 10px; color: var(--fg); }
  h2.sec.first { margin-top: 18px; }
  h2.sec small { font-weight: 400; }
  .muted { color: var(--muted); }
  .tabs { margin-top: 12px; }
  .view { padding-bottom: 8px; }

  /* botões discretos */
  .btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
  .btn.ghost:hover, .btn.ghost.on { color: var(--fg); border-color: var(--line); background: var(--panel); }
  .btn.ghost.on { color: var(--accent); }
  .btn.icon { padding: 6px 10px; font-size: 15px; line-height: 1; }

  /* menus suspensos (⋯, exportar, movimentar) */
  details.menu { position: relative; }
  details.menu > summary { list-style: none; display: inline-block; }
  details.menu > summary::-webkit-details-marker { display: none; }
  .menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 15; min-width: 230px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
  .menu-list a, .menu-list button { all: unset; box-sizing: border-box; display: block; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--fg); font-size: 13px; }
  .menu-list a:hover, .menu-list button:hover, .menu-list a:focus-visible, .menu-list button:focus-visible { background: var(--accent-soft); }
  .menu-list button:disabled { opacity: .5; cursor: default; }
  .menu-list b { display: block; font-weight: 600; }
  .menu-list small { display: block; color: var(--muted); font-size: 12px; }

  /* barra de ferramentas */
  .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 10px; }
  .toolbar input[type=search] { flex: 1 1 220px; min-width: 180px; max-width: 360px; }
  .filters.more { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
  .seg button { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); padding: 7px 12px; cursor: pointer; }
  .seg button + button { border-left: 1px solid var(--line); }
  .seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

  /* números resumidos numa linha */
  .statbar { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
  .statbar.slim { margin-bottom: 14px; }
  .stat { flex: 1 1 180px; padding: 12px 16px; display: flex; flex-direction: column; gap: 1px; }
  .stat + .stat { border-left: 1px solid var(--line); }
  .stat .lbl { font-size: 12px; color: var(--muted); }
  .stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
  .statbar.slim .stat b { font-size: 17px; }
  .stat small { font-size: 12px; color: var(--muted); }
  .stat.alert b { color: var(--bad); }
  @media (max-width: 640px) { .stat + .stat { border-left: 0; border-top: 1px solid var(--line); } }

  /* início: pendências */
  .pend { display: flex; flex-direction: column; gap: 8px; }
  .pend-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer;
    background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); }
  .pend-item.bad { border-left-color: var(--bad); }
  .pend-item:hover, .pend-item:focus-visible { border-color: var(--accent); }
  .pend-n { font-size: 22px; font-weight: 700; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
  .pend-item.bad .pend-n { color: var(--bad); } .pend-item.warn .pend-n { color: var(--warn); }
  .pend-t { flex: 1; display: flex; flex-direction: column; }
  .pend-t small { color: var(--muted); }
  .pend-go { color: var(--muted); font-size: 18px; }
  .tudo-ok { padding: 18px; background: var(--ok-soft); color: var(--ok); border-radius: var(--radius); font-weight: 600; }
  .feed { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
  .feed li { display: flex; gap: 12px; padding: 9px 14px; font-size: 13px; align-items: baseline; }
  .feed li + li { border-top: 1px solid var(--line); }
  .feed li > span:last-child { color: var(--muted); }

  /* lista de pedidos */
  table.lista td { vertical-align: middle; }
  td.muted { color: var(--muted); }
  tr.cancelado td { opacity: .55; }
  .flag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .03em; }
  tr.clickable:focus-visible td { background: var(--accent-soft); outline: none; }

  /* detalhe do pedido */
  .det-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .det-head h2 { font-size: 19px; margin-top: 2px; }
  .det-chips { margin: 10px 0 6px; }
  dl.det { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
  dl.det dt { color: var(--muted); }
  dl.det dd { margin: 0; word-break: break-word; }
  .det-group { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    border-top: 1px solid var(--line); padding-top: 12px; margin-top: 10px; }
  .det-obs { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; }

  /* metodologia como página */
  section.method h4 { margin: 18px 0 4px; font-size: 13px; }
  section.method li, section.method p { color: var(--muted); }
  section.method ul { margin: 4px 0; padding-left: 20px; }
  section.method { max-width: 860px; }

  /* celular: pedidos viram cartões */
  @media (max-width: 640px) {
    table.lista thead { display: none; }
    table.lista, table.lista tbody, table.lista tr, table.lista td { display: block; width: 100%; }
    table.lista tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
    table.lista td { border: 0; padding: 2px 0; }
    table.lista td.num { text-align: left; font-weight: 700; }
    .toolbar input[type=search] { max-width: none; }
  }