: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,body{ height:100%; }
html{
  background: #000;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 650px at 12% -8%, rgba(67,130,255,.34) 0%, transparent 58%),
    radial-gradient(900px 520px at 92% 5%, rgba(94, 230, 198, .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(--bg2) 100%);
  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,238,198,.72);
  background: linear-gradient(160deg, rgba(58,168,142,.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, 243, 213, .74);
  box-shadow: 0 0 0 4px rgba(121, 243, 213, .12), 0 0 0 1px rgba(121,243,213,.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,236,193,.62);
  background: linear-gradient(160deg, rgba(44,161,138,.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(42,176,147,.70), rgba(42,126,182,.45));
  border-color: rgba(132,255,222,.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(34,197,94,.65);
  background: rgba(34,197,94,.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(34,197,94,.65);
  background: rgba(34,197,94,.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(34,197,94,1); }
.chip--status{
  cursor:pointer;
  color:#e5e7eb !important;
}
.chip--status.is-active{
  border-color: rgba(34,197,94,.6);
  background: rgba(34,197,94,.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__table-wrap{
  overflow:auto;
}
.history__table{
  width:100%;
  border-collapse: collapse;
  min-width: 860px;
}
.history__table th,
.history__table td{
  text-align:left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.history__table th{
  color: var(--muted);
  font-weight: 600;
}

.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: #4ade80; }
.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: #bbf7d0;
  background: rgba(34,197,94,.09);
  border: 1px solid rgba(34,197,94,.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,233,219,.45);
  box-shadow: 0 0 0 2px rgba(170,233,219,.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,178,152,.45), rgba(64,144,174,.24));
  border-color: rgba(120,220,194,.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__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: #bbf7d0;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.45);
  border-radius: 10px;
  padding: 8px 10px;
}

.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:8px;
  left:8px;
  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,83,45,.9); border-color: rgba(74,222,128,.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(34,197,94,.12); border-color: rgba(34,197,94,.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;
}
.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(34,197,94,.65); }
.toast--remove{ border-color: rgba(239,68,68,.65); }
.toast--create{ border-color: rgba(59,130,246,.65); }

mark.hl{
  background: rgba(34,197,94,.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,205,186,.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,233,219,.64);
  box-shadow: 0 0 0 3px rgba(170,233,219,.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(82,208,172,.40) 0%, rgba(63,155,188,.22) 100%);
  border-color: rgba(128,230,203,.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,175,165,.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, 223, 210, .46);
  box-shadow: 0 0 0 2px rgba(161,223,210,.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, 176, 154, .30);
  border-color: rgba(125,220,197,.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: #7ddbc7;
  --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,171,164,.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,219,199,.42);
  box-shadow: 0 0 0 2px rgba(125,219,199,.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,178,157,.24);
  border-color: rgba(125,219,199,.38);
}
.btn--primary:not(:disabled):hover{
  background: rgba(76,178,157,.30);
  border-color: rgba(125,219,199,.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,219,199,.34);
  background: rgba(125,219,199,.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,160,152,.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, 219, 206, .34);
  box-shadow: 0 0 0 2px rgba(160,219,206,.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,178,158,.20);
  border-color: rgba(126,220,198,.30);
}
.btn--primary:not(:disabled):hover{
  background: rgba(81,178,158,.24);
  border-color: rgba(126,220,198,.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: #7fdac6;
  --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,162,153,.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,218,198,.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,177,157,.22);
  border-color: rgba(127,218,198,.36);
}
.btn--primary:not(:disabled):hover{
  background: rgba(80,177,157,.28);
  border-color: rgba(127,218,198,.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,218,198,.34);
  background: rgba(127,218,198,.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,218,198,.09);
  border: 1px solid rgba(127,218,198,.20);
  color: #d7f5ee;
}
.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,218,198,.35);
    background: rgba(127,218,198,.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,211,193,.42) !important;
    background: rgba(126,211,193,.12) !important;
    color: #eafcf7 !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{
  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,54,43,.52) !important;
  border-color: rgba(127,219,198,.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(48,209,88,.16) !important;
  border-color: rgba(126,239,162,.40) !important;
  color: #ecfff2 !important;
}
#stockView .card__actions-inline .btn--primary.btn--compact:hover{
  background: rgba(48,209,88,.25) !important;
  border-color: rgba(150,245,182,.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(48,209,88,.16);
  --apple-green-bg-hover: rgba(48,209,88,.24);
  --apple-green-border: rgba(126,239,162,.42);
  --apple-green-border-hover: rgba(150,245,182,.56);
  --apple-green-text: #ecfff2;

  --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: #f2fff6 !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]{
  display: block;
}

@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; }