:root{
    --yellow:#FFC400;
    --yellow-dark:#E8A900;
    --yellow-soft:#FFF6D6;
    --yellow-line:#F0D77E;
    --ink:#17202B;
    --ink-2:#3C4854;
    --navy:#1C2733;
    --navy-2:#2A3846;
    --bg:#F1F3F5;
    --card:#FFFFFF;
    --muted:#8A929E;
    --line:#E4E8EC;
    --green:#12A150;
    --green-dark:#0E8442;
    --red:#E5484D;
    --amber:#B96A00;
    --radius:14px;
    --shadow:0 2px 10px rgba(23,32,43,.09);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{font-family:'Nunito Sans',system-ui,sans-serif;background:#C6CDD3;color:var(--ink);display:flex;justify-content:center;}
  #app{width:100%;max-width:430px;height:100dvh;background:var(--bg);position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,0,0,.2);}

  /* ---------- Screens ---------- */
  .screen{position:absolute;inset:0;flex-direction:column;background:var(--bg);display:none;}
  .screen.active{display:flex;}
  .scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
  .scroll::-webkit-scrollbar{width:0;}
  .has-tabs{padding-bottom:72px;}
  .pad{padding:12px 12px 4px;}

  /* ---------- Headers ---------- */
  .hdr{background:var(--yellow);color:var(--ink);flex-shrink:0;padding:13px 14px 12px;}
  .hdr.dark{background:var(--navy);color:#fff;}
  .hdr-top{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
  .back{width:34px;height:34px;border-radius:9px;border:0;background:rgba(23,32,43,.10);display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
  .hdr.dark .back{background:rgba(255,255,255,.14);}
  .brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;}
  .brand .logo{width:34px;height:34px;border-radius:8px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;font-weight:900;font-size:14px;letter-spacing:.3px;flex-shrink:0;}
  .brand h1{font-size:16px;font-weight:900;letter-spacing:.2px;line-height:1;}
  .brand small{display:block;font-size:10.5px;font-weight:700;opacity:.72;margin-top:3px;letter-spacing:.5px;}
  .hdr-cli{display:flex;flex-direction:column;min-width:0;flex:1;}
  .hdr-cli .t{font-size:15px;font-weight:900;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hdr-cli .s{font-size:11px;font-weight:700;opacity:.72;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .htitle{font-size:18px;font-weight:900;letter-spacing:.2px;}
  .hsub{font-size:11.5px;font-weight:700;opacity:.72;margin-top:2px;}

  /* ---------- Search ---------- */
  .search{display:flex;align-items:center;gap:9px;background:#fff;border-radius:11px;padding:0 12px;height:44px;box-shadow:0 3px 8px rgba(0,0,0,.13);}
  .search input{border:0;outline:0;flex:1;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:transparent;min-width:0;}
  .search input::placeholder{color:var(--muted);font-weight:600;}
  .search .clear{color:var(--muted);font-size:19px;font-weight:700;padding:2px 4px;cursor:pointer;display:none;}

  .section-label{font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:4px 4px 8px;display:flex;align-items:center;gap:7px;}
  .section-label .count{background:var(--yellow-soft);color:var(--amber);border-radius:20px;padding:1px 8px;font-size:10.5px;font-weight:800;}

  /* ---------- Client cards ---------- */
  .clist{display:flex;flex-direction:column;gap:8px;}
  .ccard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;cursor:pointer;box-shadow:0 1px 3px rgba(23,32,43,.05);transition:.12s;}
  .ccard:active{background:#FFFBEF;}
  .ccard .av{width:46px;height:46px;border-radius:11px;background:var(--yellow-soft);color:var(--amber);display:grid;place-items:center;flex-shrink:0;font-weight:900;font-size:15px;}
  .ccard .info{flex:1;min-width:0;}
  .ccard .info .nm{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ccard .info .mt{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:3px;display:flex;gap:6px;align-items:center;}
  .ccard .info .cnpj{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;}
  .ccard .arw{color:var(--muted);flex-shrink:0;}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
  .pill{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:#EAF7EF;color:var(--green-dark);}
  .pill.new{background:var(--yellow-soft);color:var(--amber);}

  /* ---------- Negociação (vendas) ---------- */
  .neg{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin:12px 12px 12px;overflow:hidden;border:1px solid var(--line);}
  .neg-empty{padding:24px 18px;text-align:center;color:var(--muted);}
  .neg-empty svg{margin-bottom:8px;opacity:.5;}
  .neg-empty b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:2px;}
  .neg-empty span{font-size:12.5px;}
  .neg-head{padding:9px 13px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:linear-gradient(180deg,#FFFDF5,#fff);}
  .neg-head .p-nome{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.25;}
  .neg-head .p-cod{font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;letter-spacing:.3px;}
  .head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
  .p-est{font-size:10.5px;font-weight:700;color:var(--green-dark);background:#E7F6EE;padding:2px 7px;border-radius:6px;white-space:nowrap;}
  .foto-btn{display:flex;align-items:center;gap:5px;background:var(--yellow-soft);color:var(--amber);border:1px solid var(--yellow-line);border-radius:8px;padding:5px 9px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;line-height:1;}
  .foto-btn:active{background:#FBEFC7;transform:translateY(1px);}

  .neg-body{padding:11px 13px 2px;}
  .field-row{display:flex;gap:9px;margin-bottom:10px;}
  .field{flex:1;}
  .field label{display:block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
  .stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;height:38px;}
  .stepper button{width:34px;height:100%;border:0;background:#F3F5F7;color:var(--ink);font-size:19px;font-weight:800;cursor:pointer;display:grid;place-items:center;}
  .stepper button:active{background:var(--yellow-soft);}
  .stepper input{flex:1;border:0;outline:0;text-align:center;font-family:inherit;font-size:15px;font-weight:800;color:var(--ink);width:100%;min-width:0;}
  .inp{width:100%;height:38px;border:1.5px solid var(--line);border-radius:9px;padding:0 11px;font-family:inherit;font-size:15px;font-weight:800;color:var(--ink);outline:0;background:#fff;}
  .inp:focus{border-color:var(--yellow-dark);}
  .inp-wrap{position:relative;}
  .inp-wrap .suf{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:800;color:var(--muted);pointer-events:none;}
  .inp.pct{padding-right:28px;color:var(--amber);}

  .tiers{margin-bottom:10px;}
  .tiers .tl{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:flex;align-items:center;gap:6px;}
  .tier-chips{display:flex;gap:6px;}
  .tier{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:9px;padding:4px 2px;text-align:center;cursor:pointer;background:#fff;transition:.12s;}
  .tier .q{font-size:9.5px;font-weight:700;color:var(--muted);}
  .tier .d{font-size:13px;font-weight:900;color:var(--ink);}
  .tier.active{border-color:var(--yellow-dark);background:var(--yellow-soft);}
  .tier.active .d{color:var(--amber);}
  .tier.suggested{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset;}

  .price-strip{background:#F7F9FA;border:1px solid var(--line);border-radius:11px;padding:9px 11px 8px;margin-bottom:10px;}
  .ps-metrics{display:flex;flex-wrap:wrap;}
  .ps-m{flex:1 1 33.33%;min-width:82px;padding:2px 0;}
  .ps-m .l{font-size:9px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);line-height:1.25;}
  .ps-m .v{font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.25;}
  .ps-m.d .v{color:var(--green-dark);}
  .ps-m.i .v{color:var(--amber);}
  .ps-total{display:flex;justify-content:space-between;align-items:center;border-top:1.5px dashed var(--line);margin-top:5px;padding-top:7px;}
  .ps-total .lbl{font-size:11px;font-weight:800;color:var(--ink-2);}
  .ps-total .amt{font-size:20px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}

  .last{border-top:1px solid var(--line);}
  .last-toggle{width:100%;background:none;border:0;padding:9px 13px;display:flex;align-items:center;justify-content:space-between;font-family:inherit;font-size:12px;font-weight:800;color:var(--ink-2);cursor:pointer;}
  .last-toggle .chev{transition:transform .2s;color:var(--muted);}
  .last-toggle.open .chev{transform:rotate(180deg);}
  .last-list{padding:0 13px 11px;display:none;}
  .last-list.open{display:block;}
  .last-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);}
  .last-item:last-child{border-bottom:0;}
  .last-item .cli{font-size:12px;font-weight:700;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px;}
  .last-item .cli small{display:block;font-size:10px;color:var(--muted);font-weight:700;}
  .last-item .pr{font-size:13px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}

  /* segmented */
  .seg{display:flex;background:#DDE2E6;border-radius:11px;padding:4px;margin:0 12px 10px;}
  .seg button{flex:1;border:0;background:none;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--ink-2);padding:8px 4px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
  .seg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1);}
  .seg .badge{background:var(--ink);color:var(--yellow);font-size:10px;font-weight:800;border-radius:20px;min-width:18px;height:18px;padding:0 5px;display:inline-grid;place-items:center;}

  /* product list */
  .plist{display:flex;flex-direction:column;gap:8px;}
  .pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:.12s;box-shadow:0 1px 3px rgba(23,32,43,.05);}
  .pcard:active{background:#FFFBEF;}
  .pcard.sel{border-color:var(--yellow-dark);box-shadow:0 0 0 1.5px var(--yellow-dark) inset;}
  .pcard .ico{position:relative;width:42px;height:42px;border-radius:10px;background:var(--yellow-soft);color:var(--amber);display:grid;place-items:center;flex-shrink:0;font-weight:900;font-size:11px;cursor:pointer;}
  .pcard .ico .cam{position:absolute;bottom:-4px;right:-4px;background:#fff;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.22);}
  .pcard .info{flex:1;min-width:0;}
  .pcard .info .nm{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pcard .info .mt{font-size:11px;font-weight:700;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;}
  .pcard .info .mt b{color:var(--ink-2);}
  .pcard .pr{text-align:right;flex-shrink:0;}
  .pcard .pr .val{font-size:15px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
  .pcard .pr .un{font-size:10px;font-weight:700;color:var(--muted);}
  .empty-list{text-align:center;color:var(--muted);font-size:13px;font-weight:700;padding:30px 20px;}

  /* cart items */
  .citem{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(23,32,43,.05);}
  .citem .ct{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
  .citem .nm{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.2;}
  .citem .cod{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:2px;}
  .citem .rm{background:#FBEAEC;color:var(--red);border:0;width:28px;height:28px;border-radius:8px;font-size:15px;cursor:pointer;flex-shrink:0;display:grid;place-items:center;}
  .citem .cb{display:flex;justify-content:space-between;align-items:flex-end;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);}
  .citem .meta{font-size:11.5px;font-weight:700;color:var(--ink-2);}
  .citem .meta .tag{display:inline-block;background:#F1F4F5;border-radius:6px;padding:2px 7px;margin-right:5px;font-size:10.5px;}
  .citem .meta .tag.d{background:#E7F6EE;color:var(--green-dark);}
  .citem .meta .tag.i{background:var(--yellow-soft);color:var(--amber);}
  .citem .tot{font-size:16px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
  .cart-empty{text-align:center;padding:36px 24px;color:var(--muted);}
  .cart-empty svg{opacity:.4;margin-bottom:10px;}
  .cart-empty b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:3px;}
  .cart-empty span{font-size:12.5px;}

  /* add bar */
  .add-bar{flex-shrink:0;background:#fff;border-top:1px solid var(--line);padding:9px 12px 10px;box-shadow:0 -2px 10px rgba(23,32,43,.06);}
  .btn-add2{width:100%;height:48px;border:0;border-radius:12px;background:var(--yellow);color:var(--ink);font-family:inherit;font-size:15px;font-weight:900;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 5px 15px rgba(255,196,0,.5);}
  .btn-add2:active{background:var(--yellow-dark);transform:translateY(1px);}
  .btn-add2 .tt{background:rgba(23,32,43,.14);padding:3px 10px;border-radius:8px;font-variant-numeric:tabular-nums;}

  /* footers */
  .foot{flex-shrink:0;background:#fff;border-top:1px solid var(--line);padding:11px 13px calc(11px + env(safe-area-inset-bottom));box-shadow:0 -3px 14px rgba(23,32,43,.09);}
  .tot-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
  .tot-row .lbl{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);}
  .tot-row .lbl small{display:block;font-size:10.5px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:1px;}
  .tot-row .amt{font-size:26px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;}
  .foot-btns{display:flex;gap:10px;}
  .fbtn{flex:1;height:48px;border:0;border-radius:12px;font-family:inherit;font-size:14px;font-weight:900;letter-spacing:.2px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
  .fbtn:disabled{opacity:.45;cursor:not-allowed;}
  .fbtn.save{background:#fff;color:var(--ink);border:1.8px solid var(--ink);flex:0 0 40%;}
  .fbtn.save:active:not(:disabled){background:#F3F5F7;}
  .fbtn.close{background:var(--navy);color:var(--yellow);box-shadow:0 4px 12px rgba(28,39,51,.3);}
  .fbtn.close:active:not(:disabled){background:#111a24;transform:translateY(1px);}
  .fbtn.primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 12px rgba(255,196,0,.45);}
  .fbtn.primary:active:not(:disabled){background:var(--yellow-dark);transform:translateY(1px);}
  .fbtn.finish{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(18,161,80,.32);}
  .fbtn.finish:active:not(:disabled){background:var(--green-dark);transform:translateY(1px);}

  /* ---------- Tabbar ---------- */
  #tabbar{position:absolute;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid var(--line);display:none;z-index:30;box-shadow:0 -3px 14px rgba(23,32,43,.08);padding-bottom:env(safe-area-inset-bottom);}
  #tabbar button{flex:1;border:0;background:none;font-family:inherit;font-size:11px;font-weight:800;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative;}
  #tabbar button.active{color:var(--ink);}
  #tabbar button.active::before{content:"";position:absolute;top:0;width:38px;height:3px;border-radius:0 0 3px 3px;background:var(--yellow);}
  #tabbar .tb-badge{position:absolute;top:6px;left:calc(50% + 4px);background:var(--red);color:#fff;font-size:9px;font-weight:800;border-radius:20px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;}

  /* ---------- Fechamento / opções ---------- */
  .opt-grid{display:flex;gap:11px;margin-bottom:14px;}
  .opt{flex:1;background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;transition:.12s;}
  .opt:active{background:#FFFBEF;}
  .opt.sel{border-color:var(--yellow-dark);background:var(--yellow-soft);}
  .opt .oic{width:48px;height:48px;border-radius:50%;background:#F3F5F7;display:grid;place-items:center;margin:0 auto 9px;color:var(--ink);}
  .opt.sel .oic{background:var(--yellow);}
  .opt .ot{font-size:14px;font-weight:900;color:var(--ink);}
  .opt .os{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;}

  .block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow);}
  .block h3{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px;}
  .frow{margin-bottom:10px;}
  .frow:last-child{margin-bottom:0;}
  .frow label{display:block;font-size:11px;font-weight:800;color:var(--ink-2);margin-bottom:4px;}
  .frow .inp{font-size:14px;font-weight:700;}
  .grid2{display:flex;gap:10px;}
  .grid2 .frow{flex:1;}

  /* pay list */
  .paylist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
  .pay{background:#fff;border:2px solid var(--line);border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:.12s;}
  .pay:active{background:#FFFBEF;}
  .pay.sel{border-color:var(--yellow-dark);background:var(--yellow-soft);}
  .pay .pico{width:40px;height:40px;border-radius:10px;background:#F3F5F7;display:grid;place-items:center;flex-shrink:0;color:var(--ink);}
  .pay.sel .pico{background:var(--yellow);}
  .pay .pinfo{flex:1;min-width:0;}
  .pay .pinfo .pt{font-size:14px;font-weight:800;color:var(--ink);}
  .pay .pinfo .ps{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px;}
  .pay .chk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;}
  .pay.sel .chk{border-color:var(--yellow-dark);background:var(--yellow);}

  .summ{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:12px;box-shadow:var(--shadow);}
  .sline{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;}
  .sline .k{color:var(--ink-2);font-weight:700;}
  .sline .v{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
  .sline.big{border-top:1.5px dashed var(--line);margin-top:6px;padding-top:10px;}
  .sline.big .k{font-size:14px;font-weight:900;}
  .sline.big .v{font-size:21px;font-weight:900;}

  /* success */
  .success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;}
  .success .circle{width:96px;height:96px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 10px 30px rgba(18,161,80,.35);animation:pop .3s ease-out;}
  @keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
  .success h2{font-size:22px;font-weight:900;color:var(--ink);margin-bottom:6px;}
  .success p{font-size:14px;font-weight:700;color:var(--muted);margin-bottom:4px;}
  .success .num{font-size:15px;font-weight:900;color:var(--amber);background:var(--yellow-soft);padding:6px 14px;border-radius:10px;margin:12px 0 4px;}
  .success-summ{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;margin-top:18px;}

  /* ---------- Painel ---------- */
  .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
  .kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 13px;box-shadow:var(--shadow);}
  .kpi.span2{grid-column:1 / -1;}
  .kpi .kl{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);}
  .kpi .kv{font-size:22px;font-weight:900;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums;line-height:1;}
  .kpi .ks{font-size:11px;font-weight:700;color:var(--muted);margin-top:4px;}
  .kpi.hl{background:var(--navy);border-color:var(--navy);}
  .kpi.hl .kl{color:rgba(255,255,255,.68);}
  .kpi.hl .kv{color:var(--yellow);font-size:28px;}
  .kpi.hl .ks{color:rgba(255,255,255,.6);}
  .meta-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);margin-bottom:12px;}
  .meta-box .mh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;}
  .meta-box .mh .t{font-size:12px;font-weight:800;color:var(--ink-2);}
  .meta-box .mh .p{font-size:13px;font-weight:900;color:var(--amber);}
  .bar{height:10px;background:#EEF1F3;border-radius:20px;overflow:hidden;}
  .bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--yellow-dark));border-radius:20px;transition:width .4s;}
  .meta-box .ms{font-size:11px;font-weight:700;color:var(--muted);margin-top:7px;}
  .quick{display:flex;gap:10px;margin-bottom:12px;}
  .qbtn{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;box-shadow:var(--shadow);}
  .qbtn:active{background:#FFFBEF;}
  .qbtn .qi{width:38px;height:38px;border-radius:10px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;margin:0 auto 7px;}
  .qbtn .qt{font-size:12px;font-weight:800;color:var(--ink);}

  /* modal foto */
  .modal-bk{position:absolute;inset:0;background:rgba(20,26,34,.6);display:none;align-items:center;justify-content:center;z-index:60;padding:24px;}
  .modal-bk.show{display:flex;}
  .pmodal{background:#fff;border-radius:18px;width:100%;max-width:330px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45);animation:pop .18s ease-out;}
  .pmodal .photo{aspect-ratio:4/3;background:linear-gradient(135deg,#FFF6D6,#FBE9A8);display:grid;place-items:center;position:relative;color:var(--amber);}
  .pmodal .photo img{width:100%;height:100%;object-fit:cover;}
  .pmodal .photo .ph{display:grid;place-items:center;text-align:center;padding:10px;}
  .pmodal .photo .ph b{font-size:13px;font-weight:800;margin-top:8px;}
  .pmodal .photo .cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;opacity:.7;}
  .pmodal .pinfo{padding:13px 15px 15px;}
  .pmodal .pinfo .nm{font-size:15px;font-weight:800;color:var(--ink);line-height:1.25;}
  .pmodal .pinfo .cd{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px;}
  .pmodal .close{width:100%;margin-top:13px;height:42px;border:0;border-radius:10px;background:var(--yellow-soft);color:var(--amber);font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;}

  /* toast */
  #toast{position:absolute;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.28s;display:flex;align-items:center;gap:9px;z-index:70;white-space:nowrap;}
  #toast.show{opacity:1;transform:translate(-50%,0);}
  #toast.ok{background:var(--green-dark);}

/* ================= adições do app real (PIN, sessão, troca de cliente) ================= */
/* trava por PIN — mesma identidade do app (amarelo/navy) */
.pin-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--navy);}
.pin-card{width:min(340px,88vw);text-align:center;color:#fff;}
.pin-logo{font-size:30px;font-weight:900;letter-spacing:-.02em;}
.pin-logo span{color:var(--yellow);}
.pin-sub{margin-top:6px;font-size:13px;font-weight:700;color:#B9C2CC;}
.pin-hint{margin-top:4px;font-size:12px;color:#8A929E;}
.pin-hint b{color:var(--yellow);}
.pin-dots{display:flex;gap:14px;justify-content:center;margin:22px 0;}
.pin-dots i{width:14px;height:14px;border-radius:99px;background:#33404D;transition:background .12s;}
.pin-dots i.on{background:var(--yellow);}
.pin-dots.shake{animation:pinShake .3s;}
@keyframes pinShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pin-pad button{height:62px;border-radius:16px;border:none;background:var(--navy-2);color:#fff;font-size:22px;font-weight:800;font-family:inherit;cursor:pointer;}
.pin-pad button:active{background:#3A4A5B;}
.pin-pad .pin-aux{font-size:16px;color:#B9C2CC;}
.pin-err{min-height:20px;margin-top:14px;font-size:13px;font-weight:700;color:#FF8A80;}
/* aviso de sessão (espelho do desktop) */
.sess-warn{margin:0 16px 10px;padding:9px 12px;border-radius:12px;background:#FDECEA;border:1px solid #F5C6C0;color:#B3261E;font-size:12px;font-weight:700;}
/* overlay "entrando no cliente" / operações longas */
.busy-bk{position:fixed;inset:0;z-index:150;background:rgba(23,32,43,.66);display:none;align-items:center;justify-content:center;padding:24px;}
.busy-bk.show{display:flex;}
.busy-card{background:#fff;border-radius:20px;padding:26px 22px;width:min(320px,86vw);text-align:center;}
.busy-card .sp{width:44px;height:44px;margin:0 auto 14px;border-radius:99px;border:4px solid var(--yellow-soft);border-top-color:var(--yellow);animation:busySpin .8s linear infinite;}
@keyframes busySpin{to{transform:rotate(360deg)}}
.busy-card .bt{font-size:15px;font-weight:900;color:var(--ink);}
.busy-card .bs{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted);}
.busy-card .bx{margin-top:14px;border:none;background:var(--bg);border-radius:10px;padding:8px 16px;font-family:inherit;font-weight:800;font-size:12.5px;color:var(--ink-2);cursor:pointer;display:none;}
.busy-card.pode-cancelar .bx{display:inline-block;}
/* chip de status da sessão no cabeçalho do painel */
.sess-chip{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 10px;}
.sess-chip .dot2{width:8px;height:8px;border-radius:99px;background:#C9CFD6;}
.sess-chip.on .dot2{background:var(--green,#1E9E5A);}
.sess-chip.on{color:var(--green-dark,#157347);}
/* imagem real do produto no card e na foto */
.pcard .ico img{width:100%;height:100%;object-fit:contain;border-radius:10px;background:#fff;}
.pmodal .photo img{max-width:100%;max-height:100%;object-fit:contain;}
/* aviso de sessão flutuante (acima das telas) */
.sess-warn{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:12px;z-index:140;box-shadow:0 8px 24px -12px rgba(0,0,0,.35);}
/* steppers de quantidade dentro do item do carrinho */
.tqb{border:none;background:var(--bg);border-radius:6px;width:22px;height:22px;font-weight:900;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;vertical-align:middle;}

/* ================= tela de LOGIN real ================= */
.login-screen{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:24px;}
.login-card{width:min(360px,90vw);display:flex;flex-direction:column;gap:12px;}
.login-logo{font-size:30px;font-weight:900;letter-spacing:-.02em;color:#fff;text-align:center;}
.login-logo span{color:var(--yellow);}
.login-sub{font-size:13px;font-weight:700;color:#B9C2CC;text-align:center;margin-bottom:8px;}
.login-field{display:flex;flex-direction:column;gap:5px;}
.login-field span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8A929E;}
.login-field input{background:var(--navy-2);border:1.5px solid #33404D;border-radius:12px;padding:13px 14px;font-size:16px;font-family:inherit;color:#fff;outline:none;}
.login-field input:focus{border-color:var(--yellow);}
.login-err{min-height:18px;font-size:12.5px;font-weight:700;color:#FF8A80;text-align:center;}
.login-btn{margin-top:2px;background:var(--yellow);color:var(--ink);border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:900;font-family:inherit;cursor:pointer;}
.login-btn:disabled{opacity:.6;cursor:default;}
.login-foot{font-size:11.5px;color:#6B7683;text-align:center;margin-top:2px;}
/* botão sair no painel */
.sess-chip.sair{cursor:pointer;}

/* ================= SHELL DESKTOP DA PLATAFORMA ELO =================
   Mesma identidade do app instalado: fundo #f6f6f4, sidebar branca 252px,
   item ativo #fff3cc c/ borda #FFC107, Plus Jakarta Sans. No celular nada
   muda (rail escondida; tabbar de sempre). */
#eloRail{display:none;}
@media (min-width: 960px){
  body{justify-content:flex-start;background:#f6f6f4;}
  #eloRail{width:252px;flex-shrink:0;height:100dvh;background:#ffffff;border-right:1px solid #ebebe8;color:#111;display:flex;flex-direction:column;padding:26px 14px 18px;overflow-y:auto;font-family:'Plus Jakarta Sans','Nunito Sans',sans-serif;}
  .erail-logo{display:flex;align-items:baseline;gap:8px;padding:0 12px 14px;}
  .erail-mark{font-size:26px;font-weight:800;letter-spacing:-.03em;color:#111;}
  .erail-sub{font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.14em;}
  .erailgrp{font-size:10px;font-weight:800;color:#b3b2ac;text-transform:uppercase;letter-spacing:.12em;padding:16px 12px 6px;}
  .erailitem{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;color:#4b5563;border-left:3px solid transparent;transition:background .15s,color .15s;user-select:none;}
  .erailitem:hover{background:#f6f6f4;}
  .erailitem.on{background:#fff3cc;border-left-color:#FFC107;color:#8a6508;font-weight:700;}
  .erailfoot{border-top:1px solid #f0f0ee;padding-top:14px;display:flex;flex-direction:column;gap:12px;margin-top:auto;}
  .erailavatar{width:36px;height:36px;border-radius:10px;background:#FFC107;color:#111;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;}
  .erailuname{font-size:12.5px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .erailucnpj{font-size:11px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .erailsair{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;color:#6b7280;background:none;border:none;cursor:pointer;font-family:inherit;width:100%;text-align:left;}
  .erailsair:hover{background:#f6f6f4;color:#111;}
  /* conteúdo ocupa o resto; colunas internas centradas até 1060px */
  #app{max-width:none;flex:1;box-shadow:none;background:#f6f6f4;}
  #tabbar{display:none !important;}
  .screen{background:#f6f6f4;}
  .hdr{padding-left:max(28px, calc((100% - 1060px)/2));padding-right:max(28px, calc((100% - 1060px)/2));}
  .scroll{padding-left:max(28px, calc((100% - 1060px)/2)) !important;padding-right:max(28px, calc((100% - 1060px)/2)) !important;}
}