:root{
  --bg0:#060913;
  --bg1:#0d1529;
  --bg2:#121b30;
  --text:#f4f7ff;
  --muted:#aebbd1;
  --glass: rgba(19, 27, 46, .48);
  --glass-strong: rgba(12, 18, 34, .72);
  --glass-border: rgba(255,255,255,.16);
  --glass-edge: rgba(255,255,255,.28);
  --shadow-lg: 0 24px 80px rgba(0,0,0,.38);
  --shadow-md: 0 12px 36px rgba(0,0,0,.28);
}
*{ box-sizing:border-box; }
html{ height:100%; }
body{ min-height:100%; }
html{
  background: var(--bg1);
  /* reserva sempre o espaço da barra de rolagem: a largura da página não muda
     quando a barra aparece/some (ex: ao abrir/fechar o modal de baixa) — assim
     a câmera da bipagem não "pula" de largura entre os estados. */
  scrollbar-gutter: stable;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: var(--bg1);
  background-image:
    radial-gradient(1200px 650px at 12% -8%, rgba(67,130,255,.34) 0%, transparent 58%),
    radial-gradient(900px 520px at 92% 5%, rgba(0,152,219, .26) 0%, transparent 60%),
    radial-gradient(700px 420px at 48% 100%, rgba(112, 81, 255, .16) 0%, transparent 66%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg1) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100vh;
  color:var(--text);
  letter-spacing: .01em;
}

/* iOS Safari safe-area top */
body::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #000;
  z-index: 99999;
  pointer-events: none;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:grid;
  gap:10px;
  padding:14px 18px 12px;
  background: linear-gradient(180deg, rgba(16, 24, 42, .80) 0%, rgba(12,18,34,.50) 100%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  color: #e5e7eb !important;
}
.topbar,
.topbar *{
  color: #e5e7eb !important;
}
.topbar__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.topbar__left,
.topbar__right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.topbar h1{
  margin:0;
  font-size:28px;
  letter-spacing:.1px;
  line-height: 1;
}
.topbar__subtitle{
  color: #a5b4c7 !important;
  font-size: 13px;
  margin-top: 4px;
}
.topbar .chip span{
  color: #a5b4c7 !important;
}
.topbar .input,
.topbar select.input{
  color: #e5e7eb !important;
}
.topbar .btn{
  color: #e5e7eb !important;
}
.topbar .input::placeholder{
  color: #94a3b8 !important;
}
.topbar__controls-left{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-width: 1px;
}
.topbar__actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.app-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:0;
  align-items:start;
}
.app-content{
  min-width:0;
}
.side-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: min(320px, 85vw);
  height: 100vh;
  z-index: 40;
  transform: translateX(-110%);
  transition: transform .22s ease;
  margin: 0;
  padding: 90px 10px 14px;
  border-radius: 0 14px 14px 0;
  border:1px solid var(--glass-border);
  border-left: 0;
  background: linear-gradient(165deg, rgba(24,36,62,.76), rgba(12,19,35,.82));
  backdrop-filter: blur(20px) saturate(130%);
  overflow-y: auto;
  display:grid;
  gap:8px;
  box-shadow: var(--shadow-lg), 0 1px 0 rgba(255,255,255,.12) inset;
}
body.menu-open .side-menu{
  transform: translateX(0);
}
.side-menu-backdrop{
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(0,0,0,.5);
}
body.menu-open .side-menu-backdrop{
  display: block;
}
.topbar #menuToggle.is-active{
  border-color: rgba(113,200,238,.72);
  background: linear-gradient(160deg, rgba(58,134,168,.30), rgba(35,92,126,.22));
}
.topbar #goBackBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-chevron-left{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.side-accordion{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
  overflow: hidden;
}
.side-accordion__summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid transparent;
  user-select: none;
}
.side-accordion__summary::-webkit-details-marker{
  display: none;
}
.side-accordion__summary::after{
  content: "▾";
  float: right;
  opacity: .8;
}
.side-accordion:not([open]) .side-accordion__summary::after{
  content: "▸";
}
.side-accordion[open] .side-accordion__summary{
  border-bottom-color: rgba(255,255,255,.08);
}
.side-accordion__body{
  padding: 8px;
  display: grid;
  gap: 8px;
}
.side-menu__btn{
  width:100%;
  text-align:left;
}

.input{
  width: 260px;
  max-width: 70vw;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: var(--text);
  outline: none;
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset;
}
#sortBy{
  width: 230px;
}
.input:focus{
  border-color: rgba(121,206,243, .74);
  box-shadow: 0 0 0 4px rgba(121,206,243, .12), 0 0 0 1px rgba(121,206,243,.26) inset;
}

.btn{
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  color: var(--text);
  border-radius: 15px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.13) inset, var(--shadow-md);
}
.btn:hover{ border-color: rgba(255,255,255,.28); transform: translateY(-1px); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.btn--primary{
  border-color: rgba(106,196,236,.62);
  background: linear-gradient(160deg, rgba(0,152,219,.40), rgba(44,120,168,.22));
}
.btn--danger{
  border-color: rgba(255,120,120,.58);
  background: linear-gradient(160deg, rgba(176,56,74,.40), rgba(132,46,66,.20));
}
.btn--primary:not(:disabled):hover{
  background: linear-gradient(160deg, rgba(0,152,219,.70), rgba(42,126,182,.45));
  border-color: rgba(132,217,255,.9);
  color:#fff !important;
}
.btn--danger:not(:disabled):hover{
  background: rgba(220,38,38,.95);
  border-color: rgba(220,38,38,1);
  color:#fff !important;
}
.btn--ghost{ border-color: rgba(255,255,255,.10); }
.btn.is-active{
  border-color: rgba(0,152,219,.65);
  background: rgba(0,152,219,.14);
}
.btn--icon{
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.btn--icon.is-active{
  border-color: rgba(0,152,219,.65);
  background: rgba(0,152,219,.14);
}
.btn.is-loading{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color: transparent;
  border-radius:50%;
  animation: spin .8s linear infinite;
}

.chip{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: var(--muted);
  user-select:none;
  backdrop-filter: blur(10px);
}
.chip input{ accent-color: rgba(0,152,219,1); }
.chip--status{
  cursor:pointer;
  color:#e5e7eb !important;
}
.chip--status.is-active{
  border-color: rgba(0,152,219,.6);
  background: rgba(0,152,219,.13);
  color:#fff;
}

.kpis{
  padding: 12px 18px 0;
  display:grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap:10px;
}
.kpi{
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
.kpi,
.kpi *{
  color:#e5e7eb !important;
}
.kpi--btn{
  cursor:pointer;
  text-align:left;
}
.kpi--btn:hover{
  border-color: rgba(255,255,255,.2);
}
.kpi__label{
  color: #a5b4c7 !important;
  font-size: 12px;
}
.kpi__value{
  margin-top:4px;
  font-size:20px;
  font-weight: 700;
}
.kpis--loading .kpi{
  border-color: rgba(255,255,255,.11);
}
.kpis--loading .kpi__value{
  opacity: .82;
  animation: kpi-loading-pulse 1.05s ease-in-out infinite;
}

@keyframes kpi-loading-pulse{
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}
.status-filters{
  padding: 10px 18px 0;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.alerts{
  padding: 12px 18px 0;
  display:grid;
  gap:10px;
}
.alert{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,12,20,.55);
  color: var(--text);
  display:grid;
  gap:8px;
}
.alert__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.alert__title{
  font-weight: 700;
}
.alert__sample{
  color: var(--muted);
  font-size: 13px;
}
.alert__actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.btn--tiny{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.alert--zero{ border-color: rgba(220,38,38,.55); background: rgba(220,38,38,.10); }
.alert--low{ border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
.alert--critical{ border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.10); }

.history{
  margin: 12px 18px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md);
}
.history__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom: 12px;
}
.history__head h2{
  margin:0;
  font-size:16px;
}
.history__crumb{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.history__filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.history__filters label{
  display:grid;
  gap:6px;
  color: var(--muted);
  font-size:12px;
}
.history__filters .input{
  width:auto;
  min-width: 150px;
}
.history__toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(255,255,255,.02);
}
.history__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.history__toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}
.history__count{
  font-size:12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chip--history{
  cursor:pointer;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color:#e5e7eb !important;
  transition: border-color .15s, background .15s, transform .05s;
}
.chip--history:hover{
  border-color: rgba(255,255,255,.28);
}
.chip--history:active{
  transform: translateY(1px);
}
.chip--history .chip__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
}
.chip--history-add .chip__dot{ background: rgba(0,152,219,.95); box-shadow: 0 0 0 2px rgba(0,152,219,.18); }
.chip--history-remove .chip__dot{ background: rgba(239,68,68,.95); box-shadow: 0 0 0 2px rgba(239,68,68,.18); }
.chip--history-transfer .chip__dot{ background: rgba(96,165,250,.95); box-shadow: 0 0 0 2px rgba(96,165,250,.18); }
.chip--history-create .chip__dot{ background: rgba(251,191,36,.95); box-shadow: 0 0 0 2px rgba(251,191,36,.18); }

.chip--history.is-active{
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.10);
  color:#fff !important;
}
.chip--history-add.is-active{
  border-color: rgba(0,152,219,.7);
  background: rgba(0,152,219,.16);
}
.chip--history-remove.is-active{
  border-color: rgba(239,68,68,.7);
  background: rgba(239,68,68,.16);
}
.chip--history-transfer.is-active{
  border-color: rgba(96,165,250,.7);
  background: rgba(96,165,250,.16);
}
.chip--history-create.is-active{
  border-color: rgba(251,191,36,.7);
  background: rgba(251,191,36,.16);
}

.history__table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background: rgba(255,255,255,.015);
}
.history__table{
  width:100%;
  border-collapse: collapse;
  min-width: 920px;
}
.history__table th,
.history__table td{
  text-align:left;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  vertical-align: middle;
}
.history__table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15,18,28,.92);
  backdrop-filter: blur(10px);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.history__table tbody tr{
  transition: background .15s;
}
.history__table tbody tr:nth-child(even){
  background: rgba(255,255,255,.015);
}
.history__table tbody tr:hover{
  background: rgba(255,255,255,.05);
}
.history__row{
  position: relative;
}
.history__row td:first-child{
  border-left: 3px solid transparent;
}
.history__row--add td:first-child{ border-left-color: rgba(0,152,219,.6); }
.history__row--remove td:first-child{ border-left-color: rgba(239,68,68,.6); }
.history__row--transfer td:first-child{ border-left-color: rgba(96,165,250,.6); }
.history__row--create td:first-child{ border-left-color: rgba(251,191,36,.6); }
.history__row--edit td:first-child{ border-left-color: rgba(168,85,247,.55); }

.history__cell-when{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.history__cell-product{
  font-weight: 600;
  color: #f3f4f6;
}
.history__cell-qty{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.history__cell-saldo{
  white-space: nowrap;
}
.history__user{
  display:inline-block;
  padding: 2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: #e5e7eb;
}

.history__type-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  white-space: nowrap;
}
.history__type-badge--add{
  background: rgba(0,152,219,.14);
  border-color: rgba(0,152,219,.55);
  color: #86cfef;
}
.history__type-badge--remove{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.55);
  color: #fca5a5;
}
.history__type-badge--transfer{
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.55);
  color: #93c5fd;
}
.history__type-badge--create{
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.55);
  color: #fcd34d;
}
.history__type-badge--edit{
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.55);
  color: #d8b4fe;
}
.history__type-badge--other{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--muted);
}

.history__qty{
  display:inline-block;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.history__qty--pos{
  background: rgba(0,152,219,.14);
  color: #86cfef;
}
.history__qty--neg{
  background: rgba(239,68,68,.14);
  color: #fca5a5;
}
.history__qty--neutral{
  background: rgba(96,165,250,.14);
  color: #93c5fd;
}

.history__saldo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}
.history__saldo-before{
  color: var(--muted);
}
.history__saldo-arrow{
  color: rgba(255,255,255,.35);
  font-size: 11px;
}
.history__saldo-after{
  color: #f3f4f6;
  font-weight: 600;
}

.history__obs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.history__obs-empty{
  color: rgba(255,255,255,.25);
}
.history__obs-text{
  font-size: 12px;
  color: var(--muted);
}
.history__obs-tag{
  display:inline-block;
  padding: 2px 8px;
  border-radius:999px;
  font-size: 11px;
  font-weight: 600;
  border:1px solid transparent;
  white-space: nowrap;
}
.history__obs-tag--prod{
  background: rgba(168,85,247,.13);
  border-color: rgba(168,85,247,.5);
  color: #d8b4fe;
}
.history__obs-tag--exp{
  background: rgba(0,152,219,.13);
  border-color: rgba(0,152,219,.5);
  color: #0098db;
}
.history__obs-tag--transfer{
  background: rgba(96,165,250,.13);
  border-color: rgba(96,165,250,.5);
  color: #93c5fd;
}
.history__obs-tag--neutral{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: var(--muted);
}

.scan{
  margin: 12px 18px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md);
}
.scan__head h2{
  margin: 6px 0 0;
  font-size: 18px;
}
.scan__subtitle{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.scan__content{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}
.scan__camera-wrap{
  position: relative;
  max-width: 520px;
}
.scan__video{
  width: 100%;
  max-height: 360px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3,7,15,.9);
  object-fit: cover;
}
.scan__hint{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.scan__controls{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.scan__manual{
  display: grid;
  gap: 8px;
  max-width: 640px;
}
.scan__manual-row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.scan__manual-row .input{
  flex: 1 1 320px;
  max-width: 100%;
}
.scan-result{
  margin-top: 4px;
  max-width: 760px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  gap: 10px;
}
.scan-result__meta{
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.pricing{
  margin: 12px 18px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(12px) saturate(108%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
}
.pricing__head h2{
  margin: 4px 0 0;
  font-size: 17px;
  letter-spacing: .01em;
}
.pricing__subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.pricing__split{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.pricing__box{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.015);
  border-radius: 14px;
  padding: 9px;
  box-shadow: none;
}
.pricing__box-head{
  margin-bottom: 6px;
}
.pricing__box-head h3{
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}
.pricing__box-head p{
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.pricing__box-actions{
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.pricing__grid{
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 8px;
}
.pricing__grid label{
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.pricing__color-toggle{
  grid-column: span 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pricing__radio{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: var(--text) !important;
  font-size: 12px !important;
}
.pricing__radio input{
  width: 14px;
  height: 14px;
}
.pricing__product-field{
  grid-column: span 2;
}
.pricing__product-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
}
.pricing__grid .input{
  width: 100%;
  max-width: 100%;
}
.pricing__photo{
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pricing__photo--thumb{
  width: 64px;
  height: 64px;
  min-height: 64px;
}
.pricing__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pricing__actions{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pricing__cards{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 8px;
}
.pricing-card{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
.pricing-card__label{
  color: var(--muted);
  font-size: 11px;
}
.pricing-card__value{
  margin-top: 2px;
  font-size: 18px;
  font-weight: 650;
}
.pricing-card__value--ok{ color: #0098db; }
.pricing-card__value--bad{ color: #f87171; }
.pricing__targets-wrap{
  margin-top: 10px;
}
.pricing__targets-wrap h3{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 650;
}
.pricing-admin{
  margin-top: 12px;
}
.pricing-admin--page{
  margin-top: 10px;
}
.pricing-admin h3{
  margin: 0 0 8px;
  font-size: 15px;
}
.pricing-admin__grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.pricing-admin__card{
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.pricing-admin__card h4{
  margin: 0;
  font-size: 14px;
}
.pricing-admin__card label{
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.pricing-admin__card .input{
  width: 100%;
  max-width: 100%;
}
.pricing-admin__actions{
  display: flex;
  gap: 8px;
}
.pricing__msg{
  margin-top: 8px;
  color: #bbe5f7;
  background: rgba(0,152,219,.09);
  border: 1px solid rgba(0,152,219,.28);
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 12px;
}
.pricing__msg--error{
  color: #fecaca;
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
}

/* Pricing-specific controls: cleaner and flatter */
.pricing .input{
  border-radius: 11px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter: blur(8px) saturate(105%);
}
.pricing .input:focus{
  border-color: rgba(170,214,233,.45);
  box-shadow: 0 0 0 2px rgba(170,214,233,.08), 0 1px 0 rgba(255,255,255,.10) inset;
}
.pricing .btn{
  border-radius: 11px;
  padding: 9px 12px;
  box-shadow: none;
}
.pricing .btn--ghost{
  background: rgba(255,255,255,.04);
}
.pricing .btn--primary{
  background: linear-gradient(180deg, rgba(80,148,178,.45), rgba(64,144,174,.24));
  border-color: rgba(120,189,220,.48);
}

.settings{
  margin: 12px 18px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md);
}
.settings__head h2{
  margin: 6px 0 0;
  font-size: 18px;
}
.settings__subtitle{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.settings__head + .settings__head{
  margin-top: 20px;
}
.settings__form{
  margin-top: 14px;
  display:grid;
  gap:8px;
  max-width: 460px;
}
.settings__form .input{
  width: 100%;
  max-width: 100%;
}
.settings__actions{
  padding: 8px 0 0;
  justify-content:flex-start;
  border-top: 0;
}
.settings__ok{
  margin: 4px 0 0;
  color: #bbe5f7;
  background: rgba(0,152,219,.15);
  border: 1px solid rgba(0,152,219,.45);
  border-radius: 10px;
  padding: 8px 10px;
}
.settings__checks{
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  background: rgba(255,255,255,.03);
}
.settings__checks legend{
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
}
.settings__check{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.settings__check input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

.grid{
  padding: 16px 18px 26px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.card{
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 310px;
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 20px 46px rgba(0,0,0,.33);
}
.card--zero{ border-color: rgba(239,68,68,.65); }
.card--low{ border-color: rgba(251,113,133,.52); }
.card--critical{ border-color: rgba(245,158,11,.55); }
.card--ok{ border-color: rgba(255,255,255,.1); }
.card--zero{
  border-color: rgba(220,38,38,.55);
  background: linear-gradient(145deg, rgba(31,11,11,.72), rgba(8,12,20,.58));
}
.card__img{
  aspect-ratio: 1 / 1;
  height: auto;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  color: var(--muted);
  font-size: 12px;
}
.card__img::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 34%;
  background: linear-gradient(180deg, rgba(7,10,18,0) 0%, rgba(7,10,18,.82) 70%, rgba(7,10,18,.92) 100%);
  pointer-events:none;
}
.card__img img{
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  display:block;
}
.card__img-top{
  position:absolute;
  top:10px;
  left:10px;
  z-index:2;
}
.card__stock{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(3,7,15,.88);
  color:#ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.card__stock.badge--zero{ background: rgba(127,29,29,.92); border-color: rgba(239,68,68,.92); }
.card__stock.badge--low{ background: rgba(127,29,29,.9); border-color: rgba(248,113,113,.85); }
.card__stock.badge--critical{ background: rgba(120,53,15,.9); border-color: rgba(251,191,36,.88); }
.card__stock.badge--ok{ background: rgba(20,64,83,.9); border-color: rgba(0,152,219,.85); }
.card__img-actions{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:flex;
  gap:8px;
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  z-index:2;
}
.card__img-actions .btn{
  flex:1;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  backdrop-filter: blur(3px);
  background: rgba(8,12,20,.72);
}
.card__body{ padding: 12px 12px 12px; flex:1; }
.card__title{
  margin:0 0 6px;
  font-size: 14px;
  letter-spacing:.2px;
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.card__meta{
  color: var(--muted);
  font-size: 11px;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.card__obs{
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badges{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
}
.badge--zero{ background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.65); color:#fff; }
.badge--low{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.55); color:#fff; }
.badge--critical{ background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.65); color:#fff; }
.badge--ok{ background: rgba(0,152,219,.12); border-color: rgba(0,152,219,.55); color:#fff; }

.card__actions{ display:flex; gap:10px; padding: 12px; }
.empty{ padding: 24px 18px; color: var(--muted); }

/* Dialog */
dialog{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 0;
  max-width: 720px;
  width: min(720px, calc(100vw - 24px));
  background: linear-gradient(145deg, rgba(9,14,25,.95), rgba(15,23,42,.92));
  color: var(--text);
  box-shadow: 0 35px 85px rgba(0,0,0,.6);
}
dialog::backdrop{
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(2px);
}
.dialog__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.dialog__header h3{ margin:0; font-size: 20px; line-height: 1.2; }
.icon-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 18px;
}
.icon-btn:hover{ border-color: rgba(255,255,255,.18); }
.dialog__content{ padding: 14px 18px 6px; display:grid; gap: 10px; }
.dialog__content label{ color: var(--muted); font-weight: 600; }
.balance{
  display:grid;
  gap:8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.balance__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: var(--muted);
}
.balance__row strong{
  color: var(--text);
}
.balance--negative{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
}
.balance--negative .balance__row strong{
  color:#fff;
}
.hint{ margin: 6px 0 0; color: rgba(165,180,199,.9); font-size: 12px; }
.dialog__actions{
  display:flex;
  justify-content:flex-end;
  gap: 12px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.detail-list{
  margin:0;
  padding-left: 18px;
  display:grid;
  gap:6px;
}
.transfer-list{
  max-height: min(52vh, 480px);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}
.transfer-item{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.transfer-item__check{
  width: 16px;
  height: 16px;
}
.transfer-item__name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.transfer-item__avail{
  font-size: 12px;
  color: var(--muted);
}
.transfer-item__qty{
  width: 96px;
  min-height: 38px;
  text-align: right;
}
.transfer-item__transfer{
  padding: 6px 12px;
  min-height: 38px;
  font-size: 13px;
  white-space: nowrap;
}

.shopee-link-item{
  display:grid;
  grid-template-columns:auto 64px minmax(0,1fr) minmax(120px,170px) minmax(220px,1fr) minmax(90px,auto);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.shopee-link-item__check{
  width:16px;
  height:16px;
}
.shopee-link-item__photo{
  width:64px !important;
  min-width:64px;
  max-width:64px;
  height:64px !important;
  min-height:64px;
  max-height:64px;
  border-radius:10px;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
.shopee-link-item__main{
  min-width:0;
  display:grid;
  gap:4px;
}
.shopee-link-item__title{
  font-weight:600;
  line-height:1.25;
}
.shopee-link-item__sub{
  font-size:12px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.shopee-link-item__sku{
  font-size:12px;
  color:var(--muted);
}
.shopee-link-item__bind{
  min-width:0;
  width:100%;
}
.shopee-link-item__stock{
  min-width:0;
  font-size:12px;
  color:var(--muted);
  text-align:right;
}

@media (max-width: 1200px){
  .shopee-link-item{
    grid-template-columns:auto 56px minmax(0,1fr);
    align-items:start;
  }
  .shopee-link-item__photo{
    width:56px !important;
    min-width:56px;
    max-width:56px;
    height:56px !important;
    min-height:56px;
    max-height:56px;
  }
  .shopee-link-item__main{
    grid-column:3;
  }
  .shopee-link-item__sku,
  .shopee-link-item__stock{
    grid-column:3;
    text-align:left;
  }
  .shopee-link-item__bind{
    grid-column:1 / -1;
  }
}

.bulk-toolbar{
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(11,18,34,.78);
  display: grid;
  gap: 10px;
}
.bulk-toolbar__row{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-toolbar__field{
  display:grid;
  gap: 6px;
  min-width: 180px;
}
.bulk-toolbar__field > span{
  font-size: 12px;
  color: rgba(214,225,243,.88);
}
.topbar__controls-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.card__bulk-check{
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 3;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.76);
  border: 1px solid rgba(148,163,184,.45);
  color: #e8eef9;
  font-size: 11px;
}
.card__bulk-check input{
  width: 16px;
  height: 16px;
}
.card--selected{
  box-shadow: 0 0 0 2px rgba(56,189,248,.55), var(--shadow-2);
}
.bulk-toolbar .btn--compact-remove{
  background: rgba(176, 52, 68, .24) !important;
  border-color: rgba(240, 126, 139, .44) !important;
  color: #ffe1e6 !important;
}
.bulk-toolbar .btn--compact-remove:hover{
  background: rgba(176, 52, 68, .34) !important;
  border-color: rgba(240, 126, 139, .62) !important;
}
.btn--compact-remove{
  background: rgba(176, 52, 68, .24) !important;
  border-color: rgba(240, 126, 139, .44) !important;
  color: #ffe1e6 !important;
}
.btn--compact-remove:hover{
  background: rgba(176, 52, 68, .34) !important;
  border-color: rgba(240, 126, 139, .62) !important;
}

@media (max-width: 720px){
  .topbar__controls-left{
    display:flex !important;
    width: 100%;
  }
  .bulk-toolbar__row{
    align-items: stretch;
  }
  .bulk-toolbar__field{
    min-width: 0;
    width: 100%;
  }
  .transfer-item{
    grid-template-columns: auto minmax(0,1fr);
    gap: 8px;
  }
  .transfer-item__avail{
    grid-column: 2;
    justify-self: start;
  }
  .transfer-item__qty{
    grid-column: 2;
    width: 100%;
  }
  .transfer-item__transfer{
    grid-column: 2;
    width: 100%;
  }
  .shopee-link-item{
    grid-template-columns:auto 52px minmax(0,1fr);
    align-items:start;
  }
  .shopee-link-item__photo{
    width:52px !important;
    min-width:52px;
    max-width:52px;
    height:52px !important;
    min-height:52px;
    max-height:52px;
  }
  .shopee-link-item__sku,
  .shopee-link-item__stock{
    grid-column:3;
    text-align:left;
  }
  .shopee-link-item__bind{
    grid-column:1 / -1;
  }
}

/* iOS 10/legacy Safari: opaque side menu */
body.legacy-ios .side-menu{
  background: linear-gradient(180deg, rgba(20, 31, 52, .995), rgba(11, 18, 33, .995)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: rgba(157, 179, 215, .28) !important;
}
body.legacy-ios .side-menu-backdrop{
  background: rgba(4, 8, 16, .76) !important;
}
body.legacy-ios .side-menu .side-accordion{
  background: linear-gradient(180deg, rgba(22, 33, 55, .98), rgba(17, 27, 46, .98)) !important;
  border-color: rgba(255,255,255,.18) !important;
}
body.legacy-ios .side-menu .btn,
body.legacy-ios .side-menu .input{
  background: linear-gradient(180deg, rgba(20, 30, 50, .98), rgba(17, 26, 43, .98)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.legacy-ios .side-menu select.input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(214,226,244,.95) 50%) !important,
    linear-gradient(135deg, rgba(214,226,244,.95) 50%, transparent 50%) !important,
    linear-gradient(180deg, rgba(20, 30, 50, .98), rgba(17, 26, 43, .98)) !important;
}

@media (max-width: 1180px){
  .side-menu{
    background: linear-gradient(180deg, rgba(20, 31, 52, .998), rgba(11, 18, 33, .998)) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
  .side-menu .side-accordion,
  .side-menu .btn,
  .side-menu .input{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
.detail-list li{
  color: var(--muted);
}

.busy-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(3, 7, 15, .72);
  backdrop-filter: blur(3px);
}
.busy-overlay[hidden]{
  display:none !important;
}
.busy-overlay__box{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,24,.92);
  color: var(--text);
  font-weight: 600;
}
body.is-busy{
  overflow: hidden;
}
body.is-busy *{
  cursor: progress !important;
}

.login-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(3, 7, 15, .86);
  backdrop-filter: blur(3px);
  padding: 16px;
}
.login-overlay[hidden]{
  display:none !important;
}
.login-card{
  width: min(420px, 100%);
  display:grid;
  gap:10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(9,14,25,.98), rgba(15,23,42,.95));
}
.login-card h2{
  margin:0 0 8px;
}
.login-card label{
  color: var(--muted);
  font-weight: 600;
}
.login-card .input{
  width: 100%;
  max-width: 100%;
}
.login-remember{
  display:flex;
  gap:8px;
  align-items:center;
  color: var(--muted);
  font-weight: 500;
}
.login-error{
  margin: 0;
  color: #fecaca;
  background: rgba(220,38,38,.15);
  border: 1px solid rgba(220,38,38,.45);
  border-radius: 10px;
  padding: 8px 10px;
}

.toast-stack{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10020;
  display:grid;
  gap:8px;
}
.toast{
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(8,12,20,.92);
  color:#fff;
  min-width: 240px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.toast--add{ border-color: rgba(0,152,219,.65); }
.toast--remove{ border-color: rgba(239,68,68,.65); }
.toast--create{ border-color: rgba(59,130,246,.65); }

mark.hl{
  background: rgba(0,152,219,.22);
  color: #fff;
  border-radius: 4px;
  padding: 0 2px;
}

#blurToggle{
  min-width: 124px;
}

body.privacy-blur .card__title,
body.privacy-blur #historyBody td:nth-child(4),
body.privacy-blur #scanItemsBody td:first-child,
body.privacy-blur #pricingProduct,
body.privacy-blur #dlgTitle,
body.privacy-blur #alertDetailList{
  filter: blur(6px);
}

body.privacy-blur .card__img img,
body.privacy-blur #pricingProductImg{
  filter: blur(26px);
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

@media (max-width: 720px){
  input,
  select,
  textarea{
    font-size: 16px !important;
  }
  body{
    background: linear-gradient(180deg, #060a14 0%, #091225 60%, #0a152a 100%);
  }
  .topbar{
    padding: 10px 12px 8px;
    gap: 6px;
  }
  .topbar__row{
    gap:8px;
  }
  .topbar__row--main{
    align-items:flex-start;
    flex-direction:row;
  }
  .topbar h1{
    font-size: 20px;
    letter-spacing: -.3px;
    line-height: 1.1;
  }
  .topbar__subtitle{
    font-size: 10px;
    margin-top: 2px;
  }
  .topbar__right{
    width:auto;
    margin-left:auto;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
  }
  .topbar__right .chip{
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
  }
  .topbar__right .btn{
    padding: 8px 12px;
    border-radius: 12px;
  }
  .topbar__right .btn--icon{
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
  }
  .icon-chevron-left{
    width: 17px;
    height: 17px;
  }
  .topbar__controls-left{ display:none; }
  .topbar__row--controls{
    flex-direction:column;
    align-items:stretch;
  }
  .topbar__actions{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:7px;
  }
  .topbar__actions #search,
  .topbar__actions #sortBy{
    grid-column: span 2;
    width: 100%;
    max-width: 100%;
  }
  .topbar__actions #clearFilters,
  .topbar__actions #refresh{
    grid-column: span 1;
  }
  .topbar__actions .btn{
    width: 100%;
    text-align:center;
    padding: 9px 8px;
    font-size: 14px;
  }
  .topbar__actions .input{
    padding: 11px 12px;
  }
  .app-layout{
    grid-template-columns: 1fr;
    gap:0;
  }
  .side-menu{
    width: min(320px, 92vw);
    padding-top: 84px;
  }
  .side-menu__btn{
    text-align:center;
  }
  .chip{
    font-size: 14px;
  }
  .kpis{
    padding: 8px 12px 0;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap:6px;
  }
  .kpi{
    border-radius: 12px;
    padding: 8px;
  }
  .kpi__value{
    font-size: 20px;
  }
  .status-filters{
    padding: 8px 12px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .status-filters::-webkit-scrollbar{
    display:none;
  }
  .status-filters .chip{
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .alerts{
    padding: 8px 12px 0;
  }
  .alert{
    border-radius: 16px;
  }
  .alert__head{
    align-items:flex-start;
    flex-direction:column;
  }
  .alert__actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .btn--tiny{
    font-size: 12px;
    padding: 6px 9px;
  }
  .grid{
    padding: 12px 12px 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .card{
    min-height: 200px;
    border-radius: 14px;
  }
  .card__img{
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 8px;
  }
  .card__img-actions{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
    left:6px;
    right:6px;
    bottom:6px;
    gap:6px;
  }
  .card__img-actions .btn{
    font-size: 10px;
    padding: 7px 6px;
    border-radius: 9px;
  }
  .card__img-top{
    top:10px;
    left:10px;
  }
  .card__stock{
    font-size: 10px;
    padding: 5px 8px;
  }
  .card__body{
    padding: 8px 8px 10px;
  }
  .card__title{
    font-size: 12px;
    margin: 0 0 6px;
    min-height: 2.2em;
  }
  .card__obs{ font-size: 10px; }
  .card__meta{
    font-size: 10px;
    margin-top: 8px;
    line-height: 1.35;
  }
  .history{
    margin: 10px 12px 0;
    padding: 12px;
  }
  .scan{
    margin: 10px 12px 0;
    padding: 12px;
  }
  .scan__manual-row{
    display:grid;
    grid-template-columns: 1fr;
  }
  .scan__manual-row .btn{
    width:100%;
  }
  .settings{
    margin: 10px 12px 0;
    padding: 12px;
  }
  .pricing{
    margin: 10px 12px 0;
    padding: 12px;
  }
  .pricing__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pricing__split{
    gap: 10px;
  }
  .pricing__color-toggle{
    grid-column: span 2;
  }
  .pricing__product-field{
    grid-column: span 2;
  }
  .pricing__product-row{
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 8px;
  }
  .pricing__photo--thumb{
    width: 56px;
    height: 56px;
    min-height: 56px;
  }
  .pricing__cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pricing-admin__grid{
    grid-template-columns: 1fr;
  }
  .history__head{
    align-items:flex-start;
    flex-direction:column;
  }
  .history__filters{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }
  .history__filters .input{
    min-width:100%;
    width:100%;
  }
  .history__filters label{
    font-size:11px;
  }
}

@media (max-width: 380px){
  .grid{
    grid-template-columns: 1fr;
  }
}

/* Liquid Glass refinement (subtle / system-like) */
:root{
  --text:#f2f5fb;
  --muted:#b3bfd3;
  --glass-neutral: rgba(255,255,255,.08);
  --glass-neutral-strong: rgba(255,255,255,.12);
  --glass-stroke: rgba(255,255,255,.18);
  --glass-stroke-soft: rgba(255,255,255,.12);
}

body{
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(120,148,205,.18) 0%, transparent 60%),
    radial-gradient(820px 440px at 90% 0%, rgba(120,179,205,.14) 0%, transparent 62%),
    linear-gradient(180deg, #0a0f1a 0%, #0c1321 55%, #0d1626 100%);
}

.topbar{
  background: linear-gradient(180deg, rgba(14,20,32,.62) 0%, rgba(14,20,32,.44) 100%);
  backdrop-filter: blur(22px) saturate(120%);
  border-bottom: 1px solid var(--glass-stroke-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.11) inset;
}

.side-menu{
  background: linear-gradient(180deg, rgba(16,22,36,.82) 0%, rgba(16,22,36,.74) 100%);
  backdrop-filter: blur(24px) saturate(118%);
  border-color: var(--glass-stroke-soft);
}

.side-accordion{
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border-color: var(--glass-stroke-soft);
}

.input{
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.06) 100%);
  border-color: var(--glass-stroke-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 18px rgba(0,0,0,.16);
  backdrop-filter: blur(12px) saturate(115%);
}

.input:focus{
  border-color: rgba(170,214,233,.64);
  box-shadow: 0 0 0 3px rgba(170,214,233,.10), 0 1px 0 rgba(255,255,255,.15) inset;
}

.btn{
  background: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.05) 100%);
  border-color: var(--glass-stroke-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.13) inset, 0 8px 18px rgba(0,0,0,.16);
}

.btn--ghost{
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
}

.btn--primary{
  background: linear-gradient(180deg, rgba(0,152,219,.40) 0%, rgba(63,155,188,.22) 100%);
  border-color: rgba(128,199,230,.62);
}

.btn--danger{
  background: linear-gradient(180deg, rgba(216,89,106,.36) 0%, rgba(158,72,98,.20) 100%);
  border-color: rgba(243,145,160,.52);
}

.history,
.scan,
.pricing,
.settings{
  border-color: var(--glass-stroke-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
  backdrop-filter: blur(20px) saturate(118%);
  box-shadow: 0 1px 0 rgba(255,255,255,.13) inset, 0 12px 30px rgba(0,0,0,.20);
}

.pricing__box,
.pricing-card,
.kpi,
.alert,
.scan-result,
.pricing-admin__card{
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  border-color: var(--glass-stroke-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}

.card{
  border-color: var(--glass-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 14px 28px rgba(0,0,0,.24);
}

.card__img{
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  border-color: rgba(255,255,255,.18);
}

/* Apple clean dark refinement */
html, body{
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  background:
    radial-gradient(1100px 560px at 10% -12%, rgba(120,140,185,.12) 0%, transparent 58%),
    radial-gradient(900px 520px at 92% -2%, rgba(115,157,175,.10) 0%, transparent 60%),
    linear-gradient(180deg, #0b0f19 0%, #0c1220 58%, #0d1321 100%);
}

.topbar{
  background: rgba(17, 23, 36, .50);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(20px) saturate(115%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.topbar h1{
  font-size: 40px;
  font-weight: 680;
  letter-spacing: -0.01em;
}
.topbar__subtitle{
  opacity: .9;
}

.side-menu{
  background: rgba(16, 21, 34, .72);
  border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(112%);
}
.side-accordion{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}
.side-accordion__summary{
  font-weight: 620;
}
.side-menu__btn{
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.input{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
  backdrop-filter: blur(9px) saturate(108%);
}
.input:focus{
  border-color: rgba(161,204,223, .46);
  box-shadow: 0 0 0 2px rgba(161,204,223,.09), 0 1px 0 rgba(255,255,255,.08) inset;
}

.btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: none;
  font-weight: 620;
}
.btn:hover{
  border-color: rgba(255,255,255,.16);
  transform: none;
}
.btn--primary{
  background: rgba(76,145,176, .30);
  border-color: rgba(125,191,220,.45);
}
.btn--danger{
  background: rgba(187, 80, 94, .26);
  border-color: rgba(224,138,149,.40);
}

.history,
.scan,
.pricing,
.settings{
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(14px) saturate(108%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

/* Pricing: extra clean / less busy */
.pricing{
  padding: 12px;
}
.pricing__head h2{
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pricing__split{
  gap: 8px;
}
.pricing__box{
  background: rgba(255,255,255,.015);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px;
}
.pricing__box-head h3{
  font-size: 13px;
  font-weight: 620;
  color: rgba(242,245,251,.92);
}
.pricing__box-head p{
  font-size: 11px;
  color: rgba(179,191,211,.84);
}
.pricing__grid{
  gap: 6px;
}
.pricing__grid label{
  font-size: 10px;
  color: rgba(179,191,211,.82);
}
.pricing .input{
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}
.pricing__photo{
  border-radius: 10px;
  border-color: rgba(255,255,255,.08);
}
.pricing__cards{
  gap: 6px;
}
.pricing-card{
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
}
.pricing-card__label{
  font-size: 10px;
  color: rgba(179,191,211,.82);
}
.pricing-card__value{
  font-size: 16px;
  font-weight: 640;
}
.pricing__targets-wrap h3{
  font-size: 13px;
  font-weight: 620;
}
.pricing__targets .history__table th,
.pricing__targets .history__table td,
.pricing .history__table th,
.pricing .history__table td{
  border-bottom-color: rgba(255,255,255,.05);
  font-size: 12px;
}

/* =========================================================
   Apple System Pass (Global, Clean, Dark, Subtle Glass)
   ========================================================= */
:root{
  --sys-bg: #0b0f18;
  --sys-surface: rgba(255,255,255,.025);
  --sys-surface-2: rgba(255,255,255,.035);
  --sys-border: rgba(255,255,255,.09);
  --sys-border-soft: rgba(255,255,255,.06);
  --sys-text: #f5f7fb;
  --sys-subtext: #b4bfd1;
  --sys-accent: #7dbedb;
  --sys-danger: #f07b8a;
}

html, body{
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--sys-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
  background:
    radial-gradient(920px 520px at 16% -12%, rgba(120,142,186,.10), transparent 58%),
    radial-gradient(860px 500px at 92% -4%, rgba(111,153,171,.08), transparent 60%),
    linear-gradient(180deg, #0a0e17 0%, #0b1019 56%, #0c1220 100%);
}

.topbar{
  background: rgba(16,22,34,.46);
  border-bottom: 1px solid var(--sys-border);
  backdrop-filter: blur(22px) saturate(110%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.topbar h1{
  font-size: 30px;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.topbar__subtitle{
  color: var(--sys-subtext) !important;
  font-size: 12px;
}

.side-menu{
  background: rgba(15,21,34,.70);
  border-color: var(--sys-border);
  backdrop-filter: blur(22px) saturate(110%);
}
.side-menu-backdrop{
  background: rgba(0,0,0,.42);
}
.side-accordion{
  border-color: var(--sys-border-soft);
  background: rgba(255,255,255,.02);
}
.side-accordion__summary{
  font-size: 12px;
  font-weight: 620;
  color: var(--sys-subtext);
}

.input{
  border-radius: 10px;
  border: 1px solid var(--sys-border-soft);
  background: rgba(255,255,255,.028);
  color: var(--sys-text);
  backdrop-filter: blur(8px) saturate(105%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.input:focus{
  border-color: rgba(125,190,219,.42);
  box-shadow: 0 0 0 2px rgba(125,190,219,.08), 0 1px 0 rgba(255,255,255,.06) inset;
}

.btn{
  border-radius: 10px;
  border: 1px solid var(--sys-border-soft);
  background: rgba(255,255,255,.03);
  font-weight: 610;
  box-shadow: none;
}
.btn:hover{
  border-color: var(--sys-border);
  background: rgba(255,255,255,.045);
}
.btn--primary{
  background: rgba(76,147,178,.24);
  border-color: rgba(125,190,219,.38);
}
.btn--primary:not(:disabled):hover{
  background: rgba(76,147,178,.30);
  border-color: rgba(125,190,219,.48);
}
.btn--danger{
  background: rgba(192,90,108,.22);
  border-color: rgba(240,123,138,.34);
}

.chip{
  border: 1px solid var(--sys-border-soft);
  background: rgba(255,255,255,.02);
  color: var(--sys-subtext);
}
.chip--status.is-active{
  border-color: rgba(125,190,219,.34);
  background: rgba(125,190,219,.12);
}

.kpi,
.alert,
.history,
.scan,
.pricing,
.settings,
.pricing__box,
.pricing-card,
.pricing-admin__card,
.scan-result,
.balance,
.card{
  border-color: var(--sys-border-soft);
  background: var(--sys-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(10px) saturate(106%);
}

.kpi__label,
.history__crumb,
.scan__subtitle,
.pricing__subtitle,
.settings__subtitle,
.card__meta,
.card__obs{
  color: var(--sys-subtext) !important;
}

.history__head h2,
.scan__head h2,
.pricing__head h2,
.settings__head h2{
  font-weight: 640;
  letter-spacing: -0.01em;
}

.history__table th,
.history__table td{
  border-bottom-color: rgba(255,255,255,.045);
}
.history__table th{
  font-size: 12px;
  color: var(--sys-subtext);
}
.history__table td{
  font-size: 12px;
}

.grid{
  gap: 12px;
}
.card{
  border-radius: 16px;
}
.card__img{
  border-radius: 12px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.card__body{
  padding: 10px 10px 11px;
}
.card__title{
  font-size: 13px;
  font-weight: 620;
}
.card__img-actions .btn{
  border-radius: 9px;
  padding: 6px 7px;
  font-size: 10px;
}

.pricing{
  padding: 12px;
}
.pricing__split{
  gap: 8px;
}
.pricing__box{
  padding: 8px;
  border-radius: 11px;
}
.pricing__box-head h3{
  font-size: 13px;
  font-weight: 620;
}
.pricing__box-head p{
  font-size: 11px;
}
.pricing__grid{
  gap: 6px;
}
.pricing__grid label{
  gap: 3px;
  font-size: 10px;
  color: var(--sys-subtext);
}
.pricing .input{
  min-height: 33px;
}
.pricing__actions{
  margin-top: 7px;
}
.pricing__cards{
  gap: 6px;
}
.pricing-card{
  padding: 7px 9px;
  border-radius: 10px;
}
.pricing-card__label{
  font-size: 10px;
}
.pricing-card__value{
  font-size: 16px;
  font-weight: 635;
}
.pricing__targets-wrap{
  margin-top: 8px;
}
.pricing__targets-wrap h3{
  font-size: 13px;
  font-weight: 620;
}

dialog{
  border-color: var(--sys-border);
  background: rgba(18,24,38,.86);
  backdrop-filter: blur(22px) saturate(110%);
  box-shadow: 0 24px 60px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.08) inset;
}
dialog::backdrop{
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(3px);
}

/* Final Apple polish */
:root{
  --apple-panel: rgba(255,255,255,.018);
  --apple-panel-2: rgba(255,255,255,.028);
  --apple-stroke: rgba(255,255,255,.055);
  --apple-text: #f4f6fb;
  --apple-sub: #adb8cc;
}

body{
  color: var(--apple-text);
  background:
    radial-gradient(980px 560px at 14% -16%, rgba(122,140,178,.08) 0%, transparent 58%),
    radial-gradient(760px 480px at 88% -4%, rgba(110,145,160,.06) 0%, transparent 60%),
    linear-gradient(180deg, #090d16 0%, #0b1018 58%, #0c121d 100%);
}

.topbar{
  background: rgba(16,21,33,.42);
  border-bottom: 1px solid var(--apple-stroke);
  backdrop-filter: blur(24px) saturate(108%);
  padding-top: 12px;
  padding-bottom: 10px;
}
.topbar h1{
  font-size: 30px;
  font-weight: 630;
  letter-spacing: -0.012em;
}
.topbar__subtitle{
  color: var(--apple-sub) !important;
}

.side-menu{
  background: rgba(15,20,32,.64);
  border-color: var(--apple-stroke);
  backdrop-filter: blur(24px) saturate(108%);
}
.side-accordion{
  background: rgba(255,255,255,.015);
  border-color: var(--apple-stroke);
}
.side-accordion__summary{
  color: var(--apple-sub);
  font-weight: 610;
  letter-spacing: .01em;
}

.history,
.scan,
.pricing,
.settings{
  border: 1px solid var(--apple-stroke);
  background: var(--apple-panel);
  backdrop-filter: blur(14px) saturate(105%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.input{
  background: rgba(255,255,255,.024);
  border-color: var(--apple-stroke);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.045) inset;
}
.input:focus{
  border-color: rgba(160,201,219, .34);
  box-shadow: 0 0 0 2px rgba(160,201,219,.07), 0 1px 0 rgba(255,255,255,.05) inset;
}

.btn{
  background: rgba(255,255,255,.024);
  border-color: var(--apple-stroke);
  border-radius: 10px;
  font-weight: 605;
}
.btn:hover{
  background: rgba(255,255,255,.034);
  border-color: rgba(255,255,255,.09);
}
.btn--primary{
  background: rgba(81,148,178,.20);
  border-color: rgba(126,191,220,.30);
}
.btn--primary:not(:disabled):hover{
  background: rgba(81,148,178,.24);
  border-color: rgba(126,191,220,.38);
}

.kpi,
.alert,
.pricing__box,
.pricing-card,
.pricing-admin__card,
.scan-result,
.balance{
  background: var(--apple-panel-2);
  border-color: var(--apple-stroke);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.kpi__label,
.history__crumb,
.scan__subtitle,
.pricing__subtitle,
.settings__subtitle,
.card__meta,
.card__obs{
  color: var(--apple-sub) !important;
}

.card{
  background: rgba(255,255,255,.022);
  border-color: var(--apple-stroke);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 20px rgba(0,0,0,.16);
}
.card__img{
  border-color: rgba(255,255,255,.07);
  background: rgba(255,255,255,.016);
}
.card__title{
  font-weight: 610;
  letter-spacing: 0;
}

.pricing{
  padding: 14px;
}
.pricing__head{
  margin-bottom: 2px;
}
.pricing__head h2{
  font-size: 24px;
  font-weight: 630;
}
.pricing__split{
  gap: 10px;
}
.pricing__box{
  padding: 10px;
  border-radius: 12px;
}
.pricing__box-head{
  margin-bottom: 8px;
}
.pricing__box-head h3{
  font-size: 13px;
  font-weight: 620;
}
.pricing__box-head p{
  font-size: 11px;
  color: var(--apple-sub);
}
.pricing__grid{
  gap: 8px;
}
.pricing__grid label{
  font-size: 11px;
  color: var(--apple-sub);
}
.pricing .input{
  min-height: 36px;
}
.pricing__actions{
  margin-top: 9px;
}
.pricing__cards{
  margin-top: 11px;
  gap: 8px;
}
.pricing-card{
  padding: 9px 10px;
  border-radius: 11px;
}
.pricing-card__label{
  font-size: 10px;
  color: var(--apple-sub);
}
.pricing-card__value{
  font-size: 17px;
  font-weight: 630;
}
.pricing__targets-wrap{
  margin-top: 10px;
}
.pricing__targets-wrap h3{
  font-size: 13px;
  font-weight: 620;
}

dialog{
  background: rgba(17,22,34,.84);
  border-color: var(--apple-stroke);
  backdrop-filter: blur(24px) saturate(106%);
  box-shadow: 0 14px 40px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.05) inset;
}

@media (max-width: 720px){
  .topbar{
    padding: 10px 12px 8px;
    backdrop-filter: blur(20px) saturate(106%);
  }
  .topbar h1{
    font-size: 28px;
    font-weight: 620;
  }
  .topbar__subtitle{
    font-size: 10px;
  }
  .side-menu{
    width: min(320px, 94vw);
    background: rgba(15,20,32,.80);
  }
  .history,
  .scan,
  .pricing,
  .settings{
    margin: 10px 12px 0;
    padding: 12px;
    border-radius: 14px;
  }
  .kpis{
    gap: 8px;
  }
  .kpi{
    border-radius: 12px;
  }
  .grid{
    padding: 14px 12px 24px;
    gap: 10px;
  }
  .card{
    border-radius: 14px;
  }
  .card__img{
    border-radius: 11px;
  }
  .pricing__head h2{
    font-size: 22px;
  }
  .pricing__split{
    gap: 8px;
  }
  .pricing__box{
    padding: 9px;
    border-radius: 11px;
  }
  .pricing__grid{
    gap: 7px;
  }
  .pricing .input{
    min-height: 35px;
  }
  .pricing__cards{
    gap: 7px;
  }
  .pricing-card{
    border-radius: 10px;
    padding: 8px 9px;
  }
  .pricing-card__value{
    font-size: 16px;
  }
}

/* =========================================================
   Apple UX System (final pass - full app)
   ========================================================= */
:root{
  --a-bg-0:#090d16;
  --a-bg-1:#0c111c;
  --a-bg-2:#0f1523;
  --a-surface: rgba(255,255,255,.020);
  --a-surface-2: rgba(255,255,255,.030);
  --a-surface-3: rgba(255,255,255,.045);
  --a-border: rgba(255,255,255,.070);
  --a-border-2: rgba(255,255,255,.100);
  --a-text: #f4f6fb;
  --a-sub: #aeb8cb;
  --a-accent: #7fbeda;
  --a-danger: #f08a98;
}

html, body{
  font-family:
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--a-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body{
  background:
    radial-gradient(1000px 560px at 15% -14%, rgba(115,136,178,.09) 0%, transparent 58%),
    radial-gradient(820px 500px at 90% -2%, rgba(108,145,162,.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--a-bg-0) 0%, var(--a-bg-1) 58%, var(--a-bg-2) 100%);
}

.topbar{
  background: rgba(15,21,33,.44);
  border-bottom: 1px solid var(--a-border);
  backdrop-filter: blur(22px) saturate(108%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  padding: 12px 16px 10px;
}
.topbar h1{
  font-size: 30px;
  font-weight: 635;
  letter-spacing: -0.012em;
}
.topbar__subtitle{
  color: var(--a-sub) !important;
}
.topbar__actions{
  gap: 6px;
}

.side-menu{
  background: rgba(14,20,32,.68);
  border-color: var(--a-border);
  backdrop-filter: blur(24px) saturate(108%);
}
.side-accordion{
  background: var(--a-surface);
  border: 1px solid var(--a-border);
}
.side-accordion__summary{
  color: var(--a-sub);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .01em;
}

.input{
  border-radius: 10px;
  border: 1px solid var(--a-border);
  background: var(--a-surface-2);
  color: var(--a-text);
  backdrop-filter: blur(8px) saturate(105%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.input::placeholder{
  color: color-mix(in oklab, var(--a-sub) 84%, transparent);
}
.input:focus{
  border-color: color-mix(in oklab, var(--a-accent) 40%, var(--a-border) 60%);
  box-shadow: 0 0 0 2px rgba(127,190,218,.08), 0 1px 0 rgba(255,255,255,.05) inset;
}

.btn{
  border-radius: 10px;
  border: 1px solid var(--a-border);
  background: var(--a-surface-2);
  box-shadow: none;
  font-weight: 610;
}
.btn:hover{
  border-color: var(--a-border-2);
  background: var(--a-surface-3);
}
.btn--primary{
  background: rgba(80,147,177,.22);
  border-color: rgba(127,190,218,.36);
}
.btn--primary:not(:disabled):hover{
  background: rgba(80,147,177,.28);
  border-color: rgba(127,190,218,.46);
}
.btn--danger{
  background: rgba(190,90,108,.20);
  border-color: rgba(240,138,152,.34);
}
.btn--ghost{
  background: var(--a-surface);
}

.chip{
  border: 1px solid var(--a-border);
  background: var(--a-surface);
  color: var(--a-sub);
}
.chip--status.is-active{
  border-color: rgba(127,190,218,.34);
  background: rgba(127,190,218,.10);
  color: var(--a-text);
}

.kpi,
.alert,
.history,
.scan,
.pricing,
.settings,
.pricing__box,
.pricing-card,
.pricing-admin__card,
.scan-result,
.balance,
.card,
dialog{
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  backdrop-filter: blur(12px) saturate(106%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.kpi__label,
.history__crumb,
.scan__subtitle,
.pricing__subtitle,
.settings__subtitle,
.card__meta,
.card__obs,
.pricing-card__label{
  color: var(--a-sub) !important;
}

.history__head h2,
.scan__head h2,
.pricing__head h2,
.settings__head h2{
  font-weight: 640;
  letter-spacing: -0.01em;
}

.history__table th,
.history__table td{
  border-bottom-color: rgba(255,255,255,.04);
}
.history__table th{
  font-size: 12px;
  color: var(--a-sub);
  font-weight: 590;
}
.history__table td{
  font-size: 12px;
}

.grid{
  gap: 12px;
}
.card{
  border-radius: 16px;
}
.card__img{
  border-radius: 12px;
  background: rgba(255,255,255,.014);
  border: 1px solid rgba(255,255,255,.06);
}
.card__title{
  font-size: 13px;
  font-weight: 620;
}
.card__img-actions .btn{
  border-radius: 9px;
  font-size: 10px;
  padding: 6px 7px;
}

.pricing{
  padding: 12px;
}
.pricing__head h2{
  font-size: 24px;
  font-weight: 635;
}
.pricing__split{
  gap: 8px;
}
.pricing__box{
  border-radius: 11px;
  padding: 9px;
}
.pricing__box-head h3{
  font-size: 13px;
  font-weight: 620;
}
.pricing__box-head p{
  font-size: 11px;
  color: var(--a-sub);
}
.pricing__grid{
  gap: 7px;
}
.pricing__grid label{
  font-size: 10px;
  gap: 3px;
  color: var(--a-sub);
}
.pricing .input{
  min-height: 35px;
}
.pricing__cards{
  gap: 7px;
}
.pricing-card{
  border-radius: 10px;
  padding: 8px 9px;
}
.pricing-card__value{
  font-size: 16px;
  font-weight: 635;
}
.pricing__targets-wrap h3{
  font-size: 13px;
  font-weight: 620;
}
.pricing__targets .history__table th,
.pricing__targets .history__table td{
  font-size: 12px;
}

.pricing__msg{
  background: rgba(127,190,218,.09);
  border: 1px solid rgba(127,190,218,.20);
  color: #d7ecf5;
}
.pricing__msg--error{
  background: rgba(240,138,152,.10);
  border-color: rgba(240,138,152,.22);
  color: #ffd7dd;
}

dialog{
  border-radius: 18px;
  background: rgba(17,23,36,.82);
  border-color: var(--a-border);
  backdrop-filter: blur(24px) saturate(106%);
  box-shadow: 0 16px 42px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.05) inset;
}
dialog::backdrop{
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
}

@media (max-width: 720px){
  .topbar{
    padding: 10px 12px 8px;
  }
  .topbar h1{
    font-size: 22px;
    font-weight: 625;
  }
  .topbar__subtitle{
    font-size: 10px;
  }
  .side-menu{
    width: min(320px, 94vw);
    background: rgba(14,20,32,.78);
  }
  .history,
  .scan,
  .pricing,
  .settings{
    margin: 10px 12px 0;
    padding: 12px;
    border-radius: 14px;
  }
  .kpis{
    padding: 8px 12px 0;
    gap: 8px;
  }
  .kpi{
    border-radius: 12px;
  }
  .grid{
    padding: 14px 12px 22px;
    gap: 10px;
  }
  .card{
    border-radius: 14px;
  }
  .card__img{
    border-radius: 10px;
  }
  .pricing__head h2{
    font-size: 20px;
  }
  .pricing__box{
    padding: 8px;
  }
  .pricing__cards{
    gap: 6px;
  }
}

/* Mobile stock polish (Apple-like clean) */
@media (max-width: 720px){
  .topbar{
    padding: max(10px, env(safe-area-inset-top)) 12px 8px;
    gap: 8px;
    border-bottom-color: rgba(255,255,255,.07);
    background: rgba(14,20,32,.38);
    backdrop-filter: blur(20px) saturate(104%);
  }
  .topbar__row--main{
    align-items: center;
    gap: 10px;
  }
  .topbar h1{
    font-size: 50px;
    font-weight: 640;
    line-height: 1.05;
    letter-spacing: -0.012em;
  }
  .topbar__subtitle{
    font-size: 16px;
    margin-top: 2px;
    color: rgba(174,184,203,.92) !important;
  }
  .btn--icon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.025);
  }
  .topbar__right .chip{
    font-size: 16px;
    color: rgba(225,231,245,.92);
    padding: 0 2px;
  }

  .topbar__actions{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .topbar__actions #search,
  .topbar__actions #sortBy,
  .topbar__actions #clearFilters,
  .topbar__actions #refresh{
    grid-column: auto;
    width: 100%;
  }
  .topbar__actions .input{
    min-height: 46px;
    border-radius: 13px;
    font-size: 20px !important;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }
  .topbar__actions .btn{
    min-height: 42px;
    border-radius: 13px;
    font-size: 18px;
    font-weight: 620;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }

  .kpis{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px 0;
  }
  .kpi{
    border-radius: 14px;
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.015);
    padding: 10px;
  }
  .kpi__label{
    font-size: 18px;
  }
  .kpi__value{
    font-size: 22px;
    margin-top: 2px;
    font-weight: 640;
  }

  .status-filters{
    padding: 10px 12px 0;
    gap: 7px;
  }
  .status-filters .chip{
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
    font-size: 16px;
    color: rgba(226,232,244,.92) !important;
  }
  .status-filters .chip.is-active{
    border-color: rgba(127,190,218,.35);
    background: rgba(127,190,218,.10);
  }
}

/* Hard override: card actions + estoque badge contrast */
.card .card__actions-inline .btn:last-child{
  background: rgba(176, 52, 68, .26) !important;
  border-color: rgba(240, 126, 139, .48) !important;
  color: #ffe1e6 !important;
}
.card .card__actions-inline .btn:last-child:hover{
  background: rgba(176, 52, 68, .38) !important;
  border-color: rgba(240, 126, 139, .62) !important;
}
.card .card__stock{
  background: rgba(10, 14, 24, .78) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #ffffff !important;
  font-weight: 650 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}

/* Card refinement (Apple-like clean) */
.card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.014);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 18px rgba(0,0,0,.14);
}
.card--zero,
.card--low,
.card--critical,
.card--ok{
  border-color: rgba(255,255,255,.055);
  background: rgba(255,255,255,.014);
}
.card__img{
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.012);
}
.card__img::after{
  display: none;
}
.card__img img{
  border-radius: 10px;
}
.card__stock{
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 590;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(14,18,28,.62);
  color: #f7f9ff;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(110%);
}
.card__stock.badge--zero,
.card__stock.badge--low,
.card__stock.badge--critical,
.card__stock.badge--ok{
  background: rgba(14,18,28,.62);
  border-color: rgba(255,255,255,.16);
}
.card__body{
  padding: 10px;
}
.card__title{
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 610;
  letter-spacing: 0;
}
.card__meta{
  margin-top: 6px;
  font-size: 11px;
}
.card__obs{
  font-size: 11px;
}
.card__footer{
  margin-top: 8px;
}
.card__actions-inline{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.btn--compact{
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
}
.card__actions-inline .btn--ghost.btn--compact{
  background: rgba(176, 52, 68, .20);
  border-color: rgba(240, 126, 139, .38);
  color: #ffd8de;
}
.card__actions-inline .btn--ghost.btn--compact:hover{
  background: rgba(176, 52, 68, .30);
  border-color: rgba(240, 126, 139, .50);
}

@media (max-width: 720px){
  .card{
    border-radius: 14px;
  }
  .card__img{
    border-radius: 10px;
  }
  .card__body{
    padding: 9px;
  }
  .card__title{
    font-size: 12px;
  }
  .btn--compact{
    min-height: 30px;
    font-size: 10px;
  }
}

/* Mobile Apple clean override (final) */
@media (max-width: 720px){
  body{
    letter-spacing: 0;
  }

  .topbar{
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: linear-gradient(180deg, rgba(10,14,24,.72), rgba(10,14,24,.42)) !important;
    backdrop-filter: blur(24px) saturate(112%) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
  }
  .topbar__row{
    gap: 8px !important;
  }
  .topbar__left{
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .topbar__right{
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .topbar h1{
    font-size: 20px !important;
    line-height: 1.08 !important;
    font-weight: 630 !important;
    letter-spacing: -0.01em !important;
  }
  .topbar__subtitle{
    margin-top: 2px !important;
    font-size: 12px !important;
    color: rgba(196,205,221,.84) !important;
  }

  .btn--icon{
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
  }
  #menuToggle,
  #goBackBtn,
  #openSettings{
    color: rgba(246,248,255,.92) !important;
  }
  #currentUserLabel.chip{
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: rgba(255,255,255,.03) !important;
    color: rgba(238,242,252,.88) !important;
  }

  .topbar__actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .topbar__actions #search,
  .topbar__actions #sortBy{
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .topbar__actions #clearFilters,
  .topbar__actions #refresh{
    width: 100% !important;
  }
  .topbar__actions .input{
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.02) !important;
    font-size: 15px !important;
  }
  .topbar__actions .btn{
    min-height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.02) !important;
    font-size: 15px !important;
    font-weight: 590 !important;
  }

  #stockView .kpis{
    padding: 10px 14px 0 !important;
    gap: 10px !important;
  }
  #stockView .kpi{
    border-radius: 16px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.016) !important;
    box-shadow: none !important;
  }
  #stockView .kpi__label{
    font-size: 13px !important;
    color: rgba(184,194,212,.85) !important;
  }
  #stockView .kpi__value{
    margin-top: 4px !important;
    font-size: 21px !important;
    font-weight: 625 !important;
    letter-spacing: -0.01em !important;
  }

  #stockView .status-filters{
    padding: 10px 14px 0 !important;
    gap: 7px !important;
  }
  #stockView .status-filters .chip{
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.02) !important;
    color: rgba(221,229,242,.90) !important;
    font-size: 14px !important;
    font-weight: 560 !important;
  }
  #stockView .status-filters .chip.is-active{
    border-color: rgba(126,185,211,.42) !important;
    background: rgba(126,185,211,.12) !important;
    color: #eaf6fc !important;
  }

  #stockView .grid{
    padding: 14px !important;
    gap: 12px !important;
  }
}

/* Apple Stock Cards (final pass) */
#stockView .card{
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(24,31,45,.34), rgba(10,14,24,.62)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 12px 30px rgba(0,0,0,.25) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}
#stockView .card--zero,
#stockView .card--low,
#stockView .card--critical,
#stockView .card--ok{
  border-color: rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(24,31,45,.34), rgba(10,14,24,.62)) !important;
}

#stockView .card__img{
  padding: 10px !important;
  border: 0 !important;
  background: transparent !important;
}
#stockView .card__img img{
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 17px !important;
}

#stockView .card__stock{
  top: 14px !important;
  left: 14px !important;
  padding: 6px 12px !important;
  min-height: 30px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(12,16,24,.56) !important;
  color: rgba(248,250,255,.96) !important;
  font-size: 12px !important;
  font-weight: 610 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(12px) saturate(110%) !important;
}
#stockView .card__stock.badge--zero{
  background: rgba(63,18,21,.54) !important;
  border-color: rgba(255,125,118,.38) !important;
}
#stockView .card__stock.badge--low{
  background: rgba(53,29,17,.54) !important;
  border-color: rgba(255,189,107,.36) !important;
}
#stockView .card__stock.badge--critical{
  background: rgba(53,29,17,.56) !important;
  border-color: rgba(255,206,128,.38) !important;
}
#stockView .card__stock.badge--ok{
  background: rgba(18,43,54,.52) !important;
  border-color: rgba(127,191,219,.34) !important;
}

#stockView .card__body{
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
}
#stockView .card__title{
  margin: 0 0 8px !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  font-weight: 620 !important;
  letter-spacing: -0.014em !important;
  color: rgba(248,251,255,.95) !important;
}
#stockView .card__meta{
  margin-top: 0 !important;
  font-size: 11.5px !important;
  color: rgba(199,210,226,.86) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-height: 1.25em !important;
}
#stockView .card__meta-main{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#stockView .card__meta-date{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: .92em !important;
  color: rgba(176,191,213,.95) !important;
}

#stockView .card__footer{
  margin-top: 18px !important;
}
#stockView .card__actions-inline{
  gap: 10px !important;
}
#stockView .card__actions-inline .btn--compact{
  min-height: 46px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
#stockView .card__actions-inline .btn--primary.btn--compact{
  background: rgba(0,152,219,.16) !important;
  border-color: rgba(126,204,239,.40) !important;
  color: #ecf9ff !important;
}
#stockView .card__actions-inline .btn--primary.btn--compact:hover{
  background: rgba(0,152,219,.25) !important;
  border-color: rgba(150,216,245,.56) !important;
}
#stockView .card__actions-inline .btn--ghost.btn--compact{
  background: rgba(255,69,58,.14) !important;
  border-color: rgba(255,126,118,.42) !important;
  color: #ffdeda !important;
}
#stockView .card__actions-inline .btn--ghost.btn--compact:hover{
  background: rgba(255,69,58,.22) !important;
  border-color: rgba(255,147,141,.56) !important;
}

@media (max-width: 720px){
  #stockView .card{
    border-radius: 20px !important;
  }
  #stockView .card__img{
    padding: 9px !important;
  }
  #stockView .card__img img{
    border-radius: 16px !important;
  }
  #stockView .card__stock{
    top: 12px !important;
    left: 12px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
  }
  #stockView .card__body{
    padding: 10px 12px 12px !important;
  }
  #stockView .card__title{
    font-size: 14.5px !important;
  }
  #stockView .card__meta{
    font-size: 12.5px !important;
  }
  #stockView .card__actions-inline .btn--compact{
    min-height: 44px !important;
    font-size: 15px !important;
  }
}

/* Apple unified accent + control metrics */
:root{
  --apple-green-bg: rgba(0,152,219,.16);
  --apple-green-bg-hover: rgba(0,152,219,.24);
  --apple-green-border: rgba(126,204,239,.42);
  --apple-green-border-hover: rgba(150,216,245,.56);
  --apple-green-text: #ecf9ff;

  --apple-control-radius: 14px;
  --apple-control-height: 44px;
  --apple-control-px: 16px;
  --kb-offset: 0px;
}

.btn--primary{
  min-height: var(--apple-control-height) !important;
  padding: 0 var(--apple-control-px) !important;
  border-radius: var(--apple-control-radius) !important;
  border-color: var(--apple-green-border) !important;
  background: var(--apple-green-bg) !important;
  color: var(--apple-green-text) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
.btn--primary:not(:disabled):hover{
  border-color: var(--apple-green-border-hover) !important;
  background: var(--apple-green-bg-hover) !important;
  color: var(--apple-green-text) !important;
}

.dialog__actions .btn,
#stockView .card__actions-inline .btn--compact{
  min-height: var(--apple-control-height) !important;
  padding: 0 var(--apple-control-px) !important;
  border-radius: var(--apple-control-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

#stockView .status-filters .chip{
  min-height: var(--apple-control-height) !important;
  padding: 0 var(--apple-control-px) !important;
  border-radius: var(--apple-control-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.chip--status:not(.is-active){
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.02) !important;
  color: rgba(223,231,243,.92) !important;
}

.chip--status.chip--all.is-active{
  border-color: rgba(118,188,255,.68) !important;
  background: rgba(10,132,255,.24) !important;
  color: #edf6ff !important;
}
.chip--status.chip--zero.is-active{
  border-color: rgba(255,126,118,.70) !important;
  background: rgba(255,69,58,.24) !important;
  color: #fff0f1 !important;
}
.chip--status.chip--low.is-active{
  border-color: rgba(255,165,117,.72) !important;
  background: rgba(255,149,0,.24) !important;
  color: #fff2e4 !important;
}
.chip--status.chip--critical.is-active{
  border-color: rgba(255,225,132,.76) !important;
  background: rgba(255,204,0,.24) !important;
  color: #fff7d1 !important;
}
.chip--status.chip--ok.is-active{
  border-color: var(--apple-green-border-hover) !important;
  background: var(--apple-green-bg-hover) !important;
  color: #f2fbff !important;
}
.chip--status.chip--white.is-active{
  border-color: rgba(226,232,240,.78) !important;
  background: rgba(226,232,240,.22) !important;
  color: #f8fbff !important;
}
.chip--status.chip--black.is-active{
  border-color: rgba(148,163,184,.56) !important;
  background: rgba(15,23,42,.72) !important;
  color: #e2e8f0 !important;
}
.chip--status.chip--kit.is-active{
  border-color: rgba(166,139,250,.70) !important;
  background: rgba(124,58,237,.26) !important;
  color: #f2ebff !important;
}

#stockView .card__actions-inline .btn--primary.btn--compact{
  border-color: var(--apple-green-border) !important;
  background: var(--apple-green-bg) !important;
  color: var(--apple-green-text) !important;
}
#stockView .card__actions-inline .btn--primary.btn--compact:hover{
  border-color: var(--apple-green-border-hover) !important;
  background: var(--apple-green-bg-hover) !important;
}

/* iPad/iOS keyboard-safe dialogs */
dialog.dialog{
  width: min(720px, calc(100vw - 24px));
  max-height: min(86vh, calc(100dvh - 24px));
  margin: 12px auto;
  overflow: visible;
  transition: margin .16s ease;
}
dialog.dialog:not([open]){
  display: none !important;
}
dialog.dialog[open]{
  /* coluna flex: conteúdo rola, rodapé (ações) fica fixo dentro da caixa
     em vez de vazar pra fora quando o form é alto */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
dialog.dialog[open] .dialog__content{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
dialog.dialog[open] .dialog__actions,
dialog.dialog[open] .dialog__footer{
  flex: 0 0 auto;
  background: rgba(9,14,25,.6);
}

@media (max-width: 1024px){
  dialog.dialog{
    width: min(720px, calc(100vw - 16px));
    max-height: min(88vh, calc(100dvh - 12px));
    margin: 6px auto;
  }
}

html.kb-open dialog.dialog[open]{
  display: block;
  max-height: min(84vh, calc(100dvh - 12px - var(--kb-offset)));
  overflow: hidden;
}
html.kb-open dialog.dialog[open] .dialog__content{
  min-height: auto;
  max-height: calc(100dvh - var(--kb-offset) - 190px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
html.kb-open dialog.dialog[open] .dialog__actions{
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(10,14,24,.18), rgba(10,14,24,.56));
  backdrop-filter: blur(14px) saturate(105%);
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* Stock top controls: search-first UX */
.topbar__row--controls{
  justify-content: flex-start !important;
}
.topbar__row--controls .topbar__controls-left:empty{
  display: none !important;
}
.topbar__actions.topbar__actions--search-first{
  display: grid !important;
  width: 100% !important;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 440px) auto !important;
  align-items: center !important;
  gap: 10px !important;
}
.topbar__actions.topbar__actions--search-first #search.search-main{
  width: 100% !important;
  max-width: 640px !important;
  justify-self: start !important;
  min-height: 52px !important;
  font-size: 18px !important;
  font-weight: 560 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.020)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset !important;
}
.topbar__actions.topbar__actions--search-first #search.search-main::placeholder{
  color: rgba(196,206,222,.80) !important;
}
.topbar__actions.topbar__actions--search-first #search.search-main:focus{
  border-color: rgba(84,173,255,.58) !important;
  box-shadow:
    0 0 0 3px rgba(10,132,255,.16),
    0 0 0 1px rgba(84,173,255,.34) inset !important;
}
.topbar__actions.topbar__actions--search-first #sortBy{
  width: 100% !important;
  min-width: 360px !important;
  justify-self: end !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  color: rgba(220,228,241,.84) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.018) !important;
}
.topbar__actions.topbar__actions--search-first #refresh{
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 1024px){
  .topbar__actions.topbar__actions--search-first{
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }
  .topbar__actions.topbar__actions--search-first #search.search-main{
    grid-column: 1 / -1 !important;
    max-width: none !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }
  .topbar__actions.topbar__actions--search-first #sortBy{
    min-width: 0 !important;
    grid-column: 1 !important;
    justify-self: stretch !important;
    min-height: 42px !important;
    font-size: 15px !important;
  }
  .topbar__actions.topbar__actions--search-first #refresh{
    grid-column: 2 !important;
    min-height: 42px !important;
    padding: 0 12px !important;
  }
}

/* Final force: estoque badge radius aligned with image corners */
#stockView .card .card__img-top{
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
}
#stockView .card .card__img-top > .card__stock{
  margin: 0 !important;
  width: max-content !important;
  max-width: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  border-radius: 17px !important;
  -webkit-clip-path: inset(0 round 17px);
  clip-path: inset(0 round 17px);
}
@media (max-width: 720px){
  #stockView .card .card__img-top{
    top: 9px !important;
    left: 9px !important;
  }
  #stockView .card .card__img-top > .card__stock{
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
    -webkit-clip-path: inset(0 round 16px);
    clip-path: inset(0 round 16px);
  }
}

/* iPad/tablet: 4 cards per row */
@media (min-width: 768px) and (max-width: 1180px){
  #stockView .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* iPad: evita corte visual em cards com 4 colunas */
  #stockView .card{
    min-width: 0 !important;
  }
  #stockView .card__body{
    min-width: 0 !important;
  }
  #stockView .card__title{
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    min-height: 2.32em !important;
    max-height: 2.32em !important;
    line-height: 1.16 !important;
    font-size: 12px !important;
    overflow: hidden !important;
  }
  #stockView .card__meta{
    line-height: 1.2 !important;
    min-height: 1.2em !important;
    font-size: 10px !important;
    gap: 4px !important;
  }
  #stockView .card__meta-main{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #stockView .card__meta-date{
    font-size: .9em !important;
  }
  #stockView .card__actions-inline{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  #stockView .card__footer{
    margin-top: auto !important;
    padding-top: 6px !important;
  }
  #stockView .card__actions-inline .btn--compact{
    min-width: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    border-radius: 15px !important;
    font-size: 10.5px !important;
    font-weight: 640 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
}

/* Skeleton loading (cards) */
#stockView .card.card--skeleton{
  border-color: rgba(255,255,255,.08) !important;
  pointer-events: none !important;
}
#stockView .card.card--skeleton .card__img,
#stockView .card.card--skeleton .card__body,
#stockView .card.card--skeleton .card__footer,
#stockView .card.card--skeleton .card__actions-inline{
  background: transparent !important;
}
#stockView .card.card--skeleton .card__img::after{
  display: none !important;
}

#stockView .card.card--skeleton .skel{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
#stockView .card.card--skeleton .skel::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: stock-skeleton-shimmer 1.25s ease-in-out infinite;
}

#stockView .card.card--skeleton .skel--square{
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
#stockView .card.card--skeleton .skel--title{
  height: 18px;
  margin: 2px 0 10px;
}
#stockView .card.card--skeleton .skel--line{
  height: 12px;
  margin-top: 8px;
}
#stockView .card.card--skeleton .skel--line-short{
  width: 64%;
}
#stockView .card.card--skeleton .skel--btn{
  width: 100%;
  height: 34px;
  border-radius: 10px;
  margin-top: 14px;
}

@keyframes stock-skeleton-shimmer{
  100% { transform: translateX(100%); }
}

/* Transition: skeleton -> real cards */
#stockView .grid.grid--fade-in .card{
  opacity: 0;
  transform: translateY(8px) scale(.992);
}
#stockView .grid.grid--fade-in.grid--fade-in-done .card{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .24s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}

#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(1){ transition-delay: 12ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(2){ transition-delay: 20ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(3){ transition-delay: 28ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(4){ transition-delay: 36ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(5){ transition-delay: 44ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(6){ transition-delay: 52ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(7){ transition-delay: 60ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(8){ transition-delay: 68ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(9){ transition-delay: 76ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(10){ transition-delay: 84ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(11){ transition-delay: 92ms; }
#stockView .grid.grid--fade-in.grid--fade-in-done .card:nth-child(12){ transition-delay: 100ms; }

/* Split stock card layout */
#stockView .card__split{
  display: grid !important;
  gap: 6px !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.03) !important;
}
#stockView .card__split span{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: rgba(205,216,233,.94) !important;
}
#stockView .card__split span strong{
  color: #f8fbff !important;
  font-size: 13px !important;
}
/* Linha do estoque (número principal agora que é um só) */
#stockView .card__split .card__stock-line{ color: rgba(205,216,233,.96) !important; }
#stockView .card__split .card__stock-line strong{ font-size: 16px !important; color: #fff !important; }
/* Linha do estoque mínimo: separada por borda superior pra dar respiro visual */
#stockView .card__split .card__min-qty{
  padding-top: 6px !important;
  margin-top: 2px !important;
  border-top: 1px dashed rgba(255,255,255,.08) !important;
  color: rgba(205,216,233,.7) !important;
}
#stockView .card__split .card__min-qty strong{
  color: #cfd8dc !important;
}
/* Estoque mínimo OK — verde */
#stockView .card__split .card__min-qty.is-ok{
  color: #0098db !important;
}
#stockView .card__split .card__min-qty.is-ok strong{
  color: #0098db !important;
}
/* Estoque mínimo NÃO atingido — vermelho */
#stockView .card__split .card__min-qty.is-below{
  color: #ff6b6b !important;
}
#stockView .card__split .card__min-qty.is-below strong{
  color: #ff6b6b !important;
}

#stockView .card__actions-inline{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#stockView .card__actions-inline .btn--compact{
  min-width: 0 !important;
  width: 100% !important;
}
#stockView .card__actions-inline .btn--compact-remove{
  background: rgba(176, 52, 68, .24) !important;
  border-color: rgba(240, 126, 139, .44) !important;
  color: #ffe1e6 !important;
}
#stockView .card__img-top-right{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#stockView .card .btn--transfer-icon{
  min-height: 0 !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(147,197,253,.52) !important;
  background: rgba(59,130,246,.22) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(3px) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  color: #eef6ff !important;
}
#stockView .card .btn--transfer-icon:hover{
  background: rgba(59,130,246,.34) !important;
  border-color: rgba(191,219,254,.68) !important;
}
#stockView .card .btn--edit-icon{
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(251,191,36,.64) !important;
}
#stockView .card .btn--edit-icon:hover{
  background: rgba(245,158,11,.34) !important;
  border-color: rgba(253,224,71,.72) !important;
}

@media (max-width: 720px){
  #stockView .card__split{
    padding: 9px 10px !important;
    gap: 5px !important;
  }
  #stockView .card__split span{
    font-size: 11.5px !important;
  }
  #stockView .card__actions-inline{
    grid-template-columns: 1fr 1fr !important;
  }
  #stockView .card .btn--transfer-icon{
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICAÇÕES
   ═══════════════════════════════════════════════════════════════ */
#notificationsPanel,
#kanbanPanel,
#upsellerPanel{
  padding: 20px 24px;
  width: 100%;
  box-sizing: border-box;
}
.notifications-header{
  margin-bottom: 20px;
}
.notifications-header h2{
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.notifications-subtitle{
  color: var(--muted);
  font-size: .88rem;
  margin: 0;
}
.notifications-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notification-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  transition: background .15s;
}
.notification-item:hover{
  background: var(--glass-strong);
}
.notification-item__icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  background: rgba(255, 90, 90, .18);
  color: #ff5a5a;
}
/* imagem do produto (alinhado com os cards de "A fazer") */
.notification-item__img{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.notification-item__img--ph{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.notification-item__body{
  flex: 1;
  min-width: 0;
}
.notification-item__title{
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification-item__desc{
  color: var(--muted);
  font-size: .82rem;
  margin-top: 2px;
}
.notification-item__time{
  color: var(--muted);
  font-size: .76rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.notification-item__action{
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   KANBAN BOARD
   ═══════════════════════════════════════════════════════════════ */
.kanban-header{
  margin-bottom: 20px;
}
.kanban-header h2{
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.kanban-subtitle{
  color: var(--muted);
  font-size: .88rem;
  margin: 0;
}
.kanban-board{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.kanban-column{
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kanban-column__header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--glass-border);
}
.kanban-column__header h3{
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  flex: 1;
}
.kanban-column__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-column__dot--todo{
  background: #aebbd1;
}
.kanban-column__dot--progress{
  background: #4b8bff;
}
.kanban-column__dot--done{
  background: #0098db;
}
.kanban-column__count{
  background: rgba(255,255,255,.1);
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.kanban-column__body{
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 80px;
  flex: 1;
  transition: background .15s;
}
.kanban-column__body.drag-over{
  background: rgba(75, 139, 255, .10);
  border-radius: 0 0 14px 14px;
}

/* ─── Kanban Card ─── */
.kanban-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg1);
  border: 1px solid var(--glass-border);
  cursor: grab;
  transition: box-shadow .15s, transform .15s, opacity .15s;
  user-select: none;
  -webkit-user-select: none;
}
.kanban-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.kanban-card.dragging{
  opacity: .45;
  transform: scale(.96);
}
.kanban-card__img{
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg2);
}
.kanban-card__info{
  flex: 1;
  min-width: 0;
}
.kanban-card__name{
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.25;
  /* Quebra só em espaços (não letra-por-letra) — mantém leitura natural */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  overflow: visible;
}
.kanban-card__stock{
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-card__date{
  font-size: .72rem;
  color: rgba(174,187,209,.6);
  display: inline;
}
.kanban-card__history{
  font-size: .7rem;
  color: rgba(174,187,209,.75);
  margin-top: 3px;
  letter-spacing: .2px;
}
.kanban-card__badge{
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.kanban-card__badge--zero{
  background: rgba(255, 50, 50, .2);
  color: #ff5a5a;
}
.kanban-card__badge--low{
  background: rgba(255, 130, 80, .2);
  color: #ff9955;
}
.kanban-card__badge--ok{
  background: rgba(0,152,219, .2);
  color: #0098db;
}
.kanban-card__qty-produced{
  font-size: .78rem;
  color: #0098db;
  font-weight: 600;
  flex-shrink: 0;
}

/* ─── Empty column ─── */
.kanban-empty{
  text-align: center;
  color: var(--muted);
  font-size: .84rem;
  padding: 24px 8px;
  opacity: .7;
}

/* ─── Mobile Tabs ─── */
.kanban-tabs{
  display: none; /* hidden on desktop */
  gap: 0;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}
.kanban-tab{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.kanban-tab.is-active{
  background: rgba(75, 139, 255, .18);
  color: var(--text);
}
.kanban-tab:not(.is-active):hover{
  background: rgba(255,255,255,.06);
}
.kanban-tab__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-tab__dot--todo{ background: #aebbd1; }
.kanban-tab__dot--progress{ background: #4b8bff; }
.kanban-tab__dot--done{ background: #0098db; }
.kanban-tab__count{
  background: rgba(255,255,255,.1);
  padding: 1px 7px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

/* ─── Card action buttons ─── */
.kanban-card__actions{
  display: none;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kanban-card__move-btn{
  background: rgba(75, 139, 255, .15);
  border: 1px solid rgba(75, 139, 255, .3);
  color: #7ab4ff;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, transform .1s;
}
.kanban-card__move-btn:hover{
  background: rgba(75, 139, 255, .28);
  color: #fff;
}
.kanban-card__move-btn:active{
  transform: scale(.96);
}
.kanban-card__move-btn--done{
  background: rgba(0,152,219, .15);
  border-color: rgba(0,152,219, .3);
  color: #0098db;
}
.kanban-card__move-btn--done:hover{
  background: rgba(0,152,219, .28);
  color: #fff;
}
.kanban-card__move-btn--back{
  background: rgba(255,255,255,.06);
  border-color: var(--glass-border);
  color: var(--muted);
}
.kanban-card__move-btn--back:hover{
  background: rgba(255,255,255,.12);
  color: var(--text);
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 768px){
  .kanban-tabs{
    display: flex;
  }
  .kanban-board{
    display: flex;
    flex-direction: column;
  }
  /* Hide column headers on mobile (tabs replace them) */
  .kanban-column__header{
    display: none;
  }
  /* Hide all columns, show only active */
  .kanban-column{
    display: none;
    width: 100%;
    border: none;
    background: transparent;
    backdrop-filter: none;
  }
  .kanban-column.is-active-column{
    display: flex;
  }
  .kanban-column__body{
    padding: 0;
  }
  .kanban-card__actions{
    display: flex;
  }
  .kanban-card{
    cursor: default;
    padding: 14px 16px;
  }
  .kanban-card__info{
    flex: 1;
  }
  .kanban-card__name{
    font-size: .92rem;
    white-space: normal;
  }
  /* Full-width action buttons on mobile */
  .kanban-card{
    flex-wrap: wrap;
  }
  .kanban-card__actions{
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    margin-top: 8px;
    justify-content: flex-end;
  }
  .kanban-header{
    display: none;
  }
}
@media (hover: none) and (pointer: coarse){
  .kanban-card__actions{
    display: flex;
  }
  .kanban-card{
    cursor: default;
  }
}

.empty-msg{
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  padding: 40px 16px;
}

/* ============================================================
   PEDIDOS UPSELLER
   ============================================================ */
.upseller{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}
.upseller__header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.upseller__title{
  margin: 0 0 4px 0;
  font-size: 1.4rem;
}
.upseller__subtitle{
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}
.upseller__section-title{
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}
.upseller__sync-status{
  background: rgba(255,180,0,0.08);
  border: 1px solid rgba(255,180,0,0.3);
  color: #ffb400;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .9rem;
}
.upseller__sync-status.is-error{
  background: rgba(255,60,60,0.08);
  border-color: rgba(255,60,60,0.3);
  color: #ff6b6b;
}
.upseller__sync-status.is-ok{
  background: rgba(0,152,219,0.06);
  border-color: rgba(0,152,219,0.25);
  color: #0098db;
}

.upseller__summary{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}
.upseller__summary-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.upseller-summary-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.upseller-summary-item__name{
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
}
.upseller-summary-item__qty{
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent, #0098db);
}
.upseller-summary-item__meta{
  font-size: .78rem;
  color: var(--muted);
}

.upseller__unmapped{
  border: 1px solid rgba(255,180,0,0.4);
  border-radius: 10px;
  background: rgba(255,180,0,0.05);
}
.upseller__unmapped-details > summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  list-style: none;
}
.upseller__unmapped-details > summary::-webkit-details-marker{ display: none; }
.upseller__unmapped-icon{ margin-right: 6px; }
.upseller__unmapped-hint{
  color: var(--muted);
  font-weight: 400;
  font-size: .85rem;
}
.upseller__unmapped-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 14px;
}
.upseller-unmapped-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  font-size: .88rem;
}
.upseller-unmapped-item__info{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.upseller-unmapped-item__name{
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upseller-unmapped-item__meta{
  color: var(--muted);
  font-size: .78rem;
}

.upseller__orders-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upseller-order{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}
.upseller-order__head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.upseller-order__platform{
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,180,255,0.15);
  color: #5dc5ff;
  letter-spacing: .5px;
}
.upseller-order__platform[data-platform="shopee"]{ background: rgba(255,82,40,0.15); color: #ff7c5c; }
.upseller-order__platform[data-platform="mercado"]{ background: rgba(255,220,0,0.15); color: #ffd95a; }
.upseller-order__platform[data-platform="tiktok"]{ background: rgba(220,220,220,0.12); color: #e3e3e3; }
.upseller-order__number{
  font-size: .85rem;
  font-weight: 600;
}
.upseller-order__time{
  font-size: .78rem;
  color: var(--muted);
  margin-left: auto;
}
.upseller-order__amount{
  font-size: .85rem;
  color: var(--muted);
}
.upseller-order__items{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 12px;
}
.upseller-order-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: .88rem;
}
.upseller-order-item.is-unmapped{
  background: rgba(255,180,0,0.08);
  border: 1px solid rgba(255,180,0,0.25);
}
.upseller-order-item__qty{
  font-weight: 700;
  font-size: 1rem;
  min-width: 32px;
  text-align: center;
}
.upseller-order-item__info{ flex: 1; min-width: 0; }
.upseller-order-item__name{
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upseller-order-item__meta{
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  gap: 8px;
}
.upseller-order-item__map-btn{
  flex-shrink: 0;
}
.upseller-order__actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.upseller-map__source{
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: .88rem;
}
.upseller-map__row{
  display: flex;
  gap: 6px;
  padding: 3px 0;
}
.upseller-map__label{
  color: var(--muted);
  min-width: 130px;
}
.form-error{
  margin: 8px 0 0;
  color: #ff6b6b;
  font-size: .85rem;
}

@media (max-width: 640px){
  .upseller__summary-list{ grid-template-columns: 1fr 1fr; }
  .upseller-order__time{ margin-left: 0; width: 100%; order: 99; }
}

/* ============================================================
   UPSELLER — refinamentos: toolbar, paginação, layout compacto
   ============================================================ */
.upseller__toolbar{
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(140px, auto));
  gap: 8px;
  margin-bottom: 8px;
}
.upseller__search{ width: 100%; }
.upseller__filter{ min-width: 140px; }

.upseller__pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 6px;
}
.upseller__page-info{
  font-size: .85rem;
  color: var(--muted);
}

/* Compactar card de pedido — header em uma linha, itens em uma linha cada */
.upseller-order{ padding: 10px 12px; }
.upseller-order.is-dim{ opacity: .55; }
.upseller-order__head{
  margin-bottom: 6px;
  font-size: .85rem;
  flex-wrap: wrap;
  align-items: center;
}
.upseller-order__state{
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(150,150,150,0.15);
}
.upseller-order__state.is-toship{ background: rgba(255,180,0,0.18); color: #ffb84d; }
.upseller-order__state.is-unpaid{ background: rgba(150,150,150,0.18); color: #aaa; }
.upseller-order__state.is-shipped{ background: rgba(0,152,219,0.15); color: #0098db; }
.upseller-order__state.is-other{ background: rgba(100,160,255,0.15); color: #7bb4ff; }

.upseller-order__actions-inline{
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.upseller-order__items{
  padding: 6px 0 0;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
}
.upseller-order-item{
  padding: 5px 8px;
  font-size: .82rem;
  gap: 8px;
  display: flex;
  align-items: center;
}
.upseller-order-item__qty{
  font-weight: 700;
  font-size: .95rem;
  min-width: 28px;
  text-align: right;
  color: var(--accent, #0098db);
}
.upseller-order-item__name{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.upseller-order-item__sku{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.upseller-order-item__attr{
  font-size: .75rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Resumo mais denso */
.upseller__summary{ padding: 10px 12px; }
.upseller-summary-item{ padding: 8px 10px; }
.upseller-summary-item__qty{ font-size: 1.2rem; }

@media (max-width: 640px){
  .upseller__toolbar{ grid-template-columns: 1fr; }
  .upseller-order__head{ gap: 6px; }
  .upseller-order__time{ font-size: .72rem; }
  .upseller-order__amount{ display: none; }
  .upseller-order-item__attr{ display: none; }
  .upseller-order__actions-inline{ width: 100%; margin-left: 0; justify-content: flex-end; padding-top: 4px; }
}

/* Toolbar com 5 filtros — search ocupa linha cheia em cima, selects abaixo */
.upseller__toolbar{
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.upseller__search{
  grid-column: 1 / -1;
}
@media (max-width: 900px){
  .upseller__toolbar{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .upseller__toolbar{ grid-template-columns: 1fr; }
}

/* Deadline tag */
.upseller-order__deadline{
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(150,150,150,0.15);
  color: #aaa;
  flex-shrink: 0;
}
.upseller-order__deadline.is-overdue{
  background: rgba(255,60,60,0.18);
  color: #ff6b6b;
  animation: pulse-deadline 1.8s ease-in-out infinite;
}
.upseller-order__deadline.is-today{
  background: rgba(255,140,0,0.22);
  color: #ff9d3f;
}
.upseller-order__deadline.is-tomorrow{
  background: rgba(255,200,0,0.18);
  color: #ffd95a;
}
.upseller-order__deadline.is-future{
  background: rgba(150,150,150,0.12);
  color: #999;
}
@keyframes pulse-deadline{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .55; }
}

/* Cores específicas por etapa processando */
.upseller-order__state.is-allocate{   background: rgba(140,100,255,0.18); color: #a98aff; }
.upseller-order__state.is-invoice{    background: rgba(255,120,200,0.18); color: #ff90c8; }
.upseller-order__state.is-inprocess{  background: rgba(0,180,255,0.18);   color: #5dc5ff; }
.upseller-order__state.is-toship{     background: rgba(255,180,0,0.18);   color: #ffb84d; }
.upseller-order__state.is-ignore{     background: rgba(120,120,120,0.15); color: #888; }

/* ============================================================
   UPSELLER — UX polish (margens, hierarquia, microvisual)
   ============================================================ */
.upseller{ padding: 0; gap: 20px; }

.upseller__header{
  align-items: center;
  padding-bottom: 4px;
}
.upseller__subtitle{
  font-size: 1rem;
  color: var(--text);
  font-weight: 500;
}

/* Resumo do dia: card destacado */
.upseller__summary{
  background: linear-gradient(135deg, rgba(0,152,219,0.08), rgba(0,152,219,0.02));
  border-color: rgba(0,152,219,0.25);
}
.upseller__summary::before{
  content: "🎯 Produzir hoje";
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(0,152,219,0.9);
  margin-bottom: 10px;
}

.upseller-summary-item{
  background: rgba(0,152,219,0.06);
  border-color: rgba(0,152,219,0.18);
}
.upseller-summary-item__name{
  font-size: .85rem;
  line-height: 1.35;
}

/* Não-mapeados — header mais discreto */
.upseller__unmapped-details > summary{
  padding: 14px 16px;
  font-size: .92rem;
}

/* Toolbar — espaçamento melhor */
.upseller__toolbar{
  gap: 10px;
  padding: 4px 0 0;
}
.upseller__search{
  padding: 10px 14px;
}
.upseller__filter{
  padding: 9px 12px;
  font-size: .9rem;
}

/* Lista — pedidos com mais ar */
.upseller__orders-list{
  gap: 10px;
}
.upseller-order{
  padding: 12px 14px;
  border-radius: 10px;
  transition: border-color .15s ease, transform .12s ease;
}
.upseller-order:hover{
  border-color: rgba(255,255,255,0.12);
}
.upseller-order__head{
  font-size: .85rem;
  gap: 8px;
}
.upseller-order__number{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  color: var(--muted);
}
.upseller-order__amount{
  font-weight: 600;
  color: var(--text);
}

/* Cor ML (Mercado) — amarelo do ML mesmo */
.upseller-order__platform[data-platform="mercado"]{
  background: rgba(255,222,0,0.18);
  color: #ffe04d;
}

/* Empty state melhor */
#upsellerEmpty{
  padding: 60px 16px;
  font-size: .95rem;
}

/* Paginação visual */
.upseller__pagination{
  margin-top: 8px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 640px){
  #upsellerPanel{ padding: 16px 14px; }
  .upseller-order__amount{ display: inline; }
}

/* ============================================================
   UPSELLER — refactor pro layout denso (max-width + compactação)
   ============================================================ */
/* Container central limita largura — não estica em tela grande */
.upseller__header,
.upseller__sync-status,
.upseller__summary,
.upseller__unmapped,
.upseller__toolbar,
.upseller__orders-list,
.upseller__pagination,
.upseller .empty-msg{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Pedido — mais denso */
.upseller-order{
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upseller-order__head{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: .82rem;
  border-bottom: none;
  margin-bottom: 0;
  min-width: 0;
}
/* Esquerda: tags agrupadas */
.upseller-order__platform,
.upseller-order__state,
.upseller-order__deadline{
  padding: 2px 6px;
  font-size: .68rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .2px;
}
.upseller-order__number{
  font-size: .8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 80px;
}
.upseller-order__amount{
  color: var(--text);
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
}
.upseller-order__time{
  color: var(--muted);
  font-size: .75rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.upseller-order__actions-inline{
  gap: 4px;
  margin-left: 6px;
}
.upseller-order__actions-inline .btn{
  padding: 4px 10px;
  font-size: .78rem;
}

/* Itens — uma linha cada, com qty destaque */
.upseller-order__items{
  border-top: 1px dashed rgba(255,255,255,0.06);
  padding-top: 8px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upseller-order-item{
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .82rem;
  gap: 8px;
}
.upseller-order-item__qty{
  min-width: 24px;
  font-size: .9rem;
}
.upseller-order-item__sku,
.upseller-order-item__attr{
  font-size: .72rem;
  padding: 1px 5px;
}

/* Empty state — fica no centro mesmo no container */
.upseller .empty-msg{
  padding: 40px 16px;
}

/* Toolbar — visualmente conectada com a lista (mesma largura) */
.upseller__toolbar{
  gap: 8px;
}

/* Resumo "Produzir hoje" — grid menor, mais cards por linha */
.upseller__summary-list{
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.upseller-summary-item{
  padding: 8px 10px;
}
.upseller-summary-item__qty{
  font-size: 1.15rem;
}

/* Mobile — flex column quando muito apertado */
@media (max-width: 720px){
  .upseller-order__head{
    flex-wrap: wrap;
  }
  .upseller-order__number{ flex: 1 1 100%; order: 5; }
  .upseller-order__time{ order: 6; }
  .upseller-order__amount{ order: 7; }
  .upseller-order__actions-inline{
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-end;
    margin-top: 4px;
  }
}

/* Modal de mapeamento — lista de componentes */
.upseller-map__components-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.upseller-map__components-header label{
  font-size: .88rem;
  font-weight: 600;
  margin: 0;
}
.upseller-map__components{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.upseller-map__component-row{
  display: grid;
  grid-template-columns: 1fr 80px auto;
  gap: 6px;
  align-items: center;
}
.upseller-map__component-name{ padding: 8px 10px; }
.upseller-map__component-qty{
  padding: 8px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.upseller-map__component-remove{
  padding: 6px 10px;
  font-size: .85rem;
  color: #ff8a8a;
}
.upseller-map__hint{
  font-size: .78rem;
  color: var(--muted);
  margin: 4px 0 0;
  font-style: italic;
}

/* ============================================================
   UPSELLER — Tabs + imagens nos cards
   ============================================================ */
.upseller__tabs{
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.upseller__tab{
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 18px;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.upseller__tab:hover{ color: var(--text); }
.upseller__tab.is-active{
  color: var(--text);
  border-bottom-color: var(--accent, #0098db);
}
.upseller__tab-icon{ font-size: 1.05rem; }
.upseller__tab-count{
  background: rgba(255,255,255,0.08);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.upseller__tab.is-active .upseller__tab-count{
  background: rgba(0,152,219,0.2);
  color: #0098db;
}

.upseller__tab-pane{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.upseller__hint{
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 12px;
  font-style: italic;
}

/* Card de produção com imagem */
.upseller-summary-item{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}
.upseller-summary-item__img{
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
  display: block;
}
.upseller-summary-item__img--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.upseller-summary-item__body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.upseller-summary-item__name{
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upseller-summary-item__meta{
  font-size: .78rem;
  color: var(--muted);
}
.upseller-summary-item__qty{
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent, #0098db);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.upseller__summary-list{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Imagem em items do pedido */
.upseller-order-item{
  display: grid;
  grid-template-columns: 36px 32px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
}
.upseller-order-item__img{
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
}
.upseller-order-item__img--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Card "processado" com visual mais discreto */
.upseller-order.is-processed{
  opacity: .88;
  background: rgba(0,152,219,0.04);
  border-color: rgba(0,152,219,0.15);
}
.upseller-order__processed-info{
  font-size: .78rem;
  color: var(--muted);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.upseller-revert-btn{
  color: #ffb84d;
}
.upseller-revert-btn:hover{
  background: rgba(255,140,0,0.1);
}

@media (max-width: 640px){
  .upseller__tabs{ overflow-x: auto; }
  .upseller__tab{ padding: 10px 12px; font-size: .88rem; flex-shrink: 0; }
  .upseller-order-item{
    grid-template-columns: 32px 28px 1fr;
    grid-template-rows: auto auto;
  }
  .upseller-order-item__img{ width: 32px; height: 32px; grid-row: span 2; }
  .upseller-order__processed-info{ display: block; width: 100%; margin: 4px 0; }
}

/* Garante que [hidden] tenha precedência sobre display:flex do .upseller */
.upseller[hidden],
#upsellerPanel[hidden],
.upseller__tab-pane[hidden]{
  display: none !important;
}

/* Contadores oficiais do UpSeller (all-state-count) */
.upseller__state-counts{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.upseller__state-counts-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.upseller__state-count{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  text-align: center;
  min-height: 132px;
  justify-content: space-between;
}
.upseller__state-count-label{
  font-size: .8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
}
.upseller__state-count-value{
  font-size: 2.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  margin: 4px 0 2px;
}
.upseller__state-count[data-state="allocate"]{      border-color: rgba(140,100,255,0.3); background: rgba(140,100,255,0.05); }
.upseller__state-count[data-state="invoice_pending"]{ border-color: rgba(255,120,200,0.3); background: rgba(255,120,200,0.05); }
.upseller__state-count[data-state="in_process"]{    border-color: rgba(0,180,255,0.3); background: rgba(0,180,255,0.05); }
.upseller__state-count[data-state="to_ship"]{       border-color: rgba(255,180,0,0.3); background: rgba(255,180,0,0.05); }
.upseller__state-count[data-state="allocate"] .upseller__state-count-value{ color: #a98aff; }
.upseller__state-count[data-state="invoice_pending"] .upseller__state-count-value{ color: #ff90c8; }
.upseller__state-count[data-state="in_process"] .upseller__state-count-value{ color: #5dc5ff; }
.upseller__state-count[data-state="to_ship"] .upseller__state-count-value{ color: #ffb84d; }

@media (max-width: 640px){
  .upseller__state-counts-grid{ grid-template-columns: 1fr 1fr; }
  .upseller__state-count{ min-height: 116px; padding: 14px 12px 14px; }
  .upseller__state-count-value{ font-size: 1.65rem; }
  .upseller__state-count-progress{ font-size: 10px; padding: 2px 8px; }
}

/* Cards de contagem agora são botões clicáveis */
.upseller__state-count{
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  font-family: inherit;
  color: inherit;
}
.upseller__state-count:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.2);
}
.upseller__state-count.is-active{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18) inset;
  transform: translateY(-1px);
}
.upseller__state-count[data-state="allocate"].is-active{
  background: rgba(140,100,255,0.16);
  border-color: rgba(140,100,255,0.6);
}
.upseller__state-count[data-state="invoice_pending"].is-active{
  background: rgba(255,120,200,0.16);
  border-color: rgba(255,120,200,0.6);
}
.upseller__state-count[data-state="in_process"].is-active{
  background: rgba(0,180,255,0.16);
  border-color: rgba(0,180,255,0.6);
}
.upseller__state-count[data-state="to_ship"].is-active{
  background: rgba(255,180,0,0.16);
  border-color: rgba(255,180,0,0.6);
}

/* ============================================================
   Modal Mapear SKU — UI refinada
   ============================================================ */
#upsellerMapDialog{
  width: min(560px, calc(100vw - 24px));
}
#upsellerMapDialog .dialog__content{
  padding: 16px 20px;
}
#upsellerMapDialog .dialog__header{
  padding: 16px 20px 0;
}
#upsellerMapDialog .dialog__footer{
  padding: 12px 20px 16px;
}

.upseller-map__source{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: .85rem;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 14px;
}
.upseller-map__row{
  display: contents;
}
.upseller-map__row .upseller-map__label{
  color: var(--muted);
  font-size: .8rem;
  align-self: start;
  padding-top: 1px;
  min-width: 0;
}
.upseller-map__row strong{
  font-weight: 600;
  word-break: break-word;
  font-size: .85rem;
}

.upseller-map__components-header{
  margin-bottom: 10px;
  align-items: flex-start;
}
.upseller-map__components-header label{
  font-size: .92rem;
}

.upseller-map__components{
  gap: 8px;
  margin-bottom: 10px;
}
.upseller-map__component-row{
  grid-template-columns: 1fr 64px 36px;
  gap: 8px;
}
.upseller-map__component-name{
  padding: 10px 12px;
  font-size: .9rem;
}
.upseller-map__component-qty{
  padding: 10px 8px;
  font-size: .95rem;
  font-weight: 600;
}
.upseller-map__component-remove{
  background: transparent;
  border: 1px solid rgba(255,138,138,0.25);
  color: #ff8a8a;
  border-radius: 6px;
  padding: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.upseller-map__component-remove:hover{
  background: rgba(255,138,138,0.1);
  border-color: rgba(255,138,138,0.5);
}
.upseller-map__hint{
  font-size: .78rem;
  color: var(--muted);
  margin: 6px 0 0;
  font-style: normal;
  line-height: 1.4;
}

/* Destinatário no card de pedido */
.upseller-order__buyer{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 6px 2px 4px;
  font-size: .82rem;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.upseller-order__buyer-name{
  font-weight: 600;
  color: var(--text);
}
.upseller-order__buyer-name::before{
  content: "👤 ";
  opacity: .55;
  font-size: .85em;
}
.upseller-order__buyer-location{
  color: var(--muted);
  font-size: .78rem;
}
.upseller-order__buyer-location::before{
  content: "📍 ";
  opacity: .55;
  font-size: .85em;
}

/* Sobrescreve width:260px do .input dentro do grid de componentes */
.upseller-map__component-row .upseller-map__component-name,
.upseller-map__component-row .upseller-map__component-qty{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.upseller-map__component-row{
  display: grid !important;
  grid-template-columns: 1fr 72px 38px !important;
  gap: 8px;
  align-items: stretch;
}
.upseller-map__component-remove{
  width: 100%;
  height: 100%;
  min-height: 38px;
}

/* ============================================================
   Modal de confirmação "Dar baixa"
   ============================================================ */
#upsellerProcessDialog{
  width: min(640px, calc(100vw - 24px));
}
#upsellerProcessDialog .dialog__content{ padding: 16px 20px; }

.upseller-process__info{
  margin: 0 0 14px;
  font-size: .92rem;
  color: var(--muted);
}
.upseller-process__info strong{ color: var(--text); }

.upseller-process__summary{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upseller-process__summary-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .9rem;
}
.upseller-process__summary-row span{ color: var(--muted); }
.upseller-process__summary-row strong{
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.upseller-process__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.upseller-process__item{
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.upseller-process__item.is-ok{
  border-color: rgba(0,152,219,0.25);
  background: rgba(0,152,219,0.04);
}
.upseller-process__item.is-insufficient{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.05);
}
.upseller-process__item.is-unmapped{
  border-color: rgba(255,180,0,0.35);
  background: rgba(255,180,0,0.05);
  grid-template-columns: 1fr;
}
.upseller-process__item-img{
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
}
.upseller-process__item-img--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.upseller-process__item-body{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.upseller-process__item-name{
  font-weight: 600;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upseller-process__item-stock{
  font-size: .8rem;
  color: var(--muted);
}
.upseller-process__item-stock strong{ color: var(--text); font-variant-numeric: tabular-nums; }
.upseller-process__item-substock{
  font-size: .72rem;
  color: var(--muted);
  opacity: .75;
}
.upseller-process__item-qty{
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ff8a8a;
  min-width: 60px;
  text-align: right;
}
.upseller-process__item.is-ok .upseller-process__item-qty{ color: #ff8a8a; }
.upseller-process__item.is-insufficient .upseller-process__item-qty{ color: #ff5050; }
.upseller-process__warn{
  color: #ff8080;
  font-weight: 600;
  font-size: .82rem;
}
.upseller-process__warning{
  background: rgba(255,180,0,0.12);
  border: 1px solid rgba(255,180,0,0.3);
  color: #ffb84d;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.4;
}

/* ============================================================
   Separação visual entre cards de pedido
   ============================================================ */
.upseller__orders-list{
  gap: 14px !important;
}
.upseller-order{
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008)) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
              0 2px 8px rgba(0,0,0,0.18);
  position: relative;
}
/* faixa colorida lateral indicando a categoria */
.upseller-order::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
}
.upseller-order:has(.upseller-order__state.is-allocate)::before{   background: #a98aff; }
.upseller-order:has(.upseller-order__state.is-invoice)::before{    background: #ff90c8; }
.upseller-order:has(.upseller-order__state.is-inprocess)::before{  background: #5dc5ff; }
.upseller-order:has(.upseller-order__state.is-toship)::before{     background: #ffb84d; }
.upseller-order:has(.upseller-order__state.is-unpaid)::before{     background: #888; }

.upseller-order:hover{
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset,
              0 4px 14px rgba(0,0,0,0.25);
}

/* Header com mais respiro */
.upseller-order__head{
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 8px;
}

/* Items list — separadores mais discretos entre items */
.upseller-order__items{
  border-top: none !important;
  padding-top: 0 !important;
  gap: 6px !important;
}
.upseller-order-item{
  background: rgba(0,0,0,0.18);
  border: 1px solid transparent;
}
.upseller-order-item.is-unmapped{
  background: rgba(255,180,0,0.10);
  border-color: rgba(255,180,0,0.25);
}

/* Card de produção: nome pode quebrar em até 2 linhas */
.upseller-summary-item__name{
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25 !important;
  font-size: .88rem !important;
  word-break: break-word;
}
.upseller-summary-item{
  align-items: flex-start !important;
  padding: 12px !important;
  min-height: 72px;
}
.upseller-summary-item__img{
  width: 52px !important;
  height: 52px !important;
}
.upseller-summary-item__qty{
  font-size: 1.6rem !important;
  align-self: center !important;
}
.upseller-summary-item__body{
  padding-top: 1px;
}

/* Em telas estreitas: cards maiores em 1 col */
@media (max-width: 720px){
  .upseller__summary-list{ grid-template-columns: 1fr !important; }
}

/* ============================================================
   Kanban dentro da aba Produção
   ============================================================ */
.upseller-kanban-board{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.upseller-kanban-column{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}
.upseller-kanban-column__header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.upseller-kanban-column__header h3{
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
}
.upseller-kanban-column__dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.upseller-kanban-column__dot--todo{ background: #ffb84d; }
.upseller-kanban-column__dot--progress{ background: #5dc5ff; }
.upseller-kanban-column__dot--done{ background: #0098db; }
.upseller-kanban-column__count{
  margin-left: auto;
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.upseller-kanban-column__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upseller-kanban-empty{
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  padding: 24px 12px;
  margin: 0;
}

.upseller-kb-card{
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
.upseller-kb-card__img{
  grid-row: span 1;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(255,255,255,0.04);
}
.upseller-kb-card__img--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.upseller-kb-card__body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upseller-kb-card__name{
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.25;
  word-break: break-word;
}
.upseller-kb-card__metas{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.upseller-kb-card__badge{
  font-size: .72rem;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.07);
  color: var(--muted);
}
.upseller-kb-card__badge strong{ color: var(--text); }
.upseller-kb-card__badge--upseller{
  background: rgba(255,180,0,0.18);
  color: #ffb84d;
}
.upseller-kb-card__badge--done{
  background: rgba(0,152,219,0.18);
  color: #0098db;
}
.upseller-kb-card__meta{ font-size: .72rem; color: var(--muted); }
.upseller-kb-card__actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.upseller-kb-card__btn{
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  padding: 5px 8px;
  font-size: .78rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.upseller-kb-card__btn:hover{ background: rgba(255,255,255,0.08); }
.upseller-kb-card__btn--start{
  background: rgba(0,180,255,0.14);
  border-color: rgba(0,180,255,0.4);
  color: #5dc5ff;
}
.upseller-kb-card__btn--start:hover{ background: rgba(0,180,255,0.22); }
.upseller-kb-card__btn--done{
  background: rgba(0,152,219,0.14);
  border-color: rgba(0,152,219,0.4);
  color: #0098db;
}
.upseller-kb-card__btn--done:hover{ background: rgba(0,152,219,0.22); }
.upseller-kb-card__btn--back{
  flex: 0 0 auto;
  padding: 5px 10px;
}
.upseller-kb-card__warn{
  font-size: .75rem;
  color: #ff8a8a;
  padding: 4px 8px;
  background: rgba(255,138,138,0.08);
  border-radius: 5px;
}

@media (max-width: 900px){
  .upseller-kanban-board{ grid-template-columns: 1fr; }
}

/* Badge especial para "demanda UpSeller" no card de Kanban */
.kanban-card__badge--upseller{
  background: rgba(255,140,0,0.22) !important;
  color: #ff9d3f !important;
  border-color: rgba(255,140,0,0.4) !important;
}
.kanban-card__warn{
  font-size: .72rem;
  color: #ff8a8a;
  padding: 4px 8px;
  background: rgba(255,138,138,0.08);
  border-radius: 5px;
  display: inline-block;
}

/* Aba Produção: usa largura total (não limita a 1100px) e botões visíveis */
#upsellerTabProduction{
  max-width: none !important;
}
#upsellerKanbanBoard{
  width: 100%;
}
#upsellerKanbanBoard .kanban-card__actions{
  display: flex !important;
  margin-left: auto;
}
#upsellerKanbanBoard .kanban-card{
  cursor: grab;
}
#upsellerKanbanBoard .kanban-card.dragging{
  opacity: .45;
  transform: scale(.96);
}

/* =========================================================================
   KANBAN UPSELLER — Design v2
   Hierarquia: badge urgência (esquerda) | nome + chips (centro) | ações (baixo)
   ========================================================================= */

#upsellerKanbanBoard{
  overflow-x: auto;
  padding-bottom: 8px;
}
#upsellerKanbanBoard .kanban-column{
  flex: 1 1 360px !important;
  min-width: 360px !important;
  max-width: 480px;
  background: rgba(255,255,255,0.015);
  border-radius: 16px;
  padding: 12px;
}
#upsellerKanbanBoard .kanban-column__header{
  margin-bottom: 14px;
  padding: 0 4px;
}

/* Card como um todo: grid 2 linhas — corpo + footer (badge esq + ações dir) */
#upsellerKanbanBoard .kanban-card{
  display: grid !important;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "img    body"
    "footer footer";
  gap: 10px 12px;
  padding: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
#upsellerKanbanBoard .kanban-card:hover{
  border-color: rgba(255,255,255,0.12) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Imagem com sombra interna sutil */
#upsellerKanbanBoard .kanban-card__img{
  grid-area: img;
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  object-fit: cover;
  align-self: start;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Body = nome + chips juntos, sem disputar espaço com botões */
#upsellerKanbanBoard .kanban-card__info{
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#upsellerKanbanBoard .kanban-card__name{
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em;
  color: var(--text);
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Chips (📦 ped / 📊 est / 🎯 mín) em linha */
#upsellerKanbanBoard .kanban-card__stock,
#upsellerKanbanBoard .kanban-card__stock--multi{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  white-space: normal;
  margin: 0;
}

/* Footer = badge urgência à esquerda + ações à direita NA MESMA LINHA */
#upsellerKanbanBoard .kanban-card__badge,
#upsellerKanbanBoard .kanban-card__qty-produced,
#upsellerKanbanBoard .kanban-card__actions{
  grid-area: footer;
  align-self: center;
}
#upsellerKanbanBoard .kanban-card__badge,
#upsellerKanbanBoard .kanban-card__qty-produced{
  justify-self: start;
}
#upsellerKanbanBoard .kanban-card__actions{
  justify-self: end;
}

/* Badge "units_needed" — visual de destaque, mesmo height dos botões */
#upsellerKanbanBoard .kanban-card__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: rgba(255,167,38,0.14);
  border: 1px solid rgba(255,167,38,0.4);
  color: #ffb74d;
  letter-spacing: -0.02em;
}
#upsellerKanbanBoard .kanban-card__badge--upseller{
  background: rgba(255,167,38,0.16);
  border-color: rgba(255,167,38,0.5);
  color: #ffd180;
}
/* Quando units_needed = 0 (card de pedidos ativos sem necessidade) — verde */
#upsellerKanbanBoard .kanban-card__badge:not(.kanban-card__badge--upseller){
  background: rgba(0,152,219,0.10);
  border-color: rgba(0,152,219,0.30);
  color: #0098db;
}

#upsellerKanbanBoard .kanban-card__qty-produced{
  font-size: 1rem;
  font-weight: 700;
  color: #0098db;
}

/* Ações: alinhadas à direita, mesma altura do badge */
#upsellerKanbanBoard .kanban-card__actions{
  display: flex;
  align-items: center;
  gap: 8px;
}
#upsellerKanbanBoard .kanban-card__move-btn{
  padding: 0 14px !important;
  height: 34px;
  font-size: .85rem !important;
  font-weight: 600;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Coloração sutil por coluna — distingue rapidamente */
#upsellerKanbanBoard .kanban-column--todo .kanban-card{
  box-shadow: inset 3px 0 0 rgba(255,167,38,0.4);
}
#upsellerKanbanBoard .kanban-column--progress .kanban-card{
  box-shadow: inset 3px 0 0 rgba(100,160,255,0.4);
}
#upsellerKanbanBoard .kanban-column--done .kanban-card{
  box-shadow: inset 3px 0 0 rgba(0,152,219,0.4);
}

/* Card "stock_only" (sem pedidos pendentes, abaixo do mín) — borda esquerda azul-meta */
#upsellerKanbanBoard .kanban-card[data-status="todo"]:has(.kanban-card__stat--min){
  /* já tem regra acima, mas mantém a hierarquia */
}

/* Empty state das colunas — visual mais cuidado */
#upsellerKanbanBoard .kanban-column__empty{
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: .9rem;
  opacity: .5;
}

/* Mobile: cards full width, ações empilhadas se necessário */
@media (max-width: 640px){
  #upsellerKanbanBoard .kanban-column{
    min-width: 280px !important;
    max-width: none;
  }
  #upsellerKanbanBoard .kanban-card__name{
    font-size: .95rem !important;
  }
}

/* Botão "Editar mapeamento" — discreto */
.upseller-edit-map-btn{
  opacity: .55;
  padding: 3px 8px !important;
  font-size: .85rem !important;
  transition: opacity .12s ease;
}
.upseller-edit-map-btn:hover{ opacity: 1; }

/* Botão Atualizar durante sync — barra de loading indeterminada */
#upsellerRefresh.is-syncing{
  position: relative;
  overflow: hidden;
  pointer-events: none;
  color: var(--muted);
}
#upsellerRefresh.is-syncing::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #0098db), transparent);
  animation: upseller-sync-bar 1.2s ease-in-out infinite;
}
@keyframes upseller-sync-bar{
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Grupo de botões no card de SKU não mapeado */
.upseller-unmapped-item__actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.upseller-ignore-sku-btn{
  color: var(--muted) !important;
  opacity: .8;
}
.upseller-ignore-sku-btn:hover{
  opacity: 1;
  color: #ff8a8a !important;
}

/* Modal Confirmar baixa: margens mais generosas */
#upsellerProcessDialog{
  width: min(680px, calc(100vw - 32px));
  max-height: min(94vh, calc(100dvh - 12px));
}
#upsellerProcessDialog .dialog__header{
  padding: 14px 24px 0;
}
#upsellerProcessDialog .dialog__content{
  padding: 14px 24px 20px;
}
#upsellerProcessDialog .dialog__footer{
  padding: 14px 24px 18px;
  gap: 10px;
}

#upsellerProcessDialog .upseller-process__info{
  margin: 0 0 8px;
  font-size: .92rem;
  letter-spacing: .3px;
}
#upsellerProcessDialog .upseller-process__summary{
  padding: 12px 16px;
  margin-bottom: 10px;
}
#upsellerProcessDialog .upseller-process__summary-row{
  padding: 4px 0;
}
#upsellerProcessDialog .upseller-process__list{
  gap: 10px;
  padding-bottom: 4px;
  /* scroll único: o .dialog__content já rola; sem scroll aninhado (que cortava) */
  max-height: none;
  overflow: visible;
}
#upsellerProcessDialog .upseller-process__item{
  padding: 10px 14px;
  gap: 12px;
  grid-template-columns: 46px 1fr auto;
}
#upsellerProcessDialog .upseller-process__item-img{
  width: 46px;
  height: 46px;
}
#upsellerProcessDialog .upseller-process__item-body{
  gap: 4px;
}
#upsellerProcessDialog .upseller-process__item-stock{
  font-size: .82rem;
}
#upsellerProcessDialog .upseller-process__item-qty{
  font-size: 1.5rem;
  min-width: 56px;
}

/* Modal Confirmar baixa — destinatário + items originais */
#upsellerProcessDialog .upseller-process__head{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  margin-bottom: 8px;
}
#upsellerProcessDialog .upseller-process__head-sep{ color: var(--muted); }
#upsellerProcessDialog .upseller-process__order-id{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  color: var(--muted);
}

#upsellerProcessDialog .upseller-process__buyer{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 8px 0 12px;
  font-size: .88rem;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
  margin-bottom: 14px;
}
#upsellerProcessDialog .upseller-process__buyer-name{
  font-weight: 600;
}
#upsellerProcessDialog .upseller-process__buyer-location{
  color: var(--muted);
}

#upsellerProcessDialog .upseller-process__source-items{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
#upsellerProcessDialog .upseller-process__source-title{
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 8px;
}
#upsellerProcessDialog .upseller-process__source-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: .85rem;
  flex-wrap: wrap;
}
#upsellerProcessDialog .upseller-process__source-qty{
  font-weight: 700;
  color: var(--accent, #0098db);
  min-width: 26px;
}
#upsellerProcessDialog .upseller-process__source-name{
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
#upsellerProcessDialog .upseller-process__source-sku{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
}
#upsellerProcessDialog .upseller-process__source-attr{
  font-size: .76rem;
  color: var(--muted);
}

/* Header do modal Confirmar baixa: centraliza o X verticalmente com o título */
#upsellerProcessDialog .dialog__header{
  align-items: center !important;
}

/* Tags no modal Confirmar baixa */
#upsellerProcessDialog .upseller-process__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
#upsellerProcessDialog .upseller-process__tags .upseller-order__platform,
#upsellerProcessDialog .upseller-process__tags .upseller-order__state,
#upsellerProcessDialog .upseller-process__tags .upseller-order__deadline{
  padding: 3px 8px;
  font-size: .72rem;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}
#upsellerProcessDialog .upseller-process__order-id{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9rem;
  color: var(--text);
  font-weight: 500;
}

/* CTA "Pedidos UpSeller" na tela inicial */
.upseller-cta{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: linear-gradient(135deg, rgba(0,152,219,0.10), rgba(0,180,255,0.08));
  border: 1px solid rgba(0,152,219,0.25);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 14px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.upseller-cta:hover{
  border-color: rgba(0,152,219,0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.upseller-cta:active{
  transform: translateY(0);
}
.upseller-cta__icon{
  font-size: 1.6rem;
  flex-shrink: 0;
}
.upseller-cta__body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.upseller-cta__title{
  font-size: 1rem;
  font-weight: 700;
  color: #0098db;
}
.upseller-cta__sub{
  font-size: .82rem;
  color: var(--muted);
}
.upseller-cta__arrow{
  font-size: 1.4rem;
  color: rgba(0,152,219,0.7);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.upseller-cta:hover .upseller-cta__arrow{
  transform: translateX(3px);
}

/* CTA UpSeller — versão compacta tipo pill */
.upseller-cta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  background: rgba(0,152,219,0.08) !important;
  border: 1px solid rgba(0,152,219,0.28) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  margin: 4px 0 14px !important;
  cursor: pointer !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  transition: background .12s ease, border-color .12s ease !important;
  box-shadow: none !important;
  transform: none !important;
  text-align: left !important;
}
.upseller-cta:hover{
  background: rgba(0,152,219,0.14) !important;
  border-color: rgba(0,152,219,0.5) !important;
  transform: none !important;
  box-shadow: none !important;
}
.upseller-cta__title{
  color: #0098db;
}
.upseller-cta__badge{
  background: rgba(0,152,219,0.25);
  color: #0098db;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.upseller-cta__arrow{
  font-size: 1rem;
  color: rgba(0,152,219,0.8);
  margin-left: 2px;
  transition: transform .12s ease;
}
.upseller-cta:hover .upseller-cta__arrow{
  transform: translateX(3px);
}
/* esconde elementos da versão antiga se estiverem no DOM */
.upseller-cta__icon,
.upseller-cta__body,
.upseller-cta__sub{ display: none !important; }

/* CTA UpSeller: dentro da topbar, ao lado da engrenagem */
.topbar__right .upseller-cta{
  padding: 6px 12px !important;
  margin: 0 !important;
  font-size: .82rem !important;
  background: rgba(0,152,219,0.08) !important;
  border-color: rgba(0,152,219,0.3) !important;
}
.topbar__right .upseller-cta .upseller-cta__title{
  color: #0098db;
}
.topbar__right .upseller-cta .upseller-cta__arrow{
  display: none !important;
}
@media (max-width: 640px){
  /* Em mobile mostra só o ícone + badge */
  .topbar__right .upseller-cta .upseller-cta__title{
    display: none;
  }
  .topbar__right .upseller-cta::before{
    content: "📋";
    font-size: 1rem;
  }
}

/* ============================================================
   UX POLISH — Tela inicial mais limpa
   ============================================================ */

/* KPIs em barra horizontal compacta */
#stockView .kpis{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
  padding: 8px 18px 0 !important;
}
#stockView .kpi{
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
#stockView .kpi__label{
  font-size: .78rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
#stockView .kpi__value{
  font-size: 1.1rem !important;
  margin: 0 !important;
  font-weight: 700 !important;
}

/* Toolbar de busca/ordenar/refresh — uma linha mais limpa */
#stockView .topbar__row--controls,
#stockView .topbar__actions{
  gap: 8px;
}
#stockView .sort-refresh-row{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Botão Transferir sai pra menu lateral (esconde da tela principal) */
#transferAllBtnTop{
  display: none !important;
}
/* Botão Desfoque mais discreto */
#blurToggle{
  font-size: .78rem !important;
  padding: 6px 10px !important;
  opacity: .7;
}
#blurToggle:hover{ opacity: 1; }

/* Bulk toolbar — só visível em bulk mode, com mais clareza */
.bulk-toolbar:not([hidden]){
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 12px 16px !important;
  margin: 8px 18px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Chips de filtro em linha única com flex wrap controlado */
.status-filters{
  padding: 12px 18px 0;
  gap: 6px !important;
}
.status-filters .chip{
  padding: 6px 12px !important;
  font-size: .82rem !important;
}

@media (max-width: 720px){
  #stockView .kpi{ flex: 1 1 calc(50% - 6px); }
  #stockView .kpi__value{ font-size: 1rem !important; }
}

/* ============================================================
   UX POLISH v2 — limpeza agressiva da home
   ============================================================ */

/* Subtitle e label do usuário: discretos */
#viewSubtitle{
  font-size: .78rem !important;
  opacity: .55;
}
/* Vista "stock": esconde subtitle (redundante) */
body:has(#stockView:not([hidden])) #viewSubtitle{ display: none !important; }

/* Usuário vira ícone discreto no canto */
#currentUserLabel{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-size: .75rem !important;
  padding: 4px 10px !important;
  opacity: .65;
}

/* Esconde "Desfoque: OFF" da home (vai pra config) */
#blurToggle{ display: none !important; }

/* Bulk toolbar só aparece quando o usuário clica "Selecionar vários" */
#bulkToolbar{
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin: 8px 18px;
  padding: 10px 14px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Quando bulk não tá ativo, mostra só uma linha com 1 botão discreto */
#bulkToolbar .bulk-toolbar__row{
  align-items: center;
  gap: 10px;
}
#bulkToggleBtn{
  font-size: .82rem !important;
  padding: 5px 12px !important;
  opacity: .8;
}
#bulkToggleBtn:hover{ opacity: 1; }
#bulkToggleBtn.is-active{
  background: rgba(255,180,0,0.18) !important;
  border-color: rgba(255,180,0,0.4) !important;
  color: #ffb84d !important;
  opacity: 1;
}

/* Linha de ações em bulk mode — labels em cima dos inputs */
.bulk-toolbar__field{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.bulk-toolbar__field > span{
  font-size: .72rem !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.bulk-toolbar__field input,
.bulk-toolbar__field select{
  font-size: .9rem !important;
}

/* Topbar: gap maior pra respirar */
.topbar__right{ gap: 8px !important; }

/* Garantir hidden funciona em elementos com display explícito */
#bulkToolbar[hidden],
#bulkActionsRow[hidden],
.bulk-toolbar__field[hidden]{
  display: none !important;
}

/* Quando NÃO está em bulk mode, mostra só o botão "Selecionar vários" — sem fundo nem moldura */
#bulkToolbar:not(:has(.is-active)){
  background: transparent;
  border: none;
  padding: 4px 18px !important;
  margin: 0 !important;
}

/* ============================================================
   UX POLISH v3 — refinamentos finais
   ============================================================ */

/* Inputs/select com altura menor pra não dominar */
#stockView .topbar__actions .input,
#stockView #search,
#stockView #sortBy{
  padding: 9px 14px !important;
  font-size: .9rem !important;
  border-radius: 10px !important;
}

/* Atualizar fica como ícone discreto */
#refresh{
  padding: 9px 12px !important;
  font-size: 1.05rem !important;
  background: rgba(255,255,255,0.04) !important;
}
/* texto "Atualizar" só fica em sr-only se necessário */

/* Usuário: lucas escondido (vai pro menu lateral). Tem? deixa em mobile só */
#currentUserLabel{
  display: none !important;
}

/* Chips de filtro: scroll horizontal em 1 linha quando aperta */
.status-filters{
  flex-wrap: wrap !important;
  padding: 10px 18px 4px !important;
  gap: 5px !important;
}
.status-filters .chip{
  padding: 5px 11px !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
}

/* "Selecionar vários" — bem mais discreto, alinhado à direita */
#bulkToolbar:not(:has(.is-active)){
  display: flex !important;
  justify-content: flex-end;
  padding: 0 18px 8px !important;
}
#bulkToggleBtn{
  font-size: .76rem !important;
  padding: 4px 10px !important;
  opacity: .5;
}
#bulkToggleBtn:hover{ opacity: .9; }

/* Topbar: avatar circular pro user (substitui "Usuário: X") */
#openSettings{
  padding: 8px 11px !important;
  border-radius: 10px !important;
}

/* KPIs com mais contraste sutil */
#stockView .kpi{
  padding: 7px 13px !important;
}
#stockView .kpi__label{
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .7;
}
#stockView .kpi__value{
  font-size: 1.05rem !important;
}

/* Mostrar nome do usuário no menu lateral em vez do topo */
.side-menu__user{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: .85rem;
}

/* ============================================================
   UX POLISH v4 — Design senior
   ============================================================ */

/* KPIs com identidade visual e hierarquia */
#stockView .kpi{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
  position: relative;
  overflow: hidden;
}
#stockView .kpi--btn{
  cursor: pointer;
}
#stockView .kpi--btn:hover{
  border-color: rgba(255,255,255,0.16) !important;
  transform: translateY(-1px);
}
#stockView .kpi__icon{
  font-size: 1.3rem;
  opacity: .8;
  filter: grayscale(0.2);
  flex-shrink: 0;
}
#stockView .kpi__body{
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0;
}
#stockView .kpi__label{
  font-size: .7rem !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600 !important;
  opacity: .55 !important;
  color: var(--text) !important;
  white-space: nowrap;
}
#stockView .kpi__value{
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text) !important;
}

/* Variantes semânticas — cor sutil no fundo + faixa lateral */
#stockView .kpi--info{
  background: rgba(255,255,255,0.025) !important;
}
#stockView .kpi--danger{
  background: rgba(255,80,80,0.06) !important;
  border-color: rgba(255,80,80,0.18) !important;
}
#stockView .kpi--danger .kpi__value{ color: #ff8a8a !important; }
#stockView .kpi--danger:hover{ border-color: rgba(255,80,80,0.4) !important; }

#stockView .kpi--warn{
  background: rgba(255,180,0,0.06) !important;
  border-color: rgba(255,180,0,0.2) !important;
}
#stockView .kpi--warn .kpi__value{ color: #ffb84d !important; }
#stockView .kpi--warn:hover{ border-color: rgba(255,180,0,0.4) !important; }

/* Layout dos KPIs: melhor grid responsivo */
#stockView .kpis{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 20px 0 !important;
}

/* Search com altura mais elegante */
#search{
  height: 44px;
  font-size: .92rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  padding-left: 16px !important;
}

/* SortBy + Atualizar — densidade melhor */
#sortBy{
  height: 40px;
  font-size: .88rem !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
}
#refresh{
  height: 40px !important;
  width: 40px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Chips de filtro mais elegantes */
.status-filters{
  padding: 14px 20px 6px !important;
}
.status-filters .chip{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  padding: 6px 13px !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  transition: all .15s ease;
}
.status-filters .chip:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.status-filters .chip.is-active{
  background: rgba(0,152,219,0.14) !important;
  border-color: rgba(0,152,219,0.5) !important;
  color: #0098db !important;
  font-weight: 600 !important;
}

/* Padding lateral consistente em tudo */
.topbar__row--controls{
  padding-left: 20px !important;
  padding-right: 20px !important;
}

@media (max-width: 640px){
  #stockView .kpi__value{ font-size: 1.15rem !important; }
  #stockView .kpi{ padding: 10px 12px !important; }
}

/* Atualizar: ícone discreto em vez de texto vazando */
#refresh{
  width: auto !important;
  min-width: 40px;
  padding: 0 14px !important;
  font-size: 0 !important;
  position: relative;
}
#refresh::after{
  content: "↻";
  font-size: 1.15rem;
  line-height: 1;
  color: var(--text);
}

/* Alinhar sortBy + refresh na mesma linha */
.sort-refresh-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
.sort-refresh-row #sortBy{
  flex: 1 1 auto !important;
  min-width: 0;
}
.sort-refresh-row #refresh{
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Ícone refresh com SVG inline (currentColor) */
#refresh{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text);
  transition: background .12s ease, border-color .12s ease, transform .25s ease;
}
#refresh::after{
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><polyline points='1 20 1 14 7 14'/><path d='M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15'/></svg>") no-repeat center / contain;
}
#refresh:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
#refresh:active::after{
  transition: transform .4s ease;
  transform: rotate(360deg);
}

/* Padroniza border-radius do refresh com o dos inputs (14px) */
#refresh{
  border-radius: 14px !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}
#sortBy{
  border-radius: 14px !important;
  height: 48px !important;
}

/* Garante que hidden funciona nos botões com display!important */
#refresh[hidden],
#sortBy[hidden],
#search[hidden]{
  display: none !important;
}

/* Pedidos UpSeller CTA — padronizar com outros botões (14px, 48px alto) */
.topbar__right .upseller-cta{
  border-radius: 14px !important;
  padding: 0 16px !important;
  height: 48px;
  font-size: .9rem !important;
}
.topbar__right #openSettings{
  border-radius: 14px !important;
  height: 48px !important;
  width: 48px;
}

/* Input editável de quantidade no modal Confirmar baixa */
.upseller-process__item-qty-wrap{
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  justify-content: flex-end;
}
.upseller-process__item-qty-sign{
  font-size: 1.3rem;
  font-weight: 700;
  color: #ff8a8a;
  line-height: 1;
}
.upseller-process__item-qty-input{
  width: 56px;
  height: 38px;
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,80,80,0.3);
  color: #ff8a8a;
  border-radius: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color .12s ease, background .12s ease;
}
.upseller-process__item-qty-input:focus{
  border-color: rgba(255,80,80,0.6);
  background: rgba(255,80,80,0.14);
}
.upseller-process__item.is-insufficient .upseller-process__item-qty-input{
  border-color: rgba(255,60,60,0.6);
  background: rgba(255,60,60,0.18);
  color: #ff5050;
}
/* esconde o spinner do number input */
.upseller-process__item-qty-input::-webkit-outer-spin-button,
.upseller-process__item-qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.upseller-process__item-qty-input{ -moz-appearance: textfield; }

.upseller-process__item-after{ margin-left: 2px; }
.upseller-process__item-after strong{ color: var(--text); }


/* === Histórico: baixas reais no estoque (deductions) === */
.upseller-order__deductions{
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upseller-order__deductions-title{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.upseller-order__deduction{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
  flex-wrap: wrap;
}
.upseller-order__deduction-qty{
  font-weight: 700;
  color: #e57373;
  min-width: 34px;
  text-align: right;
}
.upseller-order__deduction-name{
  flex: 1 1 auto;
  color: var(--text);
  font-weight: 500;
}
.upseller-order__deduction-stock{
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.upseller-order__deduction-flag{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,167,38,0.18);
  color: #ffb74d;
  border: 1px solid rgba(255,167,38,0.35);
}
.upseller-order__deduction.is-override .upseller-order__deduction-qty{
  color: #ffb74d;
}


/* === Badge de progresso "X de Y baixados" nos KPI cards === */
.upseller__state-count{ position: relative; }
.upseller__state-count-progress{
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.upseller__state-count.is-partial .upseller__state-count-progress{
  color: #ffb84d;
  background: rgba(255,180,77,0.10);
  border-color: rgba(255,180,77,0.25);
}
.upseller__state-count.is-complete{
  background: rgba(0,152,219,0.10) !important;
  border-color: rgba(0,152,219,0.45) !important;
}
.upseller__state-count.is-complete .upseller__state-count-value{
  color: #0098db !important;
}
.upseller__state-count.is-complete .upseller__state-count-progress{
  color: #0098db;
  background: rgba(0,152,219,0.14);
  border-color: rgba(0,152,219,0.4);
  font-weight: 800;
}

/* === Tela Mais Vendidos === */
.bestsellers__toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bestsellers__period-label{
  font-size: .85rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* Select com mesma estética dos inputs do app + chevron custom */
select.bestsellers__period-select{
  width: auto;
  min-width: 200px;
  max-width: 100%;
  padding: 10px 38px 10px 14px;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 12px;
}
select.bestsellers__period-select:hover{
  border-color: rgba(255,255,255,.24);
}
select.bestsellers__period-select option{
  background: #1a1f26;
  color: var(--text);
}
.bestsellers__period-info{
  font-size: .85rem;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.bestsellers__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bestsellers__loading{
  text-align: center;
  padding: 24px;
  color: var(--muted);
}
.bestseller-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.bestseller-card__rank{
  flex: 0 0 auto;
  min-width: 38px;
  font-size: .9rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.bestseller-card__img{
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.05);
}
.bestseller-card__img--placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.bestseller-card__body{
  flex: 1 1 auto;
  min-width: 0;
}
.bestseller-card__name{
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bestseller-card__bar{
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bestseller-card__bar-fill{
  height: 100%;
  background: linear-gradient(90deg, #4dabf7, #0098db);
  border-radius: 999px;
  transition: width .3s ease;
}
.bestseller-card__meta{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.bestseller-card__stock-badge{
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.bestseller-card__stock-badge.is-low{
  background: rgba(255,107,107,0.10);
  border-color: rgba(255,107,107,0.35);
  color: #ff8888;
}

/* === Card kanban "A fazer" — stats em chips que quebram linha === */
.kanban-card__stock--multi{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.kanban-card__stat{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.kanban-card__stat--min{
  background: rgba(255,167,38,0.10);
  border-color: rgba(255,167,38,0.30);
  color: #ffb74d;
}

/* Chip de expedição — semáforo (o que sai na baixa) */
.kanban-card__stat strong{ color: var(--text); font-variant-numeric: tabular-nums; }
/* Número "p/ pedidos" ao lado do badge grande — vermelho se precisa produzir,
   azul se os pedidos já estão cobertos (0). */
#upsellerKanbanBoard .kanban-card__badges{
  grid-area: footer;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#upsellerKanbanBoard .kanban-card__make-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
#upsellerKanbanBoard .kanban-card__make-badge.is-need{
  background: rgba(255,80,80,0.16); border: 1px solid rgba(255,80,80,0.5); color: #ff8a8a;
}
#upsellerKanbanBoard .kanban-card__make-badge.is-ok{
  background: rgba(96,125,255,0.16); border: 1px solid rgba(96,125,255,0.5); color: #aab4ff;
}

/* Filtro de cor da coluna "A fazer" */
.kanban-color-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 10px;
}
.kanban-color-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.kanban-color-chip:hover{ border-color: rgba(255,255,255,0.24); color: var(--text); }
.kanban-color-chip.is-active{
  background: rgba(124,140,255,0.16);
  border-color: rgba(124,140,255,0.5);
  color: #cdd4ff;
}
.kanban-color-chip__n{
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
.kanban-card__stat--exp.is-ok{ background: rgba(0,152,219,0.10); border-color: rgba(0,152,219,0.30); color: #0098db; }
.kanban-card__stat--exp.is-warn{ background: rgba(255,167,38,0.10); border-color: rgba(255,167,38,0.32); color: #ffb74d; }
.kanban-card__stat--exp.is-danger{ background: rgba(255,80,80,0.10); border-color: rgba(255,80,80,0.34); color: #ff7a7a; }
.kanban-card__stat--exp.is-ok strong,
.kanban-card__stat--exp.is-warn strong,
.kanban-card__stat--exp.is-danger strong{ color: inherit; }
  bottom: 6px; left: 50
/* === Custo de produção no modal de editar produto === */
.edit-prod-cost{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.edit-prod-cost__title{
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  margin-bottom: 10px;
}
.edit-prod-cost__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.edit-prod-cost__field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-prod-cost__field label{
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.edit-prod-cost__field .input{
  width: 100%;
  max-width: none;
  padding: 8px 10px;
  font-size: 13px;
}
.edit-prod-cost__hint{
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--muted);
  opacity: .8;
}

/* ====================== MÓDULO FINANCEIRO ====================== */
.finance{ padding: 8px 18px 40px; max-width: 1360px; margin: 0 auto; box-sizing: border-box; }
@media (max-width: 640px){ .finance{ padding: 8px 12px 32px; } }
.finance__header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.finance__title{ font-size: 1.5rem; font-weight: 800; margin: 0; }
.finance__subtitle{ font-size: .85rem; color: var(--muted); margin: 2px 0 0; }

.finance__toolbar{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,0.02); margin-bottom: 16px;
}
.finance__period-label{ font-size: .8rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
select.finance__period-select{ width: auto; min-width: 200px; }
.finance__period-info{ margin-left: auto; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.finance__loading{ padding: 28px; text-align: center; color: var(--muted); }

/* KPIs */
.finance__kpis{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.finance-kpi{
  padding: 14px 16px; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  display: flex; flex-direction: column; gap: 6px;
}
.finance-kpi--primary{ border-color: rgba(0,152,219,0.35); background: rgba(0,152,219,0.06); }
.finance-kpi__label{ font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.finance-kpi__value{ font-size: 1.45rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.finance-kpi__value--muted{ color: rgba(255,255,255,0.7); font-size: 1.2rem; }
.finance-kpi__value.is-pos{ color: #0098db; }
.finance-kpi__value.is-neg{ color: #ff6b6b; }

.finance__warn{
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: .85rem;
  background: rgba(255,167,38,0.10); border: 1px solid rgba(255,167,38,0.3); color: #ffb74d;
}

/* Charts */
.finance__charts{ display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px){ .finance__charts{ grid-template-columns: 1fr; } }
.finance__chart-card{
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.finance__chart-title{ font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px; }
.finance__chart-empty{ color: var(--muted); text-align: center; padding: 24px; opacity: .6; }

/* Bar chart (evolução diária) */
.finance__chart-days{ display: flex; align-items: flex-end; gap: 4px; height: 140px; overflow-x: auto; padding-bottom: 4px; }
.finance-bar{ display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 26px; flex: 1; }
.finance-bar__stack{ position: relative; width: 100%; height: 110px; display: flex; align-items: flex-end; justify-content: center; }
.finance-bar__fat{ position: absolute; bottom: 0; width: 70%; background: rgba(120,140,200,0.25); border-radius: 4px 4px 0 0; }
.finance-bar__lucro{ position: absolute; bottom: 0; width: 70%; background: linear-gradient(180deg, #0098db, #4d8eab); border-radius: 4px 4px 0 0; }
.finance-bar__label{ font-size: 9px; color: var(--muted); white-space: nowrap; }

/* Donut por plataforma */
.finance__chart-platform{ display: flex; flex-direction: column; align-items: center; gap: 14px; }
.finance-donut{ width: 120px; height: 120px; border-radius: 50%; position: relative; flex-shrink: 0; }
.finance-donut__hole{ position: absolute; inset: 26px; border-radius: 50%; background: var(--bg, #0b0e16); }
.finance-donut__legend{ display: flex; flex-direction: column; gap: 6px; width: 100%; font-size: .8rem; color: rgba(255,255,255,0.8); }
.finance-donut__legend-item{ display: flex; align-items: center; gap: 8px; }
.finance-donut__dot{ width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Ranking */
.finance__ranking{ border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,0.02); padding: 14px 16px; }
.finance__ranking-title{ font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 12px; }
.finance__ranking-list{ display: flex; flex-direction: column; gap: 8px; }
.finance-rank{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
.finance-rank.is-nocost{ border-color: rgba(255,167,38,0.25); }
.finance-rank__pos{ font-size: .85rem; font-weight: 800; color: var(--muted); min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.finance-rank__body{ flex: 1 1 auto; min-width: 0; }
.finance-rank__name{ font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.finance-rank__flag{ font-size: 10px; font-weight: 700; text-transform: uppercase; color: #ffb74d; background: rgba(255,167,38,0.12); border: 1px solid rgba(255,167,38,0.3); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.finance-rank__bar{ height: 5px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.finance-rank__bar-fill{ height: 100%; border-radius: 999px; }
.finance-rank__bar-fill.is-pos{ background: linear-gradient(90deg, #4d8eab, #0098db); }
.finance-rank__bar-fill.is-neg{ background: linear-gradient(90deg, #b84a4a, #ff6b6b); }
.finance-rank__meta{ display: flex; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.finance-rank__profit{ display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.finance-rank__lucro{ font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }
.finance-rank__lucro.is-pos{ color: #0098db; }
.finance-rank__lucro.is-neg{ color: #ff6b6b; }
.finance-rank__margem{ font-size: .72rem; color: var(--muted); }

.finance-config__hint{ font-size: .82rem; color: var(--muted); margin: 0 0 14px; }

/* Bolinha vermelha: produto sem custo de produção cadastrado */
.card__pricing-dot{
  position: absolute;
  bottom: 10px; right: 10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 0 0 2px rgba(255,59,48,0.25), 0 1px 4px rgba(0,0,0,0.4);
  z-index: 3;
  animation: pricingDotPulse 2s ease-in-out infinite;
}
@keyframes pricingDotPulse{
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,59,48,0.25), 0 1px 4px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(255,59,48,0.12), 0 1px 4px rgba(0,0,0,0.4); }
}

/* ===========================================================================
   BIPAGEM — leitura do código de barras da etiqueta
   =========================================================================== */
.bipagem{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:8px 0 16px;
}
.bipagem__scan{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:34px 22px 30px;
  border-radius:18px;
  background: rgba(0,152,219,.06);
  border:1.5px dashed rgba(0,152,219,.42);
}
.bipagem__icon{ font-size:2.6rem; line-height:1; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.bipagem__title{ margin:2px 0 0; font-size:1.18rem; color:var(--text); }
.bipagem__hint{ margin:0; max-width:460px; color:var(--muted); font-size:.92rem; line-height:1.4; }

/* câmera — altura responsiva (preenche a tela sem rolar; vh confiável no Safari) */
.bipagem__camera-wrap{
  position:relative;
  width:min(480px, 94%);
  height:clamp(280px, 44vh, 520px);
  margin-top:10px;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  border:2px solid rgba(0,152,219,.5);
  box-shadow: var(--shadow-md);
}
.bipagem__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* máscara/guia no formato do código de barras (faixa horizontal centralizada) */
.bipagem__reticle{
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  transform:translateY(-50%);
  height:34%;
  border-radius:10px;
  /* escurece tudo em volta, deixando só a faixa "iluminada" */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.46);
  pointer-events:none;
}
.bipagem__corner{
  position:absolute;
  width:24px; height:24px;
  border:3px solid #0098db;
}
.bipagem__corner--tl{ top:-2px; left:-2px; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.bipagem__corner--tr{ top:-2px; right:-2px; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.bipagem__corner--bl{ bottom:-2px; left:-2px; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.bipagem__corner--br{ bottom:-2px; right:-2px; border-left:0; border-top:0; border-bottom-right-radius:8px; }
.bipagem__reticle-label{
  position:absolute;
  top:-22px; left:0; right:0;
  text-align:center;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#bfe4f5;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
}
/* linha laser do scanner — varre de cima a baixo dentro da faixa */
.bipagem__reticle::after{
  content:"";
  position:absolute;
  left:3%; right:3%;
  top:8%;
  height:3px;
  border-radius:3px;
  background: linear-gradient(90deg, transparent, #6ed3ff 18%, #d8f3ff 50%, #6ed3ff 82%, transparent);
  box-shadow: 0 0 16px 4px rgba(0,152,219,.8), 0 0 4px 1px rgba(216,243,255,.9);
  animation: bipagemScanLine 1.5s cubic-bezier(.45,.05,.55,.95) infinite;
}
/* brilho/varredura de fundo acompanhando a linha */
.bipagem__reticle::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:8%;
  height:42px;
  transform:translateY(-50%);
  background: linear-gradient(180deg, rgba(0,152,219,0), rgba(0,152,219,.18), rgba(0,152,219,0));
  animation: bipagemScanGlow 1.5s cubic-bezier(.45,.05,.55,.95) infinite;
  pointer-events:none;
}
@keyframes bipagemScanLine{
  0%   { top:8%;  opacity:.35; }
  12%  { opacity:1; }
  50%  { top:92%; opacity:1; }
  88%  { opacity:1; }
  100% { top:8%;  opacity:.35; }
}
@keyframes bipagemScanGlow{
  0%,100%{ top:8%; }
  50%{ top:92%; }
}
.bipagem__corner{ animation: bipagemCornerPulse 1.5s ease-in-out infinite; }
@keyframes bipagemCornerPulse{
  0%,100%{ border-color:#0098db; filter:drop-shadow(0 0 2px rgba(0,152,219,.5)); }
  50%{ border-color:#b6e9ff; filter:drop-shadow(0 0 7px rgba(0,152,219,.95)); }
}
.bipagem__cam-hint{
  position:absolute;
  left:0; right:0; bottom:8px;
  text-align:center;
  font-size:.82rem;
  color:#e8f8ff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
  pointer-events:none;
}
.bipagem__controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:4px;
}

/* campo manual (fallback, recolhido em <details>) */
.bipagem__manual{
  width:min(440px, 94%);
  margin-top:2px;
}
.bipagem__manual > summary{
  cursor:pointer;
  color:var(--muted);
  font-size:.86rem;
  text-align:center;
  list-style:none;
  padding:6px;
}
.bipagem__manual > summary::-webkit-details-marker{ display:none; }
.bipagem__manual > summary:hover{ color:var(--text); }
.bipagem__manual-row{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.bipagem__manual-row .bipagem__input{ flex:1 1 auto; }
.bipagem__input{
  text-align:center;
  font-size:1.1rem;
  letter-spacing:.04em;
  font-weight:700;
  padding:12px 14px;
  text-transform:uppercase;
  border-radius:12px;
  border:2px solid rgba(0,152,219,.5);
  background: rgba(6,9,19,.55);
  color:var(--text);
  caret-color: #0098db;
}
.bipagem__input:focus{
  outline:none;
  border-color:#0098db;
  box-shadow:0 0 0 4px rgba(0,152,219,.18);
}
.bipagem__input::placeholder{ color: rgba(174,187,209,.55); font-weight:500; letter-spacing:0; text-transform:none; }
.bipagem__status{
  margin-top:4px;
  width:min(560px, 96%);
  font-size:.98rem;
  line-height:1.4;
  padding:11px 16px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background: var(--glass);
  color:var(--text);
}
.bipagem__status strong{ font-weight:800; }
.bipagem__status-sub{ display:block; margin-top:4px; font-size:.84rem; color:var(--muted); line-height:1.35; }
.bipagem__status--loading{ border-color: rgba(148,163,184,.4); background: rgba(148,163,184,.1); color:var(--muted); }
.bipagem__status--ok{ border-color: rgba(0,152,219,.55); background: rgba(0,152,219,.13); }
.bipagem__status--processed{ border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.12); }
.bipagem__status--error{ border-color: rgba(248,113,113,.55); background: rgba(248,113,113,.13); }

.bipagem__log-wrap{
  border-top:1px solid var(--glass-border);
  padding-top:14px;
}
.bipagem__log-title{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.bipagem__log{ display:flex; flex-direction:column; gap:6px; }
.bipagem__log-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:10px;
  background: var(--glass);
  border:1px solid var(--glass-border);
  font-size:.9rem;
}
.bipagem__log-icon{ flex:0 0 auto; }
.bipagem__log-code{ font-weight:700; color:var(--text); }
.bipagem__log-detail{ color:var(--muted); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bipagem__log-time{ flex:0 0 auto; color:var(--muted); font-variant-numeric:tabular-nums; font-size:.82rem; }
.bipagem__log-item--ok{ border-left:3px solid rgba(0,152,219,.7); }
.bipagem__log-item--processed{ border-left:3px solid rgba(56,189,248,.7); }
.bipagem__log-item--notfound{ border-left:3px solid rgba(251,191,36,.7); }
.bipagem__log-item--error{ border-left:3px solid rgba(248,113,113,.7); }

/* Tablet/desktop — câmera larga e baixa (formato de etiqueta), sem rolar.
   SEM teto de 1024px de propósito: senão o iPad, que fica na fronteira dos
   1024px, troca de regra (920px ↔ 480px) quando o modal abre/fecha e a
   largura "pula". Aplicando a tudo ≥641px o tamanho fica constante. */
@media (min-width: 641px){
  .upseller--bipagem .upseller__state-counts{ display:none !important; }
  .bipagem{ gap:10px; padding:4px 0 10px; }
  .bipagem__scan{ padding:14px 16px 16px; gap:6px; }
  .bipagem__icon{ display:none; }
  .bipagem__title{ font-size:1.1rem; }
  .bipagem__hint{ font-size:.88rem; max-width:680px; }
  /* largura em vw (viewport, estável no iPad) em vez de % do pai — assim a
     câmera não "pula" de largura quando o modal abre/fecha. */
  .bipagem__camera-wrap{ width:min(920px, 92vw); height:clamp(240px, 34vh, 380px); margin-top:4px; }
  /* faixa-guia mais larga e ocupando boa parte da altura */
  .bipagem__reticle{ left:4%; right:4%; height:46%; }
  .bipagem__manual, .bipagem__controls, .bipagem__status, .bipagem__log-wrap{ max-width:920px; margin-left:auto; margin-right:auto; }
  .bipagem__controls .btn{ min-width:200px; }
}

/* Celular */
@media (max-width: 640px){
  /* na Bipagem, esconde os KPIs de pedidos pra sobrar tela pra câmera */
  .upseller--bipagem .upseller__state-counts{ display:none !important; }
  .bipagem{ gap:14px; padding:4px 0 14px; }
  .bipagem__scan{ padding:18px 12px 18px; gap:8px; }
  .bipagem__icon{ font-size:2rem; }
  .bipagem__title{ font-size:1.05rem; }
  .bipagem__hint{ font-size:.85rem; line-height:1.35; }
  .bipagem__camera-wrap{ width:100%; height:min(46vh, 340px); margin-top:6px; }
  .bipagem__reticle{ left:6%; right:6%; height:30%; }
  .bipagem__corner{ width:20px; height:20px; }
  .bipagem__controls{ width:100%; }
  .bipagem__controls .btn{ flex:1 1 auto; }
  .bipagem__manual{ width:100%; }
  .bipagem__input{ font-size:1.05rem; }
  .bipagem__status{ width:100%; font-size:.9rem; }
  .bipagem__log-detail{ display:none; }
}

/* Telas bem baixas (celular em paisagem) — encolhe ainda mais a câmera */
@media (max-width: 640px) and (max-height: 720px){
  .bipagem__camera-wrap{ height:min(40vh, 260px); }
  .bipagem__hint{ display:none; }
}

/* ===========================================================================
   Modal de baixa — modo conferência (pedido já baixado, só visualização)
   =========================================================================== */
.upseller-process__done-banner{
  display:block;
  margin-bottom:10px;
  padding:10px 14px;
  border-radius:12px;
  background: rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.5);
  color:var(--text);
  font-size:.95rem;
  line-height:1.4;
}
.upseller-process__done-banner strong{ font-weight:800; }
.upseller-process__done-sub{ display:block; margin-top:2px; color:var(--muted); font-size:.85rem; }
.upseller-process__item.is-view{ opacity:.97; }
.upseller-process__item.is-view .upseller-process__item-body{ display:flex; align-items:center; }
.upseller-process__item-qty-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  padding:6px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:1.05rem;
  color:#e8f8ff;
  background: rgba(0,152,219,.16);
  border:1px solid rgba(0,152,219,.5);
}

/* ===========================================================================
   Kanban — botão Arquivar + painel de Arquivados
   =========================================================================== */
.kanban-card__archive-btn{
  flex:0 0 auto;
  background: transparent;
  border:1px solid var(--glass-border);
  border-radius:8px;
  padding:6px 9px;
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
.kanban-card__archive-btn:hover{
  color:var(--text);
  border-color: rgba(251,191,36,.6);
  background: rgba(251,191,36,.12);
}
.kanban-card__archive-btn:disabled{ opacity:.5; cursor:default; }

.kanban-archived{
  margin-top:14px;
  border:1px solid var(--glass-border);
  border-radius:12px;
  background: var(--glass);
  padding: 2px 12px;
}
.kanban-archived__summary{
  cursor:pointer;
  list-style:none;
  padding:10px 2px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:700;
}
.kanban-archived__summary::-webkit-details-marker{ display:none; }
.kanban-archived__summary:hover{ color:var(--text); }
.kanban-archived__list{ display:flex; flex-direction:column; gap:6px; padding:2px 0 12px; }
.kanban-archived__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:10px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--glass-border);
}
.kanban-archived__img{
  width:34px; height:34px;
  border-radius:8px;
  object-fit:cover;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
}
.kanban-archived__img--ph{ font-size:1rem; }
.kanban-archived__name{ flex:1 1 auto; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kanban-archived__restore{ flex:0 0 auto; }

/* Paginação da coluna Concluído */
.kanban-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--glass-border);
}
.kanban-pagination__info{
  font-size:.85rem;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.kanban-pagination .btn{ flex:0 0 auto; }
.kanban-pagination .btn:disabled{ opacity:.4; cursor:default; }

/* Lápis "corrigir mapeamento" dentro do modal de baixa */
#upsellerProcessDialog .upseller-process__edit-map{
  margin-left: auto;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, border-color .15s, color .15s;
}
#upsellerProcessDialog .upseller-process__edit-map:hover{
  border-color: rgba(56,189,248,.6);
  background: rgba(56,189,248,.12);
  color: var(--text);
}

/* ===========================================================================
   Desperdício
   =========================================================================== */
.waste-form{
  display:flex; flex-direction:column; gap:10px;
  background: var(--glass); border:1px solid var(--glass-border);
  border-radius:14px; padding:14px 16px; margin-bottom:16px;
}
.waste-form__row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.waste-form__field{ display:flex; flex-direction:column; gap:4px; flex:1 1 140px; min-width:0; }
.waste-form__field > span{ font-size:.8rem; color:var(--muted); }
/* garante que os inputs (inclusive o de data) caibam no campo e não estourem */
.waste-form__field .input,
.waste-form__field input,
.waste-form__field select{ width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
.waste-form__field--grow{ flex:2 1 220px; }
.waste-form__field--date{ flex:1 1 150px; }
.waste-form__add{ flex:0 0 auto; height:42px; white-space:nowrap; }

/* barra de custo (vermelha) do gráfico diário */
.finance-bar__cost{ width:100%; background: linear-gradient(180deg,#f87171,#ef4444); border-radius:4px 4px 0 0; }

.waste-printers{ display:flex; flex-direction:column; gap:12px; padding:4px 2px; }
.waste-printer{ display:flex; flex-direction:column; gap:5px; }
.waste-printer__head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.waste-printer__name{ font-weight:700; color:var(--text); }
.waste-printer__cost{ font-weight:800; color:#f87171; font-variant-numeric:tabular-nums; }
.waste-printer__bar{ height:8px; border-radius:6px; background: rgba(255,255,255,.06); overflow:hidden; }
.waste-printer__fill{ height:100%; background: linear-gradient(90deg,#fb7185,#ef4444); border-radius:6px; }
.waste-printer__meta{ font-size:.8rem; color:var(--muted); }

.waste-list{ display:flex; flex-direction:column; gap:8px; }
.waste-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background: var(--glass); border:1px solid var(--glass-border);
}
.waste-item__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.waste-item__top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.waste-item__cost{ font-weight:800; color:#f87171; font-variant-numeric:tabular-nums; }
.waste-item__weight{ font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.waste-item__name{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.waste-item__meta{ font-size:.8rem; color:var(--muted); }
.waste-item__del, .waste-item__edit{
  flex:0 0 auto; background:transparent; border:1px solid var(--glass-border);
  border-radius:8px; width:30px; height:30px; color:var(--muted); cursor:pointer;
}
.waste-item__del:hover{ color:#fff; border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.14); }
.waste-item__edit:hover{ color:#fff; border-color: rgba(147,197,253,.6); background: rgba(59,130,246,.14); }
.waste-item__color{
  font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,.08); color: var(--muted);
}

@media (max-width: 640px){
  .waste-form__field, .waste-form__field--grow, .waste-form__field--date{ flex:1 1 100%; }
  .waste-form__add{ width:100%; }
}

/* Combobox (input + lista filtrável) — usado no Produto do Desperdício */
.combo{ position: relative; }
.combo__list{
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 60;
  max-height: 280px;
  overflow-y: auto;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px) saturate(130%);
  padding: 5px;
}
.combo__item{
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo__item:hover, .combo__item.is-active{ background: rgba(0,152,219,.16); }
.combo__empty{ padding: 12px; color: var(--muted); font-size: .85rem; text-align: center; }

/* ===========================================================================
   Estoque de Filamentos
   =========================================================================== */
.finance-kpi__value.is-warn{ color:#fbbf24; }

.filament__alert{
  margin: 6px 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.5);
  color: var(--text);
  font-size: .95rem;
  line-height: 1.45;
}
.filament__alert strong{ font-weight:800; }
.filament__alert-sub{ display:block; margin-top:2px; color:var(--muted); font-size:.85rem; }

/* grade igual à do estoque de produtos */
.filament__list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}

/* card reusa .card do produto; aqui só o acento de status + extras */
.fil-card.is-ok{ border-color: rgba(0,152,219,.35); }
.fil-card.is-low{ border-color: rgba(251,191,36,.5); }
.fil-card.is-reorder{
  border-color: rgba(239,68,68,.6);
  background: linear-gradient(145deg, rgba(31,11,11,.55), rgba(8,12,20,.5));
}

/* placeholder quando não tem foto */
.fil-card__noimg{ font-size: 54px; line-height:1; opacity:.6; }

/* badge de status no rodapé da imagem */
.fil-card__badge{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px; border:1px solid transparent;
  backdrop-filter: blur(3px);
}
.fil-card__badge.is-reorder{ background: rgba(127,29,29,.9); border-color: rgba(239,68,68,.9); color:#ffe0e0; }
.fil-card__badge.is-low{ background: rgba(120,53,15,.9); border-color: rgba(251,191,36,.85); color:#fff0cf; }
.fil-card__badge.is-ok{ background: rgba(20,64,83,.9); border-color: rgba(0,152,219,.8); color:#d9f3ff; }

.fil-card__color{ color: var(--muted); font-weight:600; }

/* barra de nível */
.fil-card__bar{ height:8px; border-radius:6px; background: rgba(255,255,255,.07); overflow:hidden; margin: 10px 2px 16px; }
.fil-card__fill{ height:100%; border-radius:5px; background: linear-gradient(90deg,#0098db,#0098db); }
.fil-card.is-low .fil-card__fill{ background: linear-gradient(90deg,#fbbf24,#f59e0b); }
.fil-card.is-reorder .fil-card__fill{ background: linear-gradient(90deg,#fb7185,#ef4444); }
.fil-card__notes{ font-size:.8rem; color:var(--muted); margin-bottom:8px; }

/* replica os estilos que no estoque estão escopados em #stockView */
.filament .card__split{
  display:grid; gap:6px; margin:8px 0 10px; padding:10px 11px;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background: rgba(255,255,255,.03);
}
.filament .card__split span{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font-size:12px; color: rgba(205,216,233,.94);
}
.filament .card__split span strong{ color:#f8fbff; font-size:13px; }
.filament .card__actions-inline{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
.filament .card__actions-inline .btn--compact{ min-width:0; width:100%; }
.filament .card__actions-inline .btn--compact-remove{
  background: rgba(176,52,68,.24); border-color: rgba(240,126,139,.44); color:#ffe1e6;
}
.filament .card__img-top-right{
  position:absolute; top:10px; right:10px; z-index:2; display:flex; align-items:center; gap:6px;
}
.filament .card .btn--edit-icon{
  min-height:0; width:34px; height:34px; padding:0; border-radius:999px;
  display:grid; place-items:center; font-size:18px; line-height:1;
  background: rgba(245,158,11,.22); border:1px solid rgba(251,191,36,.64); color:#eef6ff;
  box-shadow: 0 2px 6px rgba(0,0,0,.16); backdrop-filter: blur(3px);
}
.filament .card .btn--edit-icon:hover{ background: rgba(245,158,11,.34); border-color: rgba(253,224,71,.72); }

/* form do modal de filamento */
.fil-form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
#filamentDialog label, #filamentMoveDialog label{ display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted); margin-bottom:10px; }
/* [hidden] precisa vencer o display:flex do label (ex: "Estoque atual" some na edição) */
#filamentDialog label[hidden]{ display:none !important; }
#filamentDialog .input, #filamentMoveDialog .input{ width:100%; box-sizing:border-box; }
.fil-form__hint{ font-size:.82rem; color:var(--muted); line-height:1.4; margin:4px 0 0; }

@media (max-width: 560px){
  .filament__list{ grid-template-columns: 1fr; }
  .fil-form__grid{ grid-template-columns: 1fr; }
}

/* ===========================================================================
   Sino de notificações (topbar)
   =========================================================================== */
.bell-btn{ position: relative; }
.bell-btn.is-active{
  color: #eef6ff;
  border-color: rgba(147,197,253,.55);
  background: rgba(59,130,246,.22);
}
.bell-btn__badge{
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(3,7,15,.9);
  pointer-events: none;
}

/* ===========================================================================
   Financeiro — abas, detalhamento e lançamentos manuais
   =========================================================================== */
.finance__tabs{
  display: flex; gap: 6px; margin: 4px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.finance__tab{
  background: transparent; border: none; cursor: pointer;
  padding: 10px 16px; color: var(--muted); font-weight: 700; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.finance__tab:hover{ color: var(--text); }
.finance__tab.is-active{ color: var(--text); border-bottom-color: #7c8cff; }
.finance__tabpane[hidden]{ display: none; }

/* Detalhamento da composição */
.finance__breakdown{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  margin: 14px 0 6px;
}
.finance-brk__group{
  padding: 12px 14px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.finance-brk__group--result{ border-color: rgba(124,140,255,.4); background: rgba(124,140,255,.06); }
.finance-brk__head{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 800; margin-bottom: 8px;
}
.finance-brk__row{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; }
.finance-brk__label{ font-size: .88rem; color: rgba(205,216,233,.9); }
.finance-brk__val{ font-weight: 700; font-size: .95rem; color: var(--text); }
.finance-brk__val.is-pos{ color: #0098db; }
.finance-brk__val.is-neg{ color: #ff8a8a; }

/* Cabeçalho das abas Entradas/Despesas */
.finance__entries-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.finance__entries-total{ font-size: 1rem; color: var(--muted); }
.finance__entries-total strong{ color: var(--text); font-size: 1.15rem; font-weight: 800; }
.finance__entries-note{ font-size: .84rem; color: var(--muted); line-height: 1.45; margin: 0 0 14px; }
.finance__entries-list{ display: flex; flex-direction: column; gap: 8px; }

/* Linha de lançamento */
.finance-entry{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-border);
}
.finance-entry__main{ flex: 1; min-width: 0; }
.finance-entry__cat{ font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finance-entry__badge{ font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(124,140,255,.18); color: #b9c2ff; }
.finance-entry__desc{ font-size: .85rem; color: rgba(205,216,233,.85); margin-top: 2px; }
.finance-entry__meta{ font-size: .78rem; color: var(--muted); margin-top: 3px; }
.finance-entry__mult{ opacity: .8; }
.finance-entry__amount{ font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.finance-entry__amount.is-pos{ color: #0098db; }
.finance-entry__amount.is-neg{ color: #ff8a8a; }
.finance-entry__actions{ display: flex; gap: 4px; }
.fin-icon-btn{ background: transparent; border: 1px solid var(--glass-border); border-radius: 8px; width: 32px; height: 32px; color: var(--muted); cursor: pointer; font-size: .95rem; }
.fin-icon-btn:hover{ color: var(--text); border-color: var(--glass-edge); }

/* Checkbox "repete todo mês" no modal */
.finance-check{ flex-direction: row !important; align-items: center; gap: 8px !important; cursor: pointer; margin: 6px 0 2px; }
.finance-check input{ width: 18px; height: 18px; flex: 0 0 auto; accent-color: #7c8cff; }

#financeEntryDialog label{ display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
#financeEntryDialog label[hidden]{ display: none !important; }
#financeEntryDialog .input{ width: 100%; box-sizing: border-box; }

.finance-entry__badge.is-parc{ background: rgba(251,191,36,.18); color: #fcd34d; }

.fil-card__buy{
  display: inline-block; margin-bottom: 8px;
  font-size: .82rem; font-weight: 700; color: #93c5fd; text-decoration: none;
}
.fil-card__buy:hover{ color: #bfdbfe; text-decoration: underline; }

/* Filtros por categoria (Insumos) */
.filament__filters{ display:flex; gap:8px; flex-wrap:wrap; margin: 2px 0 16px; }
.fil-chip{ background: var(--glass); border:1px solid var(--glass-border); border-radius:999px; padding:7px 14px; color:var(--muted); font-weight:700; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.fil-chip:hover{ color: var(--text); border-color: var(--glass-edge); }
.fil-chip.is-active{ background: rgba(124,140,255,.18); border-color: rgba(124,140,255,.55); color:#fff; }
.fil-chip__n{ font-size:.72rem; opacity:.75; background: rgba(255,255,255,.08); border-radius:999px; padding:1px 7px; }
.fil-chip.is-active .fil-chip__n{ background: rgba(255,255,255,.18); opacity:1; }

/* Insumo de embalagem no modal de baixa do pedido */
.upseller-process__insumo{
  margin-top: 8px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,.03);
}
.upseller-process__insumo-title{
  font-size: .74rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
/* a linha do insumo reusa .upseller-process__item; só o select precisa caber no corpo */
.upseller-process__insumo-select{
  width: 100%; box-sizing: border-box; min-width: 0;
  padding: 6px 8px; font-size: .98rem; font-weight: 700;
}

/* Insumo: status "Pedido feito" (azul) + botões de marcar/desfazer */
.fil-card.is-ordered{ border-color: rgba(96,165,250,.5); }
.fil-card__badge.is-ordered{ background: rgba(30,58,138,.9); border-color: rgba(96,165,250,.85); color:#dbeafe; }
.fil-card.is-ordered .fil-card__fill{ background: linear-gradient(90deg,#60a5fa,#3b82f6); }
.fil-card__order-btn{
  display:block; width:100%; margin-bottom:8px; padding:8px 10px; border-radius:9px; cursor:pointer;
  background: rgba(59,130,246,.14); border:1px solid rgba(96,165,250,.42); color:#bfdbfe;
  font-size:.84rem; font-weight:700;
}
.fil-card__order-btn:hover{ background: rgba(59,130,246,.26); border-color: rgba(147,197,253,.6); }
.fil-card__ordered{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; padding:8px 10px; border-radius:9px;
  background: rgba(59,130,246,.1); border:1px solid rgba(96,165,250,.32); color:#dbeafe; font-size:.84rem;
}
.fil-card__ordered-undo{ background:transparent; border:none; color:#93c5fd; cursor:pointer; text-decoration:underline; font-size:.8rem; padding:0; margin-left:auto; }
.finance-kpi__value.is-info{ color:#60a5fa; }

/* Cards de insumo com altura uniforme: botões Entrada/Saída sempre no rodapé */
.filament__list .fil-card{ height: 100%; }
.filament__list .fil-card .card__body{ display: flex; flex-direction: column; }
.filament__list .fil-card .card__footer{ margin-top: auto; }

/* ícone "pedido feito" ao lado do lápis (estilo transferência, azul) */
.filament .card .fil-order-icon{
  min-height: 0; width: 34px; height: 34px; padding: 0; border-radius: 999px;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: rgba(59,130,246,.22); border: 1px solid rgba(147,197,253,.5); color: #eef6ff;
  box-shadow: 0 2px 6px rgba(0,0,0,.16); backdrop-filter: blur(3px);
}
.filament .card .fil-order-icon:hover{ background: rgba(59,130,246,.34); border-color: rgba(191,219,254,.68); }
.filament .card .fil-order-icon.is-active{ background: rgba(37,99,235,.6); border-color: #93c5fd; box-shadow: 0 0 0 2px rgba(59,130,246,.25); }

/* bolinha da cor no ranking "Por cor" do Refugo */
.waste-color-dot{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); margin-right:7px; vertical-align:middle;
}

/* dica curta abaixo de campos no editar produto */
.edit-hint{ font-size: .78rem; color: var(--muted); line-height: 1.4; margin: -4px 0 8px; }

/* Dica curta abaixo de um campo do formulário de configurações. */
.settings__hint{
  margin: -4px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* === Projeção de produção — cards na coluna "A fazer" === */
.kanban-proj-divider{
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 14px 2px 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,0.12);
}
.kanban-proj-divider span{ font-size: 12px; font-weight: 800; color: #aab4ff; }
.kanban-proj-divider small{ font-size: 11px; color: var(--muted); }
.kanban-proj-card{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(124,140,255,0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(124,140,255,0.05), rgba(124,140,255,0.015));
}
.kanban-proj-card__img{ width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: rgba(255,255,255,0.04); }
.kanban-proj-card__img--ph{ display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.kanban-proj-card__body{ min-width: 0; }
.kanban-proj-card__name{ font-weight: 700; font-size: .88rem; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-proj-card__meta{ display: flex; flex-wrap: wrap; gap: 5px; }
.kanban-proj-chip{
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted); white-space: nowrap;
}
.kanban-proj-chip strong{ color: var(--text); font-variant-numeric: tabular-nums; }
.kanban-proj-chip.is-danger{ background: rgba(255,80,80,.12); border-color: rgba(255,80,80,.34); color: #ff8a8a; }
.kanban-proj-chip.is-danger strong{ color: #ffb3b3; }
.kanban-proj-chip.is-warn{ background: rgba(255,167,38,.12); border-color: rgba(255,167,38,.34); color: #ffb74d; }
.kanban-proj-chip.is-warn strong{ color: #ffd8a3; }
.kanban-proj-chip.is-ok{ background: rgba(0,152,219,.10); border-color: rgba(0,152,219,.30); color: #0098db; }
.kanban-proj-chip.is-ok strong{ color: #7ec6e6; }
.kanban-proj-card__right{ display: flex; align-items: center; gap: 8px; }
.kanban-proj-card__make{ display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.kanban-proj-card__n{ font-size: 1.25rem; font-weight: 800; line-height: 1; color: #c7ceff; font-variant-numeric: tabular-nums; }
.kanban-proj-card__lbl{ font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #9aa6e6; margin-top: 2px; }
.kanban-proj-card__btn{
  border: 1px solid rgba(124,140,255,0.5);
  background: rgba(124,140,255,0.16);
  color: #cdd4ff;
  font-weight: 700; font-size: 12px;
  padding: 7px 10px; border-radius: 10px;
  cursor: pointer; white-space: nowrap;
}
.kanban-proj-card__btn:hover{ background: rgba(124,140,255,0.26); }

/* Seletor de horizonte da projeção (7/15/30/45/60 dias) */
.kanban-proj-horizon{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 2px 2px 10px;
}
.kanban-proj-horizon__label{ font-size: 12px; font-weight: 700; color: #aab4ff; margin-right: 2px; }
.kanban-proj-horizon__chip{
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--muted); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.kanban-proj-horizon__chip:hover{ border-color: rgba(124,140,255,0.4); color: var(--text); }
.kanban-proj-horizon__chip.is-active{
  background: rgba(124,140,255,0.18);
  border-color: rgba(124,140,255,0.55);
  color: #cdd4ff;
}

/* ======================================================================
   MOBILE v2 — Estoque e Pedidos otimizados pra celular
   Bloco final de propósito: vence as camadas anteriores (que têm !important).
   ====================================================================== */
@media (max-width: 640px){

  /* ---------- Topo ---------- */
  .topbar{ padding-left: 12px !important; padding-right: 12px !important; grid-template-columns: minmax(0, 1fr) !important; }
  .topbar > *{ min-width: 0 !important; }
  .topbar__row--main{ gap: 8px !important; }
  .topbar__row--controls{ padding-left: 0 !important; padding-right: 0 !important; }
  .topbar__left{ gap: 8px !important; min-width: 0 !important; flex: 1 1 auto !important; }
  .topbar__left > div{ min-width: 0; }
  #viewTitle{
    font-size: 1.15rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #viewSubtitle{ font-size: .72rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar__right{ gap: 6px !important; flex-shrink: 0; }
  .topbar .btn--icon{ width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .topbar__right .upseller-cta{ height: 40px !important; min-height: 40px !important; padding: 0 10px !important; }
  .topbar__right #openSettings{ height: 40px !important; width: 40px !important; }

  /* busca linha cheia; ordenar ocupa o resto e o atualizar fica só no ícone
     (antes uma regra antiga esticava o botão a 100% e esmagava o seletor) */
  .topbar__actions #search{ height: 44px !important; font-size: 16px !important; }
  .topbar__actions .sort-refresh-row{ display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .topbar__actions .sort-refresh-row #sortBy{
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    height: 40px !important; font-size: 14px !important;
  }
  .topbar__actions .sort-refresh-row #refresh{
    flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 40px !important;
  }

  /* ---------- Estoque: KPIs em 4 colunas compactas ---------- */
  #stockView .kpis{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px 12px 0 !important;
  }
  #stockView .kpi{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }
  #stockView .kpi__icon{ display: none !important; }
  #stockView .kpi__label{
    font-size: 9px !important;
    letter-spacing: .2px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  #stockView .kpi__value{ font-size: 1.15rem !important; }

  /* chips (Todos / Branco / Preto / KIT): 1 linha com rolagem lateral */
  #statusFilters{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 10px 12px 2px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #statusFilters::-webkit-scrollbar{ display: none; }
  #stockView #statusFilters .chip{
    flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
    padding: 7px 14px !important; font-size: 13px !important; border-radius: 999px !important;
  }

  /* ---------- Estoque: cards mais densos ---------- */
  /* 2 cards por linha: com 1 só, cada produto ocupava a tela inteira */
  #stockView .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px 12px 16px !important;
  }
  #stockView .card,
  #stockView .card__body{ min-width: 0 !important; }
  #stockView .card{ border-radius: 16px !important; }
  #stockView .card__img{ padding: 6px !important; }
  #stockView .card__img img{ border-radius: 12px !important; }
  #stockView .card__img-top-right .btn{ width: 34px !important; height: 34px !important; min-width: 34px !important; }
  #stockView .card__body{ padding: 8px 10px 10px !important; gap: 6px !important; }
  #stockView .card__title{
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  #stockView .card__split{ padding: 7px 9px !important; gap: 4px !important; margin: 4px 0 6px !important; border-radius: 10px !important; }
  #stockView .card__split span{ font-size: 11px !important; }
  #stockView .card__split .card__stock-line strong{ font-size: 15px !important; }
  #stockView .card__split .card__min-qty{ padding-top: 4px !important; }
  #stockView .card__meta{ font-size: 10.5px !important; }
  #stockView .card__actions-inline{ gap: 6px !important; }
  #stockView .card__actions-inline .btn{
    height: 36px !important; min-height: 36px !important;
    padding: 0 6px !important; font-size: 13px !important; border-radius: 10px !important;
  }

  /* ---------- Pedidos UpSeller ---------- */
  #upsellerPanel{ padding: 10px 12px 16px !important; }
  .upseller{ gap: 12px !important; }
  /* filhos do painel não podem crescer além da tela (senão as abas empurram
     a página pra largura delas em vez de rolar) */
  .upseller > *{ min-width: 0 !important; max-width: 100% !important; }
  .upseller__header{ gap: 8px !important; padding-bottom: 0 !important; }
  .upseller__subtitle{ font-size: 13px !important; line-height: 1.3 !important; }
  #upsellerRefresh{ min-height: 34px !important; padding: 0 12px !important; font-size: 12.5px !important; flex-shrink: 0; }
  .upseller__sync-status{ padding: 6px 10px !important; font-size: 12px !important; border-radius: 10px !important; }

  /* contadores de etapa: 4 colunas compactas (antes 2×2 com ~120px cada) */
  .upseller__state-counts-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .upseller__state-count{
    min-height: 0 !important;
    padding: 9px 4px 8px !important;
    gap: 3px !important;
    border-radius: 12px !important;
  }
  .upseller__state-count-label{ font-size: 9px !important; letter-spacing: .2px !important; line-height: 1.15 !important; }
  .upseller__state-count-value{ font-size: 1.4rem !important; margin: 2px 0 !important; }
  .upseller__state-count-progress{ font-size: 10px !important; padding: 2px 7px !important; margin-top: 2px !important; }
  .ups-prog-word{ display: none; }

  /* abas: 1 linha rolável */
  .upseller__tabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .upseller__tabs::-webkit-scrollbar{ display: none; }
  .upseller__tab{ flex: 0 0 auto !important; padding: 10px 12px !important; font-size: 14px !important; gap: 6px !important; white-space: nowrap; }
  .upseller__tab-icon{ font-size: .95rem !important; }

  /* filtros: busca linha cheia + selects 2 por linha */
  .upseller__toolbar{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .upseller__toolbar > *{ min-width: 0 !important; width: 100% !important; max-width: none !important; }
  .upseller__toolbar .upseller__search{ grid-column: 1 / -1 !important; }
  .upseller__toolbar .input{ height: 42px !important; min-height: 42px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .upseller__toolbar .upseller__search{ font-size: 16px !important; }
  .upseller__toolbar select.input{ font-size: 14px !important; }

  /* card do pedido: tags na 1ª linha, nº + hora + valor na 2ª, botões na 3ª */
  .upseller-order{ padding: 10px 12px !important; gap: 8px !important; }
  .upseller-order__head{
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 6px 8px !important; padding-bottom: 8px !important;
  }
  .upseller-order__platform,
  .upseller-order__state,
  .upseller-order__deadline{ order: 0 !important; }
  /* quebra de linha forçada logo depois das tags */
  .upseller-order__head::before{ content: ""; order: 1; flex: 0 0 100%; height: 0; margin-bottom: -6px; }
  .upseller-order__number{ order: 2 !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: 52% !important; }
  .upseller-order__time{ order: 3 !important; flex: 0 1 auto !important; width: auto !important; }
  .upseller-order__amount{ order: 4 !important; display: inline !important; margin-left: auto !important; }
  .upseller-order__actions-inline{
    order: 5 !important; flex: 0 0 auto !important; width: auto !important;
    margin: 0 0 0 auto !important; gap: 6px !important;
  }
  .upseller-order__actions-inline .btn{ min-height: 36px !important; padding: 0 14px !important; font-size: 13px !important; }
  .upseller-order__actions-inline .upseller-order__processed-info{ font-size: 11.5px !important; }

  /* itens: foto | qtd + nome (até 2 linhas) | botão; SKU e variação embaixo */
  .upseller-order-item{
    display: grid !important;
    grid-template-columns: 36px auto minmax(0, 1fr) auto !important;
    grid-template-rows: none !important;
    column-gap: 8px !important; row-gap: 3px !important;
    align-items: center !important;
    padding: 7px 8px !important;
  }
  .upseller-order-item__img{ grid-column: 1 !important; grid-row: 1 / span 3 !important; width: 36px !important; height: 36px !important; align-self: center !important; }
  .upseller-order-item__qty{ grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  .upseller-order-item__name{
    grid-column: 3 !important; grid-row: 1 !important; min-width: 0 !important;
    white-space: normal !important; line-height: 1.25 !important; font-size: 13px !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
  }
  .upseller-order-item__sku,
  .upseller-order-item__attr{
    grid-column: 2 / 4 !important; justify-self: start !important; max-width: 100% !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    font-size: 11px !important;
  }
  .upseller-order-item__sku{ grid-row: 2 !important; }
  .upseller-order-item__attr{ display: inline-block !important; grid-row: 3 !important; }
  .upseller-order-item > .btn{
    grid-column: 4 !important; grid-row: 1 / span 3 !important; align-self: center !important;
    width: auto !important; min-height: 34px !important; padding: 0 10px !important; font-size: 12.5px !important;
  }
}