:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #052b56;
  color: #fff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-width: 300px;
  background: linear-gradient(180deg, #073e77 0, #052b56 42%, #031e3e 100%);
}
button, input { font: inherit; }
button { cursor: pointer; }

.mobile-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(103, 188, 255, 0.34);
  background: rgba(4, 44, 86, 0.96);
  backdrop-filter: blur(12px);
}

.mobile-header img { display: block; width: 84px; height: 46px; object-fit: contain; object-position: left center; }
.mobile-header div { min-width: 0; }
.mobile-header span { display: block; color: #52baff; font-size: 0.68rem; font-weight: 850; }
.mobile-header strong { display: block; margin-top: 3px; line-height: 1.2; font-size: 0.96rem; }
.mobile-header button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: #0c4f8d;
  color: #fff;
  font-size: 1.45rem;
}

#inventory-app { width: min(760px, 100%); margin: 0 auto; padding: 18px 12px calc(32px + env(safe-area-inset-bottom)); }

.pairing-screen {
  min-height: calc(100dvh - 116px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.pairing-intro { text-align: center; }
.pairing-intro .phone-mark {
  position: relative;
  width: 48px;
  height: 72px;
  margin: 0 auto 18px;
  border: 4px solid #fff;
  border-radius: 8px;
  background: #0b65aa;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
.pairing-intro .phone-mark::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
}
.pairing-intro .phone-mark span {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}
.pairing-intro h1 { margin: 0; font-size: 2rem; }
.pairing-intro p { margin: 9px auto 0; max-width: 32rem; color: #b9d0e4; line-height: 1.45; }

.pairing-form {
  padding: 20px;
  border: 1px solid rgba(103, 193, 255, 0.42);
  border-radius: 8px;
  background: rgba(5, 55, 104, 0.88);
  box-shadow: 0 22px 54px rgba(0, 11, 25, 0.26);
}
.pairing-form label { display: block; color: #bfdbef; font-weight: 750; text-align: center; }
.pairing-code-input {
  display: block;
  width: min(300px, 100%);
  height: 74px;
  margin: 12px auto 16px;
  border: 2px solid #35aefe;
  border-radius: 6px;
  outline: none;
  background: #031f3e;
  color: #fff;
  font-size: 2.45rem;
  font-weight: 850;
  letter-spacing: 0.48em;
  padding-left: 0.48em;
  text-align: center;
}
.pairing-code-input:focus { box-shadow: 0 0 0 4px rgba(53, 174, 254, 0.2); }

.primary-action, .secondary-action {
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 18px;
  color: #fff;
  font-weight: 800;
}
.primary-action { background: #399f1a; }
.primary-action:hover { background: #47b723; }
.primary-action:disabled { opacity: 0.48; cursor: wait; }
.secondary-action { border-color: rgba(129, 196, 245, 0.45); background: #0b538f; }
.pairing-form .primary-action { width: 100%; }
.form-error { min-height: 1.2em; margin: 10px 0 0; color: #ffb2aa; text-align: center; }

.inventory-heading { display: grid; gap: 14px; }
.inventory-heading h1 { margin: 0; font-size: 1.55rem; }
.inventory-heading p { margin: 4px 0 0; color: #b9d0e4; }
.progress-track { overflow: hidden; height: 9px; border-radius: 8px; background: #021b37; }
.progress-track span { display: block; height: 100%; background: #39ad4b; transition: width 220ms ease; }
.progress-metrics { display: flex; justify-content: space-between; color: #bad3e7; font-size: 0.86rem; }
.progress-metrics strong { color: #fff; }

.scan-bar {
  position: sticky;
  z-index: 8;
  top: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 18px 0 12px;
  padding: 10px;
  border: 1px solid rgba(103, 193, 255, 0.36);
  border-radius: 7px;
  background: rgba(4, 41, 80, 0.96);
}
.scan-bar input { min-width: 0; height: 50px; border: 1px solid #2d8fcf; border-radius: 5px; background: #062e57; color: #fff; padding: 0 13px; }
.scan-bar button { height: 50px; }

.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.filter-row button { min-height: 42px; border: 1px solid rgba(119, 190, 240, 0.35); border-radius: 5px; background: #084779; color: #d5e9f8; }
.filter-row button.active { border-color: #4ab9ff; background: #0c69aa; color: #fff; font-weight: 800; }

.inventory-list { display: grid; gap: 10px; }
.inventory-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(105, 181, 234, 0.34);
  border-left: 5px solid #338bc4;
  border-radius: 7px;
  background: rgba(7, 61, 111, 0.88);
  transition: background 160ms ease, border-color 160ms ease;
}
.inventory-line.is-counted { border-color: rgba(75, 202, 93, 0.7); border-left-color: #45bf59; background: rgba(17, 99, 59, 0.64); }
.inventory-line h2 { margin: 0; font-size: 1.02rem; }
.inventory-line code { display: block; margin-top: 5px; color: #79caff; font-family: "Cascadia Mono", Consolas, monospace; }
.inventory-line small { display: block; margin-top: 5px; color: #b9d0e4; }
.line-control { align-self: center; }
.line-control button { width: 54px; height: 54px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: #1167a5; color: #fff; font-size: 1.6rem; }
.inventory-line.is-counted .line-control button { background: #35a84a; }
.quantity-form { display: flex; gap: 6px; }
.quantity-form input { width: 64px; height: 48px; border: 1px solid #61b9ef; border-radius: 5px; background: #04294f; color: #fff; font-size: 1.15rem; text-align: center; }
.quantity-form button { width: 48px; height: 48px; border: 0; border-radius: 5px; background: #319d37; color: #fff; font-size: 1.25rem; }
.empty-list { padding: 34px 14px; border: 1px dashed rgba(116, 190, 240, 0.4); color: #bdd3e4; text-align: center; }

.session-expiry { margin-top: 20px; color: #8fb3ce; font-size: 0.78rem; text-align: center; }
#mobile-toast { position: fixed; z-index: 50; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); width: min(90%, 520px); padding: 12px 16px; border-radius: 6px; background: #fff; color: #092744; font-weight: 750; opacity: 0; pointer-events: none; transition: 180ms ease; }
#mobile-toast.visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 480px) {
  .mobile-header { grid-template-columns: 88px minmax(0, 1fr) 44px; }
  .mobile-header img { width: 86px; }
  .inventory-line { grid-template-columns: minmax(0, 1fr); }
  .line-control { justify-self: stretch; }
  .line-control > button { width: 100%; height: 46px; border-radius: 5px; }
  .quantity-form input { flex: 1; width: auto; }
}