/* Fonte Inter é carregada via <link> nos HTMLs (não bloqueia renderização) */
*{box-sizing:border-box;margin:0;padding:0}

[data-theme="dark"]{
  --bg:#0D1117;--surface:#161B22;--surface2:#1C2128;--border:#21262D;--border2:#30363D;
  --text:#F0F6FC;--text2:#C9D1D9;--muted:#8B949E;--faint:#484F58;
  --accent:#58A6FF;--accent-bg:rgba(56,139,253,.12);
  --green:#3FB950;--green-bg:#1A4731;--red:#F85149;--red-bg:#4D1F1F;
  --orange:#F0883E;--orange-bg:#3D2A00;--yellow:#E3B341;--yellow-bg:#2D2007;
  --input-bg:#0D1117;--shadow:rgba(0,0,0,.5);--modal-bg:rgba(0,0,0,.75)
}
[data-theme="light"]{
  --bg:#F6F8FA;--surface:#fff;--surface2:#F6F8FA;--border:#D0D7DE;--border2:#C6CBD1;
  --text:#1F2328;--text2:#24292F;--muted:#656D76;--faint:#9198A1;
  --accent:#0969DA;--accent-bg:rgba(9,105,218,.08);
  --green:#1A7F37;--green-bg:#DCFFE4;--red:#CF222E;--red-bg:#FFEBE9;
  --orange:#BC4C00;--orange-bg:#FFF1E5;--yellow:#7D4E00;--yellow-bg:#FFF8C5;
  --input-bg:#fff;--shadow:rgba(0,0,0,.1);--modal-bg:rgba(0,0,0,.4)
}

body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text2);display:flex;height:100vh;height:100dvh;overflow:hidden;transition:background .2s,color .2s}

/* ── LOGIN ── */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:36px 32px;width:100%;max-width:380px;box-shadow:0 24px 64px var(--shadow)}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px;justify-content:center}
.login-logo-icon{width:40px;height:40px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px}
.login-title{font-size:20px;font-weight:800;color:var(--text);text-align:center;margin-bottom:6px}
.login-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:24px}
.login-error{background:var(--red-bg);border:1px solid var(--red);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red);display:none;margin-bottom:14px}
.login-error.show{display:block}

/* ── SIDEBAR ── */
.sidebar{width:212px;min-width:212px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);transition:background .2s,border-color .2s;flex-shrink:0}
.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;margin-bottom:2px}
.logo-icon{width:32px;height:32px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:16px}
.logo-text{font-size:14px;font-weight:800;color:var(--text)}.logo-sub{font-size:10px;color:var(--muted)}
.sidebar-section{padding:14px 10px 6px;border-top:1px solid var(--border);padding-top:10px}
.sidebar-section:first-of-type{border-top:none}
.section-label{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.8px;font-weight:600;padding:0 8px;margin-bottom:3px;margin-top:4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;font-size:13px;color:var(--muted);font-weight:500;cursor:pointer;margin-bottom:1px;transition:background .12s,color .12s,border-color .12s;user-select:none;border-left:2px solid transparent;padding-left:9px;text-decoration:none}
.nav-item:hover{background:var(--accent-bg);color:var(--text);border-left-color:var(--border2)}
.nav-item.active{background:var(--accent-bg);color:var(--accent);font-weight:600;border-left-color:var(--accent)}
.icon{display:inline-block;vertical-align:-0.125em;flex-shrink:0}
.nav-icon{font-size:14px;width:18px;text-align:center;display:flex;align-items:center;justify-content:center}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px}
.nb-red{background:var(--red-bg);color:var(--red)}.nb-blue{background:var(--accent-bg);color:var(--accent)}.nb-orange{background:var(--orange-bg);color:var(--orange)}.nb-yellow{background:var(--yellow-bg);color:var(--yellow)}
.sidebar-footer{margin-top:auto;padding:14px 10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:7px;background:var(--bg);border:1px solid var(--border);cursor:pointer}
.theme-toggle:hover{background:var(--accent-bg)}
.theme-toggle-label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
.toggle-track{width:34px;height:18px;border-radius:99px;background:var(--border2);position:relative;transition:background .2s}
.toggle-track.on{background:var(--accent)}.toggle-thumb{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:left .2s}
.toggle-track.on .toggle-thumb{left:18px}
.user-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer}
.user-row:hover{background:var(--accent-bg)}
.user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.user-name{font-size:12px;font-weight:600;color:var(--text)}.user-plan{font-size:10px;color:var(--muted)}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{padding:12px 24px;border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;transition:background .2s;box-shadow:0 1px 0 var(--border)}
.topbar-left{display:flex;align-items:center;gap:12px}
.page-title{font-size:16px;font-weight:700;color:var(--text)}.page-sub{font-size:11px;color:var(--muted);margin-top:1px}
.topbar-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hamburger{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;font-size:18px;flex-shrink:0}
.topbar-hint{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--faint);cursor:pointer;padding:5px 10px;border-radius:7px;border:1px solid var(--border);background:var(--surface2);transition:border-color .15s,background .15s}
.topbar-hint:hover{border-color:var(--border2);background:var(--accent-bg)}
.kbd{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:'Inter',sans-serif;background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:1px 4px;color:var(--muted);line-height:1.4}

/* ── PAGE ── */
.page-wrap{flex:1;overflow:hidden;position:relative}
.page-content{height:100%;overflow-y:auto;animation:pm3d-fade .16s ease-out}
@keyframes pm3d-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.content{padding:20px 24px}

/* ── PAGE TRANSITIONS ── */
body{animation:bodyFadeIn .18s ease-out}
@keyframes bodyFadeIn{from{opacity:0}to{opacity:1}}
body.navigating{opacity:0;transition:opacity .12s ease-in;pointer-events:none}

/* ── BUTTONS ── */
.btn{padding:6px 13px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:background .15s,border-color .15s,color .15s,transform .1s;white-space:nowrap;font-family:'Inter',sans-serif}
.btn:hover{opacity:1}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:#2ea043}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#1f6feb}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#da3633}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--surface2);border-color:var(--border)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:active{transform:translateY(1px)}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:background .2s,border-color .2s,box-shadow .2s}
.card:hover{box-shadow:0 8px 24px var(--shadow)}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header-left{display:flex;align-items:center;gap:10px}
.card-icon{font-size:16px}.card-title{font-size:13px;font-weight:700;color:var(--text)}.card-subtitle{font-size:11px;color:var(--muted);margin-top:1px}
.card-body{padding:18px;display:flex;flex-direction:column;gap:14px}

/* ── METRICS ── */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;transition:border-color .15s;position:relative;overflow:hidden}
.metric-card:hover{border-color:var(--accent)}
.metric-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background .15s}
.metric-card:hover::after{background:var(--accent)}
.mh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.ml{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.mv{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1}
.mf{margin-top:7px;display:flex;align-items:center;gap:5px}
.mfl{font-size:10px;color:var(--faint)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px}
.bg-green{background:var(--green-bg);color:var(--green)}.bg-red{background:var(--red-bg);color:var(--red)}
.bg-blue{background:var(--accent-bg);color:var(--accent)}.bg-orange{background:var(--orange-bg);color:var(--orange)}
.bg-yellow{background:var(--yellow-bg);color:var(--yellow)}

/* ── STATUS PILLS ── */
.sp{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:99px}
.sd{width:5px;height:5px;border-radius:50%}
.s-print{background:var(--green-bg);color:var(--green)}.s-print .sd{background:var(--green);animation:pulse 1.5s infinite}
.s-wait{background:var(--orange-bg);color:var(--orange)}.s-wait .sd{background:var(--orange)}
.s-done{background:var(--border);color:var(--muted)}.s-done .sd{background:var(--muted)}
.s-deliv{background:var(--accent-bg);color:var(--accent)}.s-deliv .sd{background:var(--accent)}
.s-maint{background:var(--yellow-bg);color:var(--yellow)}.s-maint .sd{background:var(--yellow)}
.s-pago{background:var(--green-bg);color:var(--green)}.s-pago .sd{background:var(--green)}
.s-pend{background:var(--orange-bg);color:var(--orange)}.s-pend .sd{background:var(--orange)}
.s-parc{background:var(--yellow-bg);color:var(--yellow)}.s-parc .sd{background:var(--yellow)}
.s-cancel{background:var(--red-bg);color:var(--red)}.s-cancel .sd{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── PANEL ── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:background .2s}
.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.panel-title{font-size:13px;font-weight:700;color:var(--text)}
.panel-link{font-size:11px;color:var(--accent);cursor:pointer;text-decoration:none}.panel-link:hover{text-decoration:underline}

/* ── TABLE ── */
.tbl-head{display:grid;padding:8px 16px;border-bottom:1px solid var(--border)}
.tbl-th{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.tbl-row{display:grid;padding:11px 16px;border-bottom:1px solid var(--border);align-items:center;cursor:pointer;transition:background .1s}
.tbl-row:last-child{border:none}
.tbl-row:hover{background:var(--accent-bg);box-shadow:inset 2px 0 0 var(--accent)}
.tbl-td{font-size:12px;color:var(--text2)}
.tbl-name{font-size:12px;font-weight:600;color:var(--text)}.tbl-sub{font-size:10px;color:var(--muted);margin-top:2px}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:6px}
.label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.select-wrap,.input-wrap{position:relative}
select,input[type=number],input[type=text],input[type=email],input[type=tel],input[type=password],textarea{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;padding:9px 32px 9px 12px;font-size:13px;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none}
select:focus,input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:10px}
.input-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);pointer-events:none}
/* Sufixos largos (R$/kWh, R$/h) precisam de mais espaço à direita */
.input-wrap.iw-wide input{padding-right:52px}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
/* Campo de data com o mesmo visual dos demais inputs */
input[type=date]{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--text);font-family:'Inter',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
input[type=date]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);opacity:.55;cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:.9}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--modal-bg);z-index:200;align-items:center;justify-content:center;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px var(--shadow)}
.modal-header{padding:18px 20px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.modal-close{width:28px;height:28px;border-radius:6px;background:var(--surface2);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.modal-close:hover{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ── MISC ── */
.divider{height:1px;background:var(--border)}
input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:var(--border2);border-radius:99px;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.slider-row{display:flex;align-items:center;gap:10px}
.strack{height:4px;background:var(--border2);border-radius:99px}.sfill{height:4px;border-radius:99px;transition:width .4s}
.stock-badge{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid;transition:all .2s}
.stock-ok{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.stock-warn{background:var(--orange-bg);border-color:var(--orange);color:var(--orange)}
.stock-crit{background:var(--red-bg);border-color:var(--red);color:var(--red)}

/* ── CALCULATOR ── */
.cost-big{text-align:center;padding:20px 16px;background:var(--surface2);border-radius:10px;border:1px solid var(--border)}
.cost-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-bottom:8px}
.cost-number{display:flex;align-items:baseline;justify-content:center;gap:4px}
.cost-currency{font-size:16px;font-weight:600;color:var(--muted);line-height:1}
.cost-amount{font-size:40px;font-weight:900;color:var(--text);letter-spacing:-1.5px;line-height:1}
.sale-big{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--accent-bg);border:1px solid var(--accent);border-radius:10px}
.sale-left{display:flex;flex-direction:column;gap:2px}
.sale-label{font-size:10px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.sale-number{display:flex;align-items:baseline;gap:3px}
.sale-currency{font-size:13px;font-weight:600;color:var(--accent);opacity:.8}
.sale-amount{font-size:28px;font-weight:900;color:var(--accent);letter-spacing:-1px;line-height:1}
.profit-badge{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.profit-label{font-size:10px;color:var(--muted)}.profit-val{font-size:16px;font-weight:800;color:var(--green)}
.breakdown{display:flex;flex-direction:column;gap:5px}
.bk-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.bk-label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.bk-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.bk-val{font-size:11px;font-weight:600;color:var(--text2)}
.action-row{display:flex;gap:8px;margin-top:4px}
.action-row .btn{flex:1;padding:10px;font-size:12px}
.result-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;position:sticky;top:20px}
.result-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.result-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.calc-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}

/* ── FILAMENTO/IMPRESSORA CARDS ── */
.fil-filtro-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fil-filtro-btn{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.fil-filtro-btn:hover{border-color:var(--accent);color:var(--text)}
.fil-filtro-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fil-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .15s,transform .15s,box-shadow .15s}
.fil-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.fil-card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fil-color-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,.1)}
.fil-name{font-size:13px;font-weight:700;color:var(--text)}.fil-meta{font-size:11px;color:var(--muted);margin-top:1px}
.fil-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.fil-grams{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.5px}.fil-of{font-size:11px;color:var(--muted)}
.printer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.printer-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;transition:border-color .15s,transform .15s,box-shadow .15s}
.printer-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.pcard-name{font-size:14px;font-weight:700;color:var(--text)}.pcard-fab{font-size:11px;color:var(--muted);margin-top:2px}
.pcard-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.pcard-stat{background:var(--surface2);border-radius:8px;padding:10px;border:1px solid var(--border)}
.pcard-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.pcard-stat-val{font-size:16px;font-weight:800;color:var(--text)}.pcard-stat-unit{font-size:10px;color:var(--muted)}
.pcard-bar-wrap{margin-bottom:12px}
.pcard-bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px}
.pcard-actions{display:flex;gap:8px}.pcard-actions .btn{flex:1}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:12px 20px;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 8px 32px var(--shadow);z-index:300;transition:transform .3s,opacity .3s;opacity:0;pointer-events:none;max-width:400px;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast-success{border-color:var(--green)!important;color:var(--green)!important}
.toast-error{border-color:var(--red)!important;color:var(--red)!important}
.toast-warn{border-color:var(--orange)!important;color:var(--orange)!important}
.toast-icon{display:inline-flex;vertical-align:-2px;margin-right:6px}

/* ── COLOR PICKER ── */
.color-picker-row{display:flex;gap:8px;flex-wrap:wrap}
.color-opt{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s}
.color-opt:hover{transform:scale(1.15)}.color-opt.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}

/* ── FILTER TABS ── */
.filter-tabs{display:flex;gap:4px;padding:4px;background:var(--surface2);border-radius:9px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
.filter-tabs::-webkit-scrollbar{display:none}
.ftab{padding:5px 14px;border-radius:7px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .12s,color .12s;user-select:none;white-space:nowrap;flex-shrink:0}
.ftab:hover{color:var(--text)}.ftab.active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.2)}

/* ── SUMMARY ROW ── */
.summary-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.summary-chip{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.summary-chip-val{font-size:18px;font-weight:800;color:var(--text)}.summary-chip-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* ── CHART ── */
.chart-wrap{display:flex;flex-direction:column;gap:6px}
.chart-bar-row{display:flex;align-items:center;gap:10px}
.chart-bar-label{font-size:11px;color:var(--muted);width:70px;flex-shrink:0}
.chart-bar-track{flex:1;height:8px;background:var(--border2);border-radius:99px;overflow:hidden}
.chart-bar-fill{height:8px;border-radius:99px;transition:width .5s}
.chart-bar-val{font-size:11px;font-weight:600;color:var(--text2);width:60px;text-align:right;flex-shrink:0}

/* ── EMPTY STATES ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 24px;text-align:center;gap:6px}
.empty-state-icon{font-size:34px;opacity:.3;margin-bottom:6px;line-height:1}
.empty-state-title{font-size:13px;font-weight:600;color:var(--muted)}
.empty-state-sub{font-size:11px;color:var(--faint);max-width:240px;line-height:1.6;margin-top:2px}
.empty-state-action{margin-top:12px}

/* ── SCROLLBAR ── */
*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* ── TOOLTIPS ── */
/* O balão é renderizado via JS (tipPop em layout.js) com position:fixed e clamp
   na viewport, pra nunca ser cortado pelo overflow do modal. */
.tip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--border2);color:var(--muted);font-size:9px;font-weight:700;cursor:help;position:relative;margin-left:5px;flex-shrink:0;vertical-align:middle}
.tip-pop{position:fixed;z-index:9999;background:var(--surface);border:1px solid var(--border2);color:var(--text2);font-size:11px;font-weight:400;line-height:1.5;padding:8px 11px;border-radius:8px;width:240px;max-width:calc(100vw - 20px);white-space:normal;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:0 4px 20px var(--shadow)}
.tip-pop.show{opacity:1}

/* ── SYNC STATUS (salvando/salvo/offline) ── */
.sync-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);padding:4px 10px;border-radius:99px;border:1px solid var(--border);background:var(--surface2);white-space:nowrap}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sync-ok{background:var(--green)}
.sync-saving{background:var(--accent);animation:pulse 1s infinite}
.sync-error{background:var(--red)}

/* ── SPINNER ── */
.pm3d-spinner{width:28px;height:28px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:pm3d-spin .8s linear infinite}
@keyframes pm3d-spin{to{transform:rotate(360deg)}}

/* ── ORIGEM DA PEÇA (estoque pronto vs produzir) ── */
.origem-pill{flex:1;padding:9px 12px;border-radius:8px;border:1px solid var(--border2);cursor:pointer;text-align:center;font-size:12px;font-weight:600;color:var(--text2);transition:border-color .15s,background .15s,color .15s}
.origem-pill:hover{border-color:var(--accent)}
.origem-pill.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.origem-pill-sub{font-size:10px;color:var(--muted);font-weight:400;margin-top:2px}
.origem-pill.active .origem-pill-sub{color:var(--accent);opacity:.85}

/* ── OVERLAY ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}
.overlay.show{display:block}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:var(--surface);border-top:1px solid var(--border);z-index:120;align-items:stretch;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2px;text-decoration:none;color:var(--muted);font-size:9px;font-weight:600;padding:6px 2px;border-radius:10px;transition:color .15s,background .15s;-webkit-tap-highlight-color:transparent;min-height:44px}
.bottom-nav-item.active{color:var(--accent)}
.bottom-nav-item:active{background:var(--surface2)}
.bottom-nav-icon{font-size:18px;line-height:1}
.bottom-nav-label{font-size:9px;font-weight:600;letter-spacing:.2px}
.bottom-nav-fab{background:var(--accent);color:#fff;width:44px;height:44px;border-radius:50%;flex:0 0 44px;margin:auto 8px;padding:0;box-shadow:0 2px 10px rgba(88,166,255,.4)}
.bottom-nav-fab .bottom-nav-icon{font-size:22px;font-weight:300}
.bottom-nav-fab:active{background:var(--accent);opacity:.85}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .sidebar{display:none}
  .sidebar.open{display:flex;position:fixed;z-index:150;left:0;top:0;bottom:0;box-shadow:4px 0 24px rgba(0,0,0,.5)}
  .hamburger{display:flex}
  .calc-grid{grid-template-columns:1fr}
  .result-panel{position:static}
  .metrics-row{grid-template-columns:repeat(2,1fr)}
  .fil-grid{grid-template-columns:repeat(2,1fr)}
  .printer-grid{grid-template-columns:1fr}
  .content{padding:14px 16px}
  .topbar{padding:12px 16px}

  /* Produtos Prontos: esconder colunas Peso/Tempo (3a e 4a) */
  div[style*="grid-template-columns:2fr 1.2fr .8fr .8fr .8fr 1fr .8fr"]{grid-template-columns:2fr 1.2fr .8fr 1fr .8fr!important}
  div[style*="grid-template-columns:2fr 1.2fr .8fr .8fr .8fr 1fr .8fr"]>*:nth-child(3),
  div[style*="grid-template-columns:2fr 1.2fr .8fr .8fr .8fr 1fr .8fr"]>*:nth-child(4){display:none}
}

@media(max-width:600px){
  /* Mostrar bottom nav, esconder topbar hint */
  .bottom-nav{display:flex}
  .topbar-hint{display:none}
  .topbar{padding:10px 14px}
  /* Reserva o espaço DENTRO da rolagem (no scroller), não no contêiner — assim o
     conteúdo rola por baixo da barra fixa e não sobra faixa morta acima dela. */
  .page-content{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

  /* Grids → 1 coluna */
  .form-row{grid-template-columns:1fr}
  .metrics-row{grid-template-columns:1fr 1fr}
  .fil-grid{grid-template-columns:1fr}
  .printer-grid{grid-template-columns:1fr}
  .action-row{flex-direction:column}

  /* Dashboard grids + layouts lista|formulário (Insumos 300px, Produtos 340px) → 1 coluna */
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns:1fr 340px"]{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
  div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}

  /* Calculadora */
  .cost-amount{font-size:28px}
  .sale-amount{font-size:20px}
  .cost-big,.sale-big{flex-direction:column;gap:8px}

  /* Modais fullscreen */
  .modal-overlay{align-items:flex-end}
  .modal{width:100%!important;max-width:100%!important;border-radius:16px 16px 0 0;max-height:92vh;overflow-y:auto;margin:0}
  .modal-body{padding:14px 16px}
  .modal-close{width:40px;height:40px;font-size:16px}
  .modal-footer .btn{min-height:44px}

  /* Inputs — evitar zoom no iOS */
  input,select,textarea{font-size:16px!important}

  /* Touch targets maiores */
  .btn{min-height:40px}
  .nav-item{min-height:44px}
  .tip{width:20px;height:20px;font-size:11px}

  /* Sync status compacto */
  .sync-status{font-size:0;padding:6px;gap:0}
  .sync-status .sync-dot{width:9px;height:9px}

  /* Tabelas — ocultar colunas secundárias */
  .tbl-th:nth-child(3),.tbl-td:nth-child(3),
  .tbl-th:nth-child(4),.tbl-td:nth-child(4){display:none}

  /* Texto menor em chips/badges */
  .summary-chip{padding:10px 12px}
}

/* ── App instalado na tela inicial (iOS standalone): respeita a barra de status ── */
/* Só vale quando rodando como app (display-mode: standalone) — não afeta o navegador. */
@media (display-mode: standalone) {
  .topbar       { padding-top: calc(10px + env(safe-area-inset-top)); }
  .sidebar-logo { padding-top: calc(18px + env(safe-area-inset-top)); }
}