:root {
    --azul:#4f46e5; --amarelo:#FFE600; --vermelho:#e11d48; --laranja:#ea580c; --verde:#16a34a; --ciano:#0891b2;
    --ml:#3483fa; --ambar:#d97706; --ambar-claro:#f59e0b; --verde-escuro:#2e7d32;
    --bg:#f1f3f9; --surface:#ffffff; --surface2:#f7f8fc; --hover:#eef1f8;
    --text:#1f2433; --muted:#7a8194; --border:#eceef4; --inputbg:#fff; --inputbd:#d7dbe6;
    --side1:#241b4d; --side2:#3a2a78; --sidetx:#cfc8ef; --sidetxhi:#fff; --sideact:rgba(255,255,255,.14);
    --lowrow:#fff5f6; --shadow:0 1px 2px rgba(20,20,50,.06),0 4px 14px rgba(20,20,50,.04);
  }
  [data-theme="dark"] {
    --azul:#8b87ff; --bg:#0f111a; --surface:#181b27; --surface2:#1f2331; --hover:#262b3c;
    --text:#e8eaf2; --muted:#969db4; --border:#272c3b; --inputbg:#1f2331; --inputbd:#39405440;
    --inputbd:#394054; --side1:#16131f; --side2:#241d3a; --sidetx:#b7b2d6; --sidetxhi:#fff; --sideact:rgba(255,255,255,.1);
    --lowrow:#2a1820; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  }
  * { box-sizing:border-box; }
  html,body { height:100%; }
  body { font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif; margin:0; background:var(--bg); color:var(--text); transition:background .2s,color .2s; }
  .app { display:flex; min-height:100vh; }

  /* Sidebar */
  .sidebar { width:230px; flex-shrink:0; background:linear-gradient(180deg,var(--side1),var(--side2)); color:var(--sidetx);
             display:flex; flex-direction:column; padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
             scrollbar-width:none; -ms-overflow-style:none; }
  .sidebar::-webkit-scrollbar { width:0; height:0; display:none; }
  .brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; color:#fff; padding:6px 8px 18px; }
  .brand b { color:var(--amarelo); }
  .nav { display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; color:var(--sidetx);
         text-decoration:none; font-size:14px; font-weight:500; cursor:pointer; margin-bottom:4px; }
  .nav:hover { background:var(--sideact); color:var(--sidetxhi); }
  .nav.active { background:var(--sideact); color:#fff; font-weight:600; }
  .nav.disabled { opacity:.5; cursor:default; }
  .nav .soon { margin-left:auto; font-size:9px; background:rgba(255,255,255,.18); padding:2px 6px; border-radius:20px; }
  .navtools { display:flex; justify-content:flex-end; padding:0 4px 4px; }
  .navexp { background:none; border:none; color:var(--sidetx); opacity:.6; font-size:10.5px; cursor:pointer; padding:2px 4px; }
  .navexp:hover { opacity:1; }
  .navgrp { display:flex; align-items:center; gap:7px; padding:9px 12px 5px; font-size:11px; font-weight:700; letter-spacing:.04em;
            text-transform:uppercase; color:var(--sidetx); opacity:.62; cursor:pointer; user-select:none; }
  .navgrp:hover { opacity:.95; }
  .navgrp .caret { font-size:9px; transition:transform .15s; display:inline-block; }
  .navgrp.open .caret { transform:rotate(90deg); }
  .navgrp-items { display:none; padding-left:6px; }
  .navgrp-items.open { display:block; }
  .navgrp-items .nav { font-size:13.5px; }
  .side-foot { margin-top:auto; }
  .theme-btn { width:100%; background:rgba(255,255,255,.1); color:#fff; border:none; padding:10px; border-radius:10px;
               cursor:pointer; font-size:13px; font-weight:600; }
  .theme-btn:hover { background:rgba(255,255,255,.18); }

  /* Conteudo */
  .content { flex:1; min-width:0; display:flex; flex-direction:column; }
  .topbar { display:flex; align-items:center; gap:12px; padding:16px 26px; background:var(--surface);
            border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
  .topbar h1 { font-size:19px; margin:0; font-weight:700; }
  .hamb { display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text); }
  .btn { background:var(--azul); color:#fff; border:none; padding:9px 15px; border-radius:9px; font-weight:600; cursor:pointer; font-size:13px; }
  .btn:hover { filter:brightness(1.08); }
  .btn.sec { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
  input[type=search]{ flex:1; min-width:160px; max-width:380px; padding:9px 13px; border:1px solid var(--inputbd);
                      border-radius:9px; font-size:14px; background:var(--inputbg); color:var(--text); }

  /* KPIs */
  .kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; padding:20px 26px 6px; }
  .kpi { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:17px 18px;
         display:flex; align-items:center; gap:13px; box-shadow:var(--shadow); }
  .kpi > div:last-child { min-width:0; flex:1; }
  .kpi .ic { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
  .ic.indigo{background:#eef0ff;color:#4f46e5}.ic.cyan{background:#e0f7fb;color:#0891b2}
  .ic.orange{background:#fff1e6;color:#ea580c}.ic.red{background:#fde7ec;color:#e11d48}
  .ic.slate{background:#eef1f6;color:#475569}.ic.green{background:#e6f6ec;color:#16a34a}
  [data-theme="dark"] .ic { background:rgba(255,255,255,.08)!important; }
  .kpi .v { font-size:clamp(16px,1.5vw,22px); font-weight:800; line-height:1.1; white-space:nowrap; }
  .kpi .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
  .kpi.alert .v{color:var(--vermelho)} .kpi.warn .v{color:var(--laranja)} .kpi.green .v{color:var(--verde)}
  /* modo privacidade (botão 👁️): esconde os valores com desfoque */
  .priv .v, .priv #p-fat-cmp, .priv #p-fat-prev, .priv #p-cresc,
  .priv #p-lucro-mc, .priv #p-lucro-cmp, .priv #p-lucro-dia,
  .priv #p-acos, .priv #p-adsvar, .priv #p-chart, .priv #p-legend,
  .priv #p-vsmedia-sub, .priv #p-hello-badges,
  .priv #meta-label { filter: blur(9px); user-select:none; transition:filter .12s; }

  .toolbar { padding:14px 26px 10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  select { padding:9px 11px; border:1px solid var(--inputbd); border-radius:9px; font-size:14px; background:var(--inputbg); color:var(--text); }
  .toolbar .updated { margin-left:auto; color:var(--muted); font-size:12px; }
  .wrap { padding:0 26px 40px; }
  .panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  #sec-ia .ia-layout{height:calc(100vh - 205px);min-height:560px;}
  #sec-ia .ia-sidebar,#sec-ia .ia-reader{height:100%;max-height:none;box-sizing:border-box;}
  #sec-ia .ia-sidebar{overflow:hidden;display:flex;flex-direction:column;}
  #sec-ia .ia-reader{scrollbar-gutter:stable;}
  #sec-ia #ia-list{flex:1;min-height:120px;}
  #sec-ia .ia-item:hover{background:var(--hover)!important;}
  @media(max-width:1050px){
    #sec-ia .ia-layout{display:block!important;height:auto;min-height:0;}
    #sec-ia .ia-sidebar{width:100%;height:auto;max-height:none;margin-bottom:12px;}
    #sec-ia .ia-reader{height:auto;max-height:none;overflow:visible;}
    #sec-ia #ia-list{max-height:260px!important;}
  }
  table { width:100%; border-collapse:collapse; }
  th,td { padding:11px 12px; text-align:left; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle; }
  /* Reposição: limita o título a 2 linhas pra não inchar a tabela (título completo no hover) */
  table[data-sec="envios"] tbody td[data-col="produto"]{ max-width:300px; }
  table[data-sec="envios"] tbody td[data-col="produto"] a{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
  #sec-envios .panel{overflow:visible;border-radius:14px;}
  table[data-sec="envios"]{border-radius:14px;overflow:hidden;}
  table[data-sec="envios"] thead th{z-index:8;box-shadow:0 1px 0 var(--border);}
  thead th { background:var(--surface2); white-space:nowrap; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; }
  th.sortable { cursor:pointer; user-select:none; }
  th.sortable:hover { color:var(--text); }
  th .ord { color:var(--azul); font-size:11px; margin-left:3px; }
  tbody tr.prod:hover td { background:var(--hover); }
  tr.prod.low td { background:var(--lowrow); }
  tr.child { background:var(--surface2); }
  tr.child td { font-size:12px; color:var(--muted); }
  td.qty { font-weight:700; text-align:center; }
  img.thumb { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:#fff; }
  .arrow { display:inline-block; width:16px; cursor:pointer; color:var(--muted); transition:transform .15s; user-select:none; }
  .arrow.open { transform:rotate(90deg); }
  .pill { padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
  .pill.out { background:var(--vermelho); color:#fff; }
  .pill.low { background:var(--laranja); color:#fff; }
  .pill.ok { background:#E0F2E9; color:#15803d; }
  .badge { padding:2px 7px; border-radius:6px; font-size:10px; font-weight:700; background:var(--border); color:var(--muted); }
  .badge.full { background:#00A650; color:#fff; }
  .badge.flex { background:#3483FA; color:#fff; }
  .status { font-size:11px; color:var(--muted); }
  .status.active { color:var(--verde); font-weight:600; }
  .mlb { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--text); }
  a.link { color:var(--text); text-decoration:none; font-weight:600; }
  a.link:hover { color:var(--azul); }
  .muted { color:var(--muted); font-size:12px; }
  input.cost { width:90px; padding:6px 8px; border:1px solid var(--inputbd); border-radius:8px; font-size:12px; text-align:right; background:var(--inputbg); color:var(--text); }
  #loading { padding:60px; text-align:center; color:var(--muted); }
  .spin { width:16px; height:16px; border:3px solid var(--border); border-top-color:var(--azul); border-radius:50%; display:inline-block; animation:rot .8s linear infinite; vertical-align:middle; }
  @keyframes rot { to { transform:rotate(360deg); } }
  .busy-tag { display:inline-flex; align-items:center; gap:7px; color:var(--azul); font-size:12px; font-weight:600; }
  .btn:disabled { opacity:.6; cursor:wait; }
  .btn.mini { padding:7px 9px; font-size:13px; line-height:1; }
  .seg { display:inline-flex; background:var(--surface2); border:1px solid var(--border); border-radius:9px; overflow:hidden; }
  .seg button { background:none; border:none; padding:8px 14px; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); }
  .seg button.on { background:var(--azul); color:#fff; }
  .daybtn { width:30px; height:32px; margin-left:4px; border:1px solid var(--border); background:var(--surface2);
            color:var(--text); border-radius:7px; cursor:pointer; font-size:12px; line-height:1; vertical-align:middle; }
  .daybtn:hover { background:var(--azul); color:#fff; border-color:var(--azul); }
  input[type="date"] { min-width:150px; }
  .seg.fil button { font-weight:500; }
  select.fil { padding:7px 9px; border:1px solid var(--inputbd); border-radius:8px; background:var(--inputbg); color:var(--text); font-size:13px; }
  input.an-in { width:78px; padding:6px 7px; border:1px solid var(--inputbd); border-radius:7px; background:var(--inputbg); color:var(--text); font-size:13px; text-align:right; }
  input.an-in:focus { border-color:var(--azul); outline:none; }
  input.an-in.promo { border-color:var(--laranja); font-weight:700; }
  .ctl { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); font-weight:600; }
  .ctl input { width:64px; padding:7px 9px; border:1px solid var(--inputbd); border-radius:8px; background:var(--inputbg); color:var(--text); }
  .send { font-weight:800; color:var(--verde); font-size:15px; }
  .nav.disabled .soon { margin-left:auto; }

  @media (max-width:820px){
    .sidebar { position:fixed; left:-240px; z-index:30; transition:left .2s; box-shadow:0 0 40px rgba(0,0,0,.3); }
    .sidebar.open { left:0; }
    .hamb { display:block; }
  }