:root { color-scheme: dark; }
html, body { background: #0b0b12; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }

/* Tailwind extends */
.bg-brand   { background-color: #f5d76e; }
.text-brand { color:            #f5d76e; }
.border-brand { border-color:   #f5d76e; }

/* Safe area (iPhone notch) */
.pb-safe { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem); }

/* Hide scrollbar on category tabs */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Category tab pill */
.cat-btn {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  white-space: nowrap;
  color: rgba(255,255,255,0.75);
}
.cat-btn.active {
  background: #f5d76e;
  color: #000;
  border-color: #f5d76e;
  font-weight: 600;
}

/* Bottom nav button */
.tab-btn {
  flex: 1;
  padding: 0.6rem 0.25rem 0.5rem;
  color: rgba(255,255,255,0.45);
  transition: color .15s;
}
.tab-btn.active { color: #f5d76e; }

/* Product card */
.product-card {
  position: relative;
  padding: 0.85rem 0.75rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.product-card.low  { border-color: rgba(239,68,68,0.5);  background: rgba(239,68,68,0.08); }
.product-card.zero { border-color: rgba(239,68,68,0.8);  background: rgba(239,68,68,0.15); }

.product-card .logo-wrap { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border-radius: 0.6rem; overflow: hidden; }
.product-card .logo  { width: 100%; height: 100%; object-fit: contain; padding: 0.15rem; background: white; }
.product-card .emoji { font-size: 1.9rem; line-height: 1; }
.product-card .name  { font-size: 0.9rem; font-weight: 600; line-height: 1.1; min-height: 2.2em; }
.product-card .stock { font-size: 2rem; font-weight: 800; line-height: 1; }
.product-card .unit  { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.product-card .sub   { font-size: 0.75rem; color: rgba(255,255,255,0.55); margin-top: -0.1rem; }

.stepper { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.stepper button {
  flex: 1;
  height: 2.5rem;
  border-radius: 0.65rem;
  font-size: 1.35rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: transform .1s;
}
.stepper button:active { transform: scale(0.92); }
.stepper .minus { background: rgba(239,68,68,0.18); color: #fca5a5; }
.stepper .plus  { background: rgba(34,197,94,0.22); color: #86efac; }
.stepper .edit  { flex: 0 0 auto; width: 2.5rem; background: rgba(255,255,255,0.06); font-size: 0.9rem; color: rgba(255,255,255,0.7); }
.stepper-box    { margin-top: 0.25rem; }
.stepper-box button { height: 1.9rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; }
.stepper-box .box-minus { background: rgba(239,68,68,0.10); color: #fca5a5; }
.stepper-box .box-plus  { background: rgba(34,197,94,0.14); color: #86efac; }

/* Inputs (modal) */
.input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  color: #fff;
  font-size: 1rem;
}
.input:focus { outline: none; border-color: #f5d76e; }

/* Closing row */
.closing-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.85rem;
}
.closing-row > input {
  width: 4.5rem;
  padding: 0.5rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  color: #fff;
}

/* Closing row con cajas + sueltas */
.closing-row-box { display: block; padding: 0.75rem 0.85rem; }
.closing-row-box .cr-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; }
.closing-row-box .cr-inputs {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.55);
}
.closing-row-box .cr-inputs label { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.closing-row-box .cr-inputs input {
  width: 100%;
  max-width: 5rem;
  padding: 0.55rem 0.4rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  color: #fff;
}
.closing-row-box .cr-total { font-variant-numeric: tabular-nums; }
.closing-row-box .cr-total span { color: #f5d76e; font-weight: 700; }