:root{
  --bg:#0c0d13;
  --panel:#11121a;
  --panel2:#171821;
  --line:#252736;
  --muted:#8d93ad;
  --text:#f7f7ff;
  --soft:#c9cee6;
  --gold:#ffb000;
  --gold2:#7a5a12;
  --green:#36d68b;
  --blue:#6a91ff;
  --red:#ff5b6b;
  --purple:#a584ff;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{background:#0e0f16;border-right:1px solid var(--line);padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.brand{display:flex;gap:12px;align-items:center;padding:8px 10px 22px;border-bottom:1px solid var(--line)}
.brand-icon,.user-badge{width:38px;height:38px;border-radius:12px;background:var(--gold);color:#111;font-weight:900;display:grid;place-items:center;box-shadow:0 10px 30px rgba(255,176,0,.25)}
.brand strong,.side-footer strong{display:block;font-size:15px}
.brand small,.side-footer small{display:block;color:#575d76;font-size:11px;margin-top:3px}
.nav-group{margin-top:26px;display:flex;flex-direction:column;gap:5px}
.nav-group>span{text-transform:uppercase;color:#4f5672;font-weight:800;font-size:11px;letter-spacing:.09em;padding:0 8px 7px}
.nav,.nav-link{border:1px solid transparent;background:transparent;color:#9da4c0;text-decoration:none;text-align:left;padding:12px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;font-weight:650}
.nav:hover,.nav-link:hover{background:#151720;color:#fff}
.nav.active{background:rgba(255,176,0,.13);border-color:rgba(255,176,0,.35);color:var(--gold)}
.side-footer{margin-top:auto;border-top:1px solid var(--line);padding:16px 8px 0;display:flex;gap:12px;align-items:center}
.user-badge{width:32px;height:32px;border-radius:9px}
.main{min-width:0}
.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(12,13,19,.86);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}
.topbar h1{font-size:21px;margin:0 0 3px}
.topbar p{margin:0;color:var(--muted);font-size:13px}
.top-actions,.row-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.primary,.ghost,.danger{border:1px solid transparent;border-radius:11px;padding:10px 14px;font-weight:800;color:#101116}
.primary{background:var(--gold);box-shadow:0 8px 25px rgba(255,176,0,.2)}
.ghost{background:#191b26;border-color:#303244;color:#d7dbf5}
.danger{background:#2a1119;color:#ff9aa4;border-color:#5a2530}
.mini{font-size:12px;padding:7px 10px;border-radius:9px}
.page{display:none;padding:28px;max-width:1280px;margin:0 auto}
.page.active{display:block}
.period-card,.panel,.kpi,.mini-stats>div{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.02)}
.period-card{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:18px;gap:15px;flex-wrap:wrap}
.period-buttons,.date-range,.filters{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.period{background:#11131c;color:#969cb8;border:1px solid #2b2d3d;border-radius:999px;padding:9px 15px;font-weight:800}
.period.active{background:var(--gold);border-color:var(--gold);color:#111}
input,select,textarea{width:100%;background:#181a24;border:1px solid #2c2f40;border-radius:10px;color:#fff;padding:11px 12px;outline:none}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:rgba(255,176,0,.75);box-shadow:0 0 0 3px rgba(255,176,0,.08)}
.date-range input{width:160px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{padding:18px 20px;position:relative;overflow:hidden;min-height:116px}
.kpi:after{content:"";position:absolute;right:-25px;top:-25px;width:90px;height:90px;background:rgba(255,176,0,.06);border-radius:999px}
.kpi:nth-child(2):after{background:rgba(54,214,139,.08)}
.kpi:nth-child(3):after{background:rgba(106,145,255,.08)}
.kpi:nth-child(4):after{background:rgba(165,132,255,.08)}
.kpi span,.mini-stats span{display:block;text-transform:uppercase;color:#59607c;font-size:11px;font-weight:900;letter-spacing:.08em}
.kpi strong{display:block;margin-top:12px;font-size:28px}
.kpi small{display:block;color:var(--muted);margin-top:4px;font-size:13px}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.panel{overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);gap:12px}
.panel-head h3{margin:0;font-size:16px}
.panel-head span{color:#98a0c0;font-size:13px}
.payment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
.payment-card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.payment-card .dot{width:9px;height:9px;border-radius:999px;background:var(--green);display:inline-block;margin-right:6px}
.payment-card strong{font-size:20px;display:block;margin:12px 0 5px}
.bar{height:7px;background:#282b3c;border-radius:999px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--gold);border-radius:999px}
.diagnostics,.rank-list,.compact-list{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.diag,.rank-item,.list-item{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.diag strong,.rank-item strong,.list-item strong{font-size:14px}
.diag small,.rank-item small,.list-item small{color:var(--muted);display:block;margin-top:3px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}
.badge.green{background:rgba(54,214,139,.12);color:var(--green)}
.badge.red{background:rgba(255,91,107,.12);color:var(--red)}
.badge.gold{background:rgba(255,176,0,.13);color:var(--gold)}
.badge.blue{background:rgba(106,145,255,.13);color:#88a6ff}
.clean-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:16px}
.clean-header h2{margin:0 0 3px;font-size:25px}
.clean-header p{margin:0;color:var(--muted)}
.mini-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.mini-stats>div{padding:16px}
.mini-stats strong{display:block;font-size:22px;margin-top:8px}
.filters{margin-bottom:16px}
.filters input{max-width:280px}
.filter-pill.active{background:rgba(255,176,0,.15);border-color:rgba(255,176,0,.5);color:var(--gold)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.product-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:310px;display:flex;flex-direction:column}
.product-image{height:155px;background:#242632;display:grid;place-items:center;color:#555c78}
.product-image:before{content:"▢";font-size:44px;opacity:.8}
.product-body{padding:15px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-body small{text-transform:uppercase;color:#555d79;font-weight:900;letter-spacing:.08em}
.product-body strong{font-size:15px}
.product-price{font-size:18px;font-weight:900}
.product-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;color:var(--muted);font-size:12px}
.stock-ok{color:var(--green)!important;font-weight:900}
.stock-low{color:var(--gold)!important;font-weight:900}
.stock-out{color:var(--red)!important;font-weight:900}
.table-panel{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:14px;text-align:left;vertical-align:middle}
th{color:#59607c;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
td{color:#eef1ff}
td small{display:block;color:#5f6683;margin-top:4px}
.icon-btn{border:0;background:#222433;color:#d9ddf6;border-radius:8px;padding:7px 9px;font-weight:800}
.icon-btn.warn{background:rgba(255,176,0,.13);color:var(--gold)}
.icon-btn.danger{background:rgba(255,91,107,.13);color:var(--red)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);z-index:50}
.drawer{position:fixed;right:0;top:0;height:100vh;width:min(560px,100vw);background:#11121a;border-left:1px solid var(--line);box-shadow:var(--shadow);z-index:60;display:flex;flex-direction:column}
.drawer.wide{width:min(820px,100vw)}
.hidden{display:none!important}
.drawer-head{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.drawer-head h2{margin:0;font-size:20px}
.drawer-body{padding:22px 24px;overflow:auto;display:flex;flex-direction:column;gap:15px}
label{display:flex;flex-direction:column;gap:7px;color:#8f96b8;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid.two{grid-template-columns:1fr 1fr}
.form-section-title{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;color:#606987;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em}
.sale-item,.variant-row{display:grid;grid-template-columns:1.4fr .8fr .6fr .4fr;gap:8px;align-items:end;background:#171923;border:1px solid var(--line);border-radius:13px;padding:10px;margin-bottom:9px}
.variant-row{grid-template-columns:.7fr .9fr .5fr .5fr .3fr}
.totals-box{background:#181a24;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.totals-box div{display:flex;justify-content:space-between;gap:12px}
.totals-box span{color:var(--muted)}
.totals-box strong{color:#fff}
.totals-box div:last-child strong{color:var(--green);font-size:20px}
.drawer-actions{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toggle-card{flex-direction:row;align-items:center;background:#181a24;border:1px solid var(--line);border-radius:12px;padding:12px;text-transform:none;color:#fff;font-size:14px}
.toggle-card input{width:auto;accent-color:var(--gold)}
.summary-grid{padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.summary-item{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.summary-item span{color:var(--muted);font-size:12px}
.summary-item strong{display:block;margin-top:8px;font-size:22px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#181a24;border:1px solid var(--line);color:#fff;border-radius:999px;padding:12px 18px;z-index:100;box-shadow:var(--shadow)}
.tiny{font-size:12px;color:#676f8e;margin:0}
.muted{color:var(--muted)!important}
@media(max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:74px;z-index:30;display:grid;grid-template-columns:repeat(7,1fr);padding:7px;background:#0e0f16}
  .brand,.side-footer,.nav-group>span,.nav-group:nth-of-type(2){display:none}
  .nav-group{display:contents}
  .nav{font-size:11px;padding:8px 4px;justify-content:center;text-align:center}
  .main{padding-bottom:86px}
  .topbar{height:auto;min-height:68px;padding:14px 16px}
  .page{padding:18px 14px}
  .kpi-grid,.grid-two,.mini-stats,.product-grid,.summary-grid{grid-template-columns:1fr}
  .payment-grid,.form-grid,.form-grid.two,.toggle-grid{grid-template-columns:1fr}
  .clean-header{flex-direction:column}
  .sale-item,.variant-row{grid-template-columns:1fr}
}

/* v10.17.02 - aviso de SQL pendente */
.db-warning{
  margin-bottom:18px;
  border-color:rgba(255,176,0,.35)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,176,0,.12),transparent 34%),
    var(--panel)!important;
}
.db-warning b{
  color:var(--gold);
}

/* v10.17.03 - Reabastecimento inteligente */
.restock-list{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.restock-card,
.restock-card-mini{
  background:linear-gradient(180deg,rgba(25,27,38,.98),rgba(13,15,22,.98));
  border:1px solid rgba(255,176,0,.16);
  border-radius:16px;
  padding:14px;
}
.restock-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.restock-card-head strong{
  display:block;
  font-size:15px;
}
.restock-card-head small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-size:12px;
}
.restock-sentence{
  color:#f6d77b;
  background:rgba(255,176,0,.08);
  border:1px solid rgba(255,176,0,.13);
  border-radius:12px;
  padding:10px 11px;
  font-weight:800;
  font-size:13px;
  line-height:1.35;
  margin-bottom:10px;
}
.restock-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.restock-size-box{
  background:#0b0d13;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  padding:10px;
}
.restock-size-box>b,
.restock-size-line>b{
  display:block;
  color:#fff;
  font-size:12px;
  margin-bottom:7px;
}
.restock-color-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:8px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.restock-color-row:first-of-type{
  border-top:0;
}
.restock-color-row span{
  color:#edf0ff;
  font-weight:800;
  font-size:13px;
}
.restock-color-row small{
  color:var(--muted);
  font-size:11px;
}
.restock-color-row strong{
  color:var(--gold);
  font-size:12px;
  white-space:nowrap;
}
.restock-lines-mini{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.restock-size-line{
  background:#0b0d13;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  padding:8px 9px;
}
.restock-size-line span{
  display:block;
  color:#f6d77b;
  font-size:12px;
  line-height:1.3;
}
.product-restock-hint{
  background:rgba(255,176,0,.08);
  border:1px solid rgba(255,176,0,.12);
  border-radius:11px;
  padding:8px;
  margin-top:3px;
}
.product-restock-hint b{
  display:block;
  color:var(--gold);
  font-size:12px;
  margin-bottom:4px;
}
.product-restock-hint span{
  display:block;
  color:#d6d0b7;
  font-size:11px;
  line-height:1.25;
  text-transform:none;
  letter-spacing:0;
  font-weight:700;
}
@media(max-width:980px){
  .restock-grid{
    grid-template-columns:1fr;
  }
  .restock-card-head{
    flex-direction:column;
  }
  .restock-color-row{
    grid-template-columns:1fr;
    gap:3px;
  }
}

/* v10.17.04 - Venda: tamanhos aparecem só após selecionar produto */
.sale-item-product-first{
  display:block!important;
  background:#171923;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  margin-bottom:10px;
}
.sale-product-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
}
.sale-line-fields{
  display:grid;
  grid-template-columns:1fr 100px;
  gap:10px;
  margin-top:10px;
}
.sale-line-fields label{
  margin:0;
}
.sale-variants{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.variant-pill{
  border:1px solid rgba(255,255,255,.12);
  background:#202333;
  color:#aeb6d6;
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
}
.variant-pill.active{
  color:#111;
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 8px 24px rgba(255,176,0,.18);
}
.variant-empty{
  display:block;
  color:var(--red);
  font-weight:800;
  font-size:12px;
  padding:8px 0;
}
@media(max-width:980px){
  .sale-line-fields{
    grid-template-columns:1fr 90px;
  }
}

/* v10.17.05 - Pedido/venda sem exibir custo */
#saleDrawer .admin-only,
#saleDrawer #saleCostView,
#saleDrawer #saleCostView.closest{
  display:none!important;
}
#saleDrawer .totals-box .admin-only{
  display:none!important;
}

/* v10.17.06 - Visual Loja ELEMEN mais fiel ao sistema original */
:root{
  --bg:#08090e;
  --panel:#101118;
  --panel2:#171821;
  --line:#222431;
  --muted:#6f7692;
  --text:#f5f6ff;
  --soft:#b9bfd7;
  --gold:#ffb000;
  --gold-dim:#2b2006;
  --green:#35d38b;
  --blue:#5c8dff;
  --red:#ff5c65;
  --purple:#a985ff;
}

body{
  background:#08090e!important;
  color:#f5f6ff!important;
  font-size:14px;
}

.app-shell{
  grid-template-columns:228px 1fr!important;
  min-height:100vh;
}

.sidebar{
  width:228px!important;
  padding:18px 0 16px!important;
  background:#0c0d12!important;
  border-right:1px solid #20222d!important;
}

.brand{
  padding:0 18px 22px!important;
  border-bottom:1px solid #20222d!important;
}

.brand-icon{
  width:38px!important;
  height:38px!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

.brand strong{
  font-size:17px!important;
  letter-spacing:-.3px;
}

.brand small{
  color:#4f5570!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.04em;
}

.nav-group{
  margin-top:24px!important;
  padding:0 8px!important;
}

.nav-group>span{
  color:#3f455d!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
  padding:0 6px 8px!important;
}

.nav,.nav-link{
  min-height:39px!important;
  padding:10px 12px!important;
  border-radius:8px!important;
  font-size:14px!important;
  color:#878ead!important;
  font-weight:750!important;
  border:1px solid transparent!important;
}

.nav.active{
  background:linear-gradient(90deg,rgba(255,176,0,.18),rgba(255,176,0,.08))!important;
  border-color:rgba(255,176,0,.34)!important;
  color:#ffbd23!important;
}

.nav:hover,.nav-link:hover{
  background:#14161f!important;
  color:#fff!important;
}

.side-footer{
  left:14px!important;
  right:14px!important;
  bottom:18px!important;
  padding-top:16px!important;
  border-top:1px solid #20222d!important;
}

.user-badge{
  width:30px!important;
  height:30px!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

.main{
  background:#08090e!important;
}

.topbar{
  height:60px!important;
  min-height:60px!important;
  padding:0 22px!important;
  border-bottom:1px solid #20222d!important;
  background:#0c0d12!important;
  border-radius:0!important;
  position:sticky!important;
  top:0!important;
  z-index:20!important;
}

.topbar h1{
  font-size:17px!important;
  line-height:1!important;
  margin:0!important;
}

.topbar p{
  display:none!important;
}

.top-actions .ghost,
.top-actions .primary{
  min-height:34px!important;
  padding:8px 13px!important;
  border-radius:9px!important;
  font-size:12px!important;
}

.store-top-order{
  padding-left:14px!important;
  padding-right:14px!important;
}

.store-top-order::before{
  content:"▱";
  margin-right:7px;
  font-weight:900;
}

.page{
  max-width:none!important;
  padding:22px 24px!important;
}

.period-card{
  margin-bottom:14px!important;
  min-height:64px!important;
  padding:13px 18px!important;
  border-radius:15px!important;
  background:#101118!important;
  border:1px solid #242633!important;
  box-shadow:none!important;
}

.period-buttons{
  gap:7px!important;
}

.period{
  padding:7px 13px!important;
  font-size:12px!important;
  border-radius:999px!important;
  background:#11131b!important;
  border-color:#292b39!important;
  color:#8b92b0!important;
}

.period.active{
  background:#191b25!important;
  color:#f0f2ff!important;
  border-color:#3a3d4d!important;
}

.date-range{
  gap:8px!important;
}

.date-range input,
.period-card input{
  width:138px!important;
  min-height:36px!important;
  padding:8px 10px!important;
  border-radius:8px!important;
  font-size:13px!important;
  background:#171923!important;
}

.kpi-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:12px!important;
}

.kpi{
  min-height:104px!important;
  padding:17px 18px!important;
  border-radius:13px!important;
  background:#111219!important;
  border:1px solid #242633!important;
  box-shadow:none!important;
  position:relative!important;
}

.kpi:after{
  width:82px!important;
  height:82px!important;
  right:-30px!important;
  top:-30px!important;
  opacity:.85!important;
}

.kpi span{
  font-size:10px!important;
  color:#454d6a!important;
  letter-spacing:.11em!important;
  font-weight:950!important;
}

.kpi strong{
  margin-top:13px!important;
  font-size:26px!important;
  line-height:1.02!important;
  letter-spacing:-1.1px!important;
}

.kpi small{
  margin-top:5px!important;
  color:#626a85!important;
  font-size:11px!important;
}

.grid-two{
  grid-template-columns:1.4fr .72fr!important;
  gap:10px!important;
  margin-bottom:12px!important;
}

#dashboard .grid-two:first-of-type{
  grid-template-columns:1fr!important;
}

#dashboard .grid-two:nth-of-type(2){
  grid-template-columns:1fr .74fr!important;
}

.panel{
  background:#101118!important;
  border:1px solid #242633!important;
  border-radius:13px!important;
  box-shadow:none!important;
}

.panel-head{
  min-height:44px!important;
  padding:12px 16px!important;
  border-bottom:1px solid #242633!important;
}

.panel-head h3{
  font-size:14px!important;
  letter-spacing:-.2px!important;
}

.panel-head span{
  font-size:12px!important;
  color:#777f9d!important;
}

.payment-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  padding:14px!important;
}

.payment-card{
  min-height:104px!important;
  padding:14px!important;
  border-radius:11px!important;
  background:#171821!important;
  border:1px solid #282a38!important;
}

.payment-card strong{
  font-size:20px!important;
  margin:11px 0 6px!important;
  letter-spacing:-.6px!important;
}

.payment-card small{
  font-size:11px!important;
  color:#555d78!important;
}

.payment-card .bar{
  height:5px!important;
  margin-top:9px!important;
  background:#2b2e3d!important;
}

.diagnostics,.rank-list,.compact-list,.restock-list{
  padding:13px 14px!important;
  gap:8px!important;
}

.diag,.rank-item,.list-item{
  padding:10px 11px!important;
  border-radius:10px!important;
  background:#14161f!important;
  border-color:#242633!important;
}

.diag strong,.rank-item strong,.list-item strong{
  font-size:12.5px!important;
}

.diag small,.rank-item small,.list-item small{
  font-size:11px!important;
  color:#626a85!important;
}

.badge{
  border-radius:999px!important;
  padding:4px 8px!important;
  font-size:10px!important;
}

.product-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

.product-card{
  min-height:300px!important;
  border-radius:12px!important;
  background:#101118!important;
  border:1px solid #242633!important;
  box-shadow:none!important;
}

.product-image{
  height:156px!important;
  background:#242531!important;
}

.product-body{
  padding:13px 14px!important;
  gap:7px!important;
}

.product-body small{
  font-size:10px!important;
  color:#454d6a!important;
}

.product-body strong{
  font-size:13px!important;
  line-height:1.18!important;
}

.product-price{
  font-size:17px!important;
  letter-spacing:-.5px!important;
}

.product-meta{
  font-size:11px!important;
}

.clean-header{
  margin-bottom:14px!important;
  align-items:center!important;
}

.clean-header h2{
  font-size:24px!important;
  letter-spacing:-.8px!important;
}

.clean-header p{
  font-size:13px!important;
  color:#7c84a3!important;
}

.mini-stats{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
  margin-bottom:13px!important;
}

.mini-stats>div{
  padding:14px 16px!important;
  border-radius:12px!important;
  background:#101118!important;
  border-color:#242633!important;
  box-shadow:none!important;
}

.mini-stats span{
  font-size:10px!important;
  color:#454d6a!important;
}

.mini-stats strong{
  font-size:22px!important;
  margin-top:8px!important;
}

.filters{
  gap:8px!important;
  margin-bottom:13px!important;
}

.filters input,.filters select{
  max-width:230px!important;
  min-height:36px!important;
  padding:8px 10px!important;
  border-radius:8px!important;
  font-size:12px!important;
  background:#171923!important;
}

.ghost,.primary,.danger{
  border-radius:9px!important;
  min-height:36px!important;
  padding:8px 12px!important;
  font-size:12px!important;
}

.primary{
  background:#ffb000!important;
  box-shadow:none!important;
}

table{
  font-size:12.5px!important;
}

th{
  font-size:10px!important;
  color:#454d6a!important;
  padding:12px 14px!important;
}

td{
  padding:12px 14px!important;
  border-color:#20222d!important;
}

td small{
  font-size:10.5px!important;
  color:#4f5773!important;
}

.icon-btn{
  padding:6px 8px!important;
  border-radius:7px!important;
  font-size:11px!important;
  background:#202232!important;
}

.drawer{
  width:min(520px,100vw)!important;
  background:#11121a!important;
  border-left:1px solid #242633!important;
  box-shadow:-25px 0 80px rgba(0,0,0,.55)!important;
}

.drawer.wide{
  width:min(780px,100vw)!important;
}

.drawer-head{
  height:68px!important;
  padding:0 22px!important;
  border-bottom:1px solid #242633!important;
}

.drawer-head h2{
  font-size:18px!important;
  letter-spacing:-.3px!important;
}

.drawer-body{
  padding:20px 22px!important;
  gap:13px!important;
}

label{
  font-size:10px!important;
  color:#606887!important;
  letter-spacing:.08em!important;
  gap:7px!important;
}

input,select,textarea{
  min-height:37px!important;
  padding:9px 11px!important;
  border-radius:8px!important;
  background:#171923!important;
  border:1px solid #303343!important;
  font-size:13px!important;
}

.sale-item-product-first{
  background:#151720!important;
  border-color:#2a2d3b!important;
  border-radius:11px!important;
  padding:10px!important;
}

.sale-variants{
  gap:6px!important;
}

.variant-pill{
  padding:6px 9px!important;
  font-size:11px!important;
  background:#202333!important;
  color:#929abb!important;
}

.variant-pill.active{
  background:#ffb000!important;
  color:#0b0c10!important;
}

.totals-box{
  border-radius:11px!important;
  background:#171923!important;
  border-color:#242633!important;
  padding:14px!important;
}

.totals-box div{
  font-size:13px!important;
}

.totals-box div:last-child strong{
  font-size:18px!important;
}

.restock-card,
.restock-card-mini{
  border-radius:12px!important;
  padding:12px!important;
  background:linear-gradient(180deg,#171821,#101118)!important;
  border-color:rgba(255,176,0,.14)!important;
}

.restock-sentence{
  border-radius:9px!important;
  padding:8px 9px!important;
  font-size:12px!important;
}

.restock-size-box{
  border-radius:10px!important;
  padding:9px!important;
}

.summary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}

.summary-item{
  border-radius:12px!important;
  padding:14px!important;
  background:#171821!important;
  border-color:#242633!important;
}

.summary-item strong{
  font-size:21px!important;
}

/* gráficos/listas no dashboard com proporção de sistema, sem zoom gigante */
#paymentCards,
#topProducts,
#lowStockList{
  font-feature-settings:"tnum" 1;
}

@media(min-width:1500px){
  .page{
    padding-left:26px!important;
    padding-right:26px!important;
  }

  .kpi-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  .product-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
}

@media(max-width:980px){
  .app-shell{
    grid-template-columns:1fr!important;
  }

  .sidebar{
    width:auto!important;
  }

  .page{
    padding:16px 12px!important;
  }

  .kpi-grid,
  .grid-two,
  #dashboard .grid-two:nth-of-type(2),
  .payment-grid,
  .mini-stats,
  .summary-grid,
  .product-grid{
    grid-template-columns:1fr!important;
  }

  .topbar{
    min-height:64px!important;
    height:auto!important;
  }

  .drawer{
    width:100vw!important;
  }
}

/* v10.17.07 - Loja ELEMEN: tela cheia e proporção mais fiel ao sistema original */
@media(min-width:981px){
  .main{
    min-width:0!important;
    width:calc(100vw - 228px)!important;
  }

  .page{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 22px 28px!important;
  }

  #dashboard{
    display:none;
  }

  #dashboard.active{
    display:block!important;
  }

  #dashboard .period-card,
  #dashboard .kpi-grid,
  #dashboard .grid-two,
  #dashboard > .panel,
  #dashboard .product-grid{
    width:100%!important;
    max-width:none!important;
  }

  #dashboard .period-card{
    margin-left:0!important;
    margin-right:0!important;
  }

  #dashboard .kpi-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
  }

  #dashboard .kpi{
    min-height:92px!important;
    padding:14px 17px!important;
  }

  #dashboard .kpi strong{
    font-size:24px!important;
  }

  #dashboard .kpi small{
    font-size:11px!important;
  }

  #dashboard .grid-two{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  #dashboard .grid-two:nth-of-type(2){
    grid-template-columns:1.35fr .75fr!important;
  }

  #dashboard .payment-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  #dashboard .panel{
    min-width:0!important;
  }

  #dashboard .panel:first-child{
    min-height:0!important;
  }

  #dashboard .diagnostics{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .topbar{
    padding-left:22px!important;
    padding-right:22px!important;
  }

  .top-actions{
    gap:8px!important;
  }

  .top-actions .ghost,
  .top-actions .primary{
    padding:8px 14px!important;
  }

  .period-card{
    justify-content:space-between!important;
  }

  .period-buttons{
    flex:0 0 auto!important;
  }

  .date-range{
    margin-left:auto!important;
  }
}

@media(min-width:1500px){
  .app-shell{
    grid-template-columns:224px 1fr!important;
  }

  .sidebar{
    width:224px!important;
  }

  .main{
    width:calc(100vw - 224px)!important;
  }

  .page{
    padding-left:18px!important;
    padding-right:18px!important;
  }

  #dashboard .kpi-grid{
    gap:8px!important;
  }

  #dashboard .kpi{
    min-height:88px!important;
    padding:13px 16px!important;
  }

  #dashboard .kpi strong{
    font-size:23px!important;
  }

  .payment-card{
    min-height:92px!important;
  }

  .panel-head{
    min-height:40px!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
  }
}

/* deixa a dashboard mais "sistema" e menos landing page */
#dashboard .period-card,
#dashboard .kpi,
#dashboard .panel{
  backdrop-filter:none!important;
}

#dashboard .panel-head h3::before{
  color:#7d86a6;
  margin-right:7px;
  opacity:.7;
}

#dashboard .panel-head h3{
  display:flex;
  align-items:center;
}

#dashboard .payment-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#dashboard .kpi{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/* v10.17.10 - Pedidos: ver, editar e taxas */
.sale-row-actions{
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}
.sale-view-body{
  gap:18px!important;
}
.view-section{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}
.view-section:first-child{
  border-top:0;
  padding-top:0;
}
.view-title{
  display:block;
  color:#515a77;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:950;
  margin-bottom:12px;
}
.view-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:8px 0;
}
.view-row span{
  color:#8a91ad;
}
.view-row strong{
  color:#fff;
  text-align:right;
}
.view-row.total strong{
  color:var(--green);
  font-size:20px;
}
.full-view-btn{
  width:100%;
  margin-top:12px;
}
.view-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.view-item:last-child{
  border-bottom:0;
}
.view-item strong{
  display:block;
  color:#fff;
}
.view-item small{
  display:block;
  color:#59617d;
  margin-top:4px;
}
.view-item b{
  color:#fff;
}
.status-action-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.status-action-list button{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  background:#171923;
  color:#fff;
  border:1px solid #2c2f40;
  border-radius:10px;
  padding:12px 13px;
  font-weight:850;
  text-align:left;
}
.status-action-list button.active{
  border-color:var(--gold);
  background:rgba(255,176,0,.12);
  color:var(--gold);
}
.dot{
  width:7px;
  height:7px;
  border-radius:999px;
  display:inline-block;
}
.blue-dot{background:var(--blue)}
.gold-dot{background:var(--gold)}
.green-dot{background:var(--green)}
.red-dot{background:var(--red)}
.tax-config-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:12px 0 8px;
}
.config-tax-title{
  margin-top:18px;
}
.config-tax-title small{
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
}
#installmentsField{
  margin-top:-4px;
}
@media(max-width:980px){
  .tax-config-grid{
    grid-template-columns:1fr 1fr;
  }
  .sale-row-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
}

/* v10.17.15 - Loja ELEMEN mobile organizado */
@media(max-width:980px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    background:#08090e!important;
  }

  body{
    font-size:13px!important;
    -webkit-text-size-adjust:100%!important;
  }

  .app-shell{
    display:block!important;
    min-height:100dvh!important;
  }

  .main{
    width:100%!important;
    min-width:0!important;
    padding:0 0 calc(74px + env(safe-area-inset-bottom))!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:40!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
    gap:10px!important;
    min-height:calc(64px + env(safe-area-inset-top))!important;
    height:auto!important;
    padding:calc(12px + env(safe-area-inset-top)) 12px 10px!important;
    background:rgba(10,11,16,.98)!important;
    border-bottom:1px solid #20222d!important;
    border-radius:0!important;
    backdrop-filter:blur(14px)!important;
  }

  .topbar h1{
    font-size:22px!important;
    line-height:1!important;
    letter-spacing:-.7px!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  .topbar p{
    display:none!important;
  }

  .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
    min-width:0!important;
  }

  .top-actions .ghost,
  .top-actions .primary{
    min-height:38px!important;
    height:38px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
    font-weight:950!important;
    white-space:nowrap!important;
  }

  #refreshBtn{ max-width:92px!important; }
  #quickSaleBtn{ max-width:108px!important; }

  .sidebar{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    z-index:80!important;
    width:100%!important;
    height:calc(68px + env(safe-area-inset-bottom))!important;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(10,11,16,.98)!important;
    border-top:1px solid #20222d!important;
    border-right:0!important;
    display:block!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .brand,.side-footer,.nav-group>span,.nav-group:nth-of-type(2){
    display:none!important;
  }

  .nav-group{
    display:inline-flex!important;
    flex-direction:row!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
    min-width:max-content!important;
    vertical-align:top!important;
  }

  .nav{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:92px!important;
    height:48px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:13px!important;
    font-weight:950!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  .nav[data-page="dashboard"]{min-width:112px!important;}
  .nav[data-page="vendas"]{min-width:92px!important;}
  .nav[data-page="produtos"]{min-width:102px!important;}
  .nav[data-page="estoque"]{min-width:96px!important;}
  .nav[data-page="compras"]{min-width:100px!important;}
  .nav[data-page="fechamento"]{min-width:118px!important;}
  .nav[data-page="relatorios"]{min-width:112px!important;}

  .page{
    width:100%!important;
    max-width:100%!important;
    padding:14px 10px 18px!important;
    margin:0!important;
  }

  .period-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    min-height:0!important;
    padding:14px!important;
    margin:0 0 12px!important;
    border-radius:18px!important;
    background:#101118!important;
  }

  .period-buttons{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }

  .period{
    width:100%!important;
    min-height:40px!important;
    padding:0!important;
    font-size:13px!important;
    border-radius:999px!important;
  }

  .date-range{
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    margin:0!important;
  }

  .date-range span{
    color:#c8cee6!important;
    font-weight:900!important;
    font-size:13px!important;
  }

  .date-range input,.period-card input{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:46px!important;
    padding:8px 9px!important;
    border-radius:12px!important;
    font-size:13px!important;
    text-align:center!important;
    background:#171923!important;
  }

  .kpi-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-bottom:12px!important;
  }

  .kpi{
    min-height:108px!important;
    padding:14px 13px!important;
    border-radius:16px!important;
  }

  .kpi span{
    font-size:9.5px!important;
    letter-spacing:.14em!important;
    line-height:1.1!important;
  }

  .kpi strong{
    margin-top:12px!important;
    font-size:24px!important;
    line-height:1!important;
    letter-spacing:-1px!important;
    word-break:break-word!important;
  }

  .kpi small{
    margin-top:6px!important;
    font-size:11.5px!important;
    line-height:1.2!important;
  }

  .grid-two,#dashboard .grid-two,#dashboard .grid-two:nth-of-type(2){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-bottom:12px!important;
  }

  .panel{
    border-radius:16px!important;
    overflow:hidden!important;
  }

  .panel-head{
    min-height:44px!important;
    padding:12px 13px!important;
  }

  .panel-head h3{ font-size:14px!important; }
  .panel-head span{ font-size:11px!important; }

  .payment-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:12px!important;
  }

  .payment-card{
    min-height:90px!important;
    padding:13px!important;
    border-radius:13px!important;
  }

  .payment-card strong{ font-size:20px!important; }

  .diagnostics,.rank-list,.compact-list,.restock-list{
    padding:12px!important;
    gap:8px!important;
  }

  .diag,.rank-item,.list-item{
    padding:11px!important;
    border-radius:13px!important;
  }

  .clean-header{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }

  .clean-header h2{
    font-size:23px!important;
    line-height:1!important;
    margin:0 0 4px!important;
  }

  .clean-header p{
    font-size:12px!important;
    line-height:1.25!important;
  }

  .mini-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-bottom:12px!important;
  }

  .mini-stats>div{
    min-height:80px!important;
    padding:13px!important;
    border-radius:14px!important;
  }

  .mini-stats strong{ font-size:22px!important; }

  .filters{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-bottom:12px!important;
  }

  .filters input,.filters select{
    width:100%!important;
    max-width:none!important;
    min-height:42px!important;
    font-size:13px!important;
  }

  .product-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }

  .product-card{
    min-height:238px!important;
    border-radius:14px!important;
  }

  .product-image{ height:112px!important; }
  .product-body{ padding:11px!important; gap:6px!important; }
  .product-body strong{ font-size:12px!important; }
  .product-price{ font-size:16px!important; }
  .product-restock-hint{ display:none!important; }

  .table-panel{
    border-radius:15px!important;
    overflow:auto!important;
  }

  table{
    min-width:720px!important;
    font-size:12px!important;
  }

  th,td{ padding:11px 12px!important; }

  .drawer{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    border-left:0!important;
  }

  .drawer-head{
    height:calc(58px + env(safe-area-inset-top))!important;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px!important;
  }

  .drawer-head h2{ font-size:18px!important; }

  .drawer-body{
    padding:14px!important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
    gap:12px!important;
  }

  .form-grid,.form-grid.two{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .sale-line-fields{ grid-template-columns:1fr 88px!important; }
  .variant-pill{ font-size:11px!important; padding:7px 9px!important; }
  .totals-box{ padding:13px!important; border-radius:13px!important; }

  .drawer-actions{
    position:sticky!important;
    bottom:0!important;
    padding:10px 0 0!important;
    background:linear-gradient(180deg,transparent,#11121a 28%)!important;
  }

  .tax-config-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; }
  .summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .restock-grid{ grid-template-columns:1fr!important; }
}

@media(max-width:380px){
  .topbar h1{ font-size:20px!important; }
  .top-actions .ghost,.top-actions .primary{
    padding:0 8px!important;
    font-size:11px!important;
  }
  .kpi strong{ font-size:22px!important; }
  .nav{
    min-width:88px!important;
    font-size:12px!important;
  }
}