* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f3f6f5;
  color: #193a35;
  font:
    18px system-ui,
    sans-serif;
}
header {
  background: #174c43;
  color: white;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h1 {
  font-size: 28px;
  margin: 4px 0;
}
small {
  letter-spacing: 2px;
  font-size: 12px;
}
header span {
  background: #286b5c;
  border-radius: 25px;
  padding: 12px;
}
.notice {
  padding: 12px 30px;
  background: #fff0cc;
  font-size: 15px;
}
nav {
  display: flex;
  gap: 12px;
  padding: 18px 30px;
}
button {
  cursor: pointer;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid #b6cec8;
  background: white;
  color: #174c43;
  border-radius: 10px;
  font: inherit;
}
button:focus,
input:focus {
  outline: 3px solid #e1ad41;
}
button:disabled {
  opacity: 0.5;
}
main {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  padding: 0 30px 30px;
}
section {
  background: white;
  padding: 24px;
  border-radius: 16px;
}
h2 {
  font-size: 23px;
  margin: 0 0 20px;
}
label {
  display: block;
  margin-bottom: 8px;
}
input {
  font: inherit;
  border: 1px solid #a4bfb8;
  border-radius: 10px;
  min-height: 54px;
  padding: 10px;
  width: 100%;
}
form {
  display: flex;
  gap: 10px;
}
.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.products button {
  text-align: left;
  min-height: 96px;
  background: #eef6f2;
}
.products strong,
.products small {
  display: block;
  margin-top: 8px;
}
.products small {
  letter-spacing: 0;
  color: #526e65;
}
p {
  font-size: 15px;
  line-height: 1.6;
}
.line {
  border-bottom: 1px solid #e1eae6;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.line button {
  padding: 6px 12px;
}
.total {
  display: flex;
  justify-content: space-between;
  padding: 22px 0;
  font-size: 28px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.primary {
  background: #174c43;
  color: white;
}
#message {
  margin: 0 30px 15px;
  color: #963500;
  min-height: 24px;
}
#historyView {
  margin: 0 30px 30px;
}
footer {
  padding: 10px 30px;
  color: #4a6860;
  font-size: 14px;
}
.receipt {
  padding: 16px;
  margin: 12px 0;
  background: #f0f6f3;
  border-radius: 10px;
  white-space: pre-wrap;
}
[hidden] {
  display: none !important;
}
@media (max-width: 750px) {
  main {
    grid-template-columns: 1fr;
    padding: 0 12px 12px;
  }
  header,
  nav {
    padding: 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .notice {
    padding: 12px;
  }
  button {
    font-size: 16px;
  }
  section {
    padding: 18px;
  }
}

header {
  background: white;
  color: #174c43;
  border-bottom: 4px solid #c62429;
}
.brand img {
  width: 290px;
  max-width: 100%;
  height: auto;
}
.brand h1 {
  font-size: 19px;
  margin: 4px 0;
}
.brand {
  max-width: 50%;
}
#setupView {
  max-width: 660px;
  margin: 26px auto;
}
#setupForm {
  display: block;
}
#setupForm input {
  margin-bottom: 18px;
}
#setupError {
  color: #963500;
}
.primary {
  background: #b82229;
  border-color: #b82229;
}
.products button {
  border-top: 4px solid #2e773a;
}
#schoolIdentity {
  font-size: 22px;
}
#registerIdentity {
  margin: 6px 0;
}
#voucherCode,
#voucherAmount {
  margin-bottom: 14px;
}
@media (max-width: 750px) {
  .brand img {
    width: 220px;
  }
  #schoolIdentity {
    font-size: 18px;
  }
  #setupView {
    margin: 18px 12px;
  }
}

.runningTotals {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 18px 30px;
  background: #e6f2e6;
}
.runningTotals div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.runningTotals strong {
  font-size: 30px;
}
.runningTotals small {
  letter-spacing: 0;
  margin-left: auto;
  color: #476454;
}
select {
  font: inherit;
  min-height: 48px;
  margin-bottom: 16px;
  width: 100%;
  border: 1px solid #a4bfb8;
  border-radius: 8px;
  padding: 8px;
}
#products {
  max-height: 520px;
  overflow-y: auto;
}
#catalogFile {
  font-size: 14px;
}
#dailySales {
  max-width: 850px;
}
@media (max-width: 750px) {
  .runningTotals {
    padding: 14px;
    gap: 22px;
    flex-wrap: wrap;
  }
  .runningTotals strong {
    font-size: 25px;
  }
  .runningTotals small {
    width: 100%;
    margin: 0;
  }
}

.saleComplete { margin: 12px 20px; padding: 22px; background: #dcfce7; color: #14532d; border: 3px solid #15803d; border-radius: 14px; }
.saleComplete strong { display: block; font-size: 30px; }
.saleComplete span { display: block; font-size: 26px; font-weight: 800; margin-top: 8px; }
.saleComplete p { margin-bottom: 0; font-size: 19px; }
#syncStatus { margin: 8px 24px; }

.checkoutError { padding: 16px; background: #fee2e2; border: 3px solid #b91c1c; color: #7f1d1d; font-size: 21px; font-weight: 700; border-radius: 10px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 18px 24px; background: #7f1d1d; color: white; border-radius: 12px; font-size: 20px; font-weight: 700; max-width: min(90vw,700px); box-shadow: 0 6px 24px #0005; }
.connectionStatus { padding: 14px 22px; margin: 12px 20px; border-radius: 10px; font-weight: 700; }
.connectionStatus.online { background: #dcfce7; color: #14532d; }
.connectionStatus.offline { background: #fef3c7; color: #78350f; border: 2px solid #b45309; }
#voucherStatus,#helpingAvailable { font-weight: 700; }

.cameraScan { margin: 12px 0; background: #164e63; color: white; font-weight: 700; }
.cameraPanel { padding: 14px; border: 2px solid #164e63; border-radius: 12px; background: #f0f9ff; }
.cameraToolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cameraPreview { position:relative; background:#111; border-radius:8px; overflow:hidden; }
.cameraPreview video { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.cameraGuide { position:absolute; inset:25% 8%; border:3px solid #4ade80; border-radius:8px; pointer-events:none; }
#cameraFeedback { font-weight:700; padding:8px 0; }


.registerHeaderActions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.installRegister {
  min-height: 44px;
  padding: 8px 14px;
  background: #174c43;
  border-color: #174c43;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.installRegister:hover {
  background: #0f3d36;
}
@media (max-width: 750px) {
  .registerHeaderActions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .installRegister {
    width: 100%;
  }
}


/* Compact tablet keypad + denser tablet register */
#searchKeyboard.active {
  background: #174c43;
  color: white;
  border-color: #174c43;
}

.paymentGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.paymentField {
  min-width: 0;
}
.paymentField label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}
.paymentField input {
  margin: 0;
}
.paymentField small {
  display: block;
  margin-top: 4px;
  letter-spacing: 0;
  color: #5c726b;
  line-height: 1.25;
}
.paymentField p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.3;
}

[data-keypad] {
  cursor: pointer;
  background: #fff;
}
[data-keypad].keypadActive {
  border-color: #174c43;
  box-shadow: 0 0 0 3px rgba(23, 76, 67, .14);
}
[data-keypad].keypadLocked {
  background: #eef2f1;
  color: #5b6c67;
  cursor: default;
}

.numberPad {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 258px;
  z-index: 300;
  padding: 10px;
  border: 2px solid #174c43;
  border-radius: 14px;
  background: #f7fbf9;
  box-shadow: 0 12px 38px rgba(0,0,0,.28);
}
.numberPadHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.numberPadHeader strong {
  font-size: 14px;
  color: #174c43;
}
.numberPadHeader button {
  min-height: 34px;
  width: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 22px;
}
.numberPadGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.numberPadGrid button {
  min-height: 42px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 19px;
  font-weight: 800;
}
#numberPadClear {
  font-size: 13px;
}
#numberPadBackspace {
  grid-column: span 1;
}
#numberPadDone {
  grid-column: span 2;
}
.numberPad.codeMode [data-key="."] {
  display: none;
}

@media (min-width: 751px) {
  body {
    font-size: 15px;
  }
  header {
    padding: 8px 14px;
    min-height: 64px;
  }
  .brand img {
    width: 185px;
  }
  .brand h1 {
    display: none;
  }
  #schoolIdentity {
    font-size: 17px;
  }
  #registerIdentity {
    margin: 2px 0 0;
    font-size: 12px;
  }
  .notice {
    padding: 5px 12px;
    font-size: 11px;
    line-height: 1.25;
  }
  .runningTotals {
    padding: 6px 12px;
    gap: 22px;
  }
  .runningTotals strong {
    font-size: 21px;
  }
  .runningTotals span,
  .runningTotals small {
    font-size: 11px;
  }
  nav {
    padding: 6px 12px;
    gap: 8px;
  }
  nav button,
  button {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 8px;
  }
  .connectionStatus {
    padding: 6px 10px;
    margin: 5px 12px;
    font-size: 12px;
  }
  #syncStatus {
    margin: 3px 12px 5px;
    font-size: 11px;
    min-height: 16px;
  }
  #message {
    min-height: 0;
    margin: 0;
  }
  #registerView {
    grid-template-columns: 1.28fr .72fr;
    gap: 10px;
    padding: 0 12px 10px;
  }
  #registerView > section {
    padding: 11px;
    border-radius: 10px;
    max-height: calc(100vh - 178px);
    overflow-y: auto;
  }
  h2 {
    font-size: 18px;
    margin: 0 0 8px;
  }
  label {
    font-size: 13px;
    margin-bottom: 4px;
  }
  input {
    min-height: 39px;
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 7px;
  }
  #scanForm {
    gap: 6px;
  }
  #scanForm input {
    min-width: 0;
  }
  #scanForm button {
    white-space: nowrap;
  }
  .cameraScan {
    margin: 6px 0;
  }
  #cameraFeedback,
  #matchCount {
    margin: 4px 0;
    font-size: 11px;
  }
  #registerView > section:first-child > p:not(#cameraFeedback):not(#matchCount) {
    margin: 4px 0;
    font-size: 11px;
    line-height: 1.3;
  }
  .products {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .products button {
    min-height: 61px;
    padding: 6px 8px;
    font-size: 12px;
    border-top-width: 3px;
  }
  .products strong,
  .products small {
    margin-top: 3px;
  }
  .products small {
    font-size: 9px;
  }
  #products {
    max-height: calc(100vh - 320px);
  }
  .line {
    padding: 6px 0;
    gap: 6px;
    font-size: 12px;
  }
  .line button {
    min-height: 30px;
    padding: 2px 8px;
    font-size: 15px;
  }
  .total {
    padding: 8px 0;
    font-size: 22px;
  }
  .paymentGrid {
    gap: 7px 8px;
  }
  .paymentField label {
    font-size: 11px;
  }
  .paymentField input {
    min-height: 37px;
  }
  .paymentField small,
  .paymentField p {
    font-size: 9px;
  }
  .basket .actions {
    gap: 6px;
    margin-top: 8px;
  }
  .basket > p {
    margin: 4px 0;
    font-size: 10px;
    line-height: 1.25;
  }
  .checkoutError {
    padding: 8px;
    font-size: 14px;
    border-width: 2px;
  }
  .saleComplete {
    margin: 5px 12px;
    padding: 8px 12px;
    border-width: 2px;
  }
  .saleComplete strong {
    font-size: 18px;
  }
  .saleComplete span {
    font-size: 16px;
    margin-top: 2px;
  }
  .saleComplete p {
    font-size: 11px;
    margin: 2px 0 0;
  }
  footer {
    padding: 5px 12px;
    font-size: 10px;
  }
}

@media (min-width: 900px) and (orientation: landscape) {
  .numberPad {
    right: 18px;
    bottom: 18px;
    width: 238px;
  }
  .numberPadGrid button {
    min-height: 38px;
  }
}

@media (max-width: 750px) {
  .paymentGrid {
    grid-template-columns: 1fr;
  }
  .numberPad {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(92vw, 300px);
  }
}


/* Frosty's compact in-app QWERTY keyboard */
.textKeyboard {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(94vw, 720px);
  z-index: 320;
  padding: 10px;
  border: 2px solid #174c43;
  border-radius: 14px;
  background: #f7fbf9;
  box-shadow: 0 12px 38px rgba(0,0,0,.30);
}
.textKeyboardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.textKeyboardHeader strong {
  color: #174c43;
  font-size: 14px;
}
.textKeyboardHeader button {
  min-height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 20px;
}
.textKeyboardKeys {
  display: grid;
  gap: 5px;
}
.textKeyboardRow {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.textKeyboardRow button {
  flex: 1 1 0;
  max-width: 62px;
  min-width: 0;
  min-height: 37px;
  padding: 4px 2px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 7px;
}
.textKeyboardActions {
  display: grid;
  grid-template-columns: .8fr 2.5fr .8fr 1fr;
  gap: 5px;
  margin-top: 6px;
}
.textKeyboardActions button {
  min-height: 36px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 750;
}
.textKeyboardActions .spaceKey {
  letter-spacing: .08em;
}
#textKeyboardShift.active {
  background: #174c43;
  color: #fff;
}
.textKeyboard.codeMode #textKeyboardSpace,
.textKeyboard.codeMode #textKeyboardShift {
  visibility: hidden;
}
.textKeyboardActive {
  border-color: #174c43 !important;
  box-shadow: 0 0 0 3px rgba(23,76,67,.14) !important;
}
.volunteerDialog {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8,32,28,.48);
}
.volunteerDialogCard {
  width: min(92vw, 480px);
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.volunteerDialogCard h2 {
  margin-bottom: 8px;
}
.volunteerDialogCard p {
  margin-top: 0;
}
.volunteerDialogCard .actions {
  justify-content: flex-end;
}

@media (min-width: 751px) and (max-width: 1400px) {
  .textKeyboard {
    bottom: 8px;
    width: min(92vw, 660px);
    padding: 8px;
  }
  .textKeyboardRow button {
    min-height: 34px;
    font-size: 15px;
  }
  .textKeyboardActions button {
    min-height: 33px;
    font-size: 12px;
  }
}


/* Register return mode, balance due, and warning readability */
#message.toast {
  color: #fff;
}
.basketHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.basketHeader h2 {
  margin: 0;
}
.returnSaleButton {
  background: #fff4f4;
  color: #a61f25;
  border-color: #d9a5a8;
  font-weight: 800;
}
.returnModeNotice {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 2px solid #b82229;
  border-radius: 9px;
  background: #fff2f2;
  color: #7f1d1d;
  font-weight: 750;
  line-height: 1.35;
}
.balanceDuePanel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 2px solid #174c43;
  border-radius: 10px;
  background: #eef8f4;
}
.balanceDuePanel > span {
  font-weight: 800;
}
.balanceDuePanel > strong {
  font-size: 24px;
  color: #174c43;
}
.balanceDuePanel small {
  grid-column: 1 / -1;
  letter-spacing: 0;
  color: #536d65;
  font-size: 10px;
}
body.returnMode .basket {
  outline: 3px solid #b82229;
}
@media (min-width: 751px) and (max-width: 1400px) {
  .basketHeader {
    margin-bottom: 5px;
  }
  .returnSaleButton {
    min-height: 34px;
    padding: 4px 9px;
  }
  .returnModeNotice {
    margin-bottom: 6px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .balanceDuePanel {
    margin-bottom: 6px;
    padding: 6px 8px;
  }
  .balanceDuePanel > strong {
    font-size: 18px;
  }
}


/* Current-sale cleanup: compact balance due and bottom return action */
.balanceDuePanel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px 0 6px;
  padding: 0;
  border: 0;
  background: transparent;
}
.balanceDuePanel > span {
  font-size: 12px;
  font-weight: 800;
  color: #536d65;
}
.balanceDuePanel > strong {
  font-size: 17px;
  color: #174c43;
}
.balanceDuePanel small {
  display: none;
}
.returnPrompt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e1eae6;
}
.returnPrompt span {
  font-size: 12px;
  color: #5c6f68;
  font-weight: 700;
}
.returnPrompt .returnSaleButton {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 12px;
}
@media (min-width: 751px) and (max-width: 1400px) {
  .balanceDuePanel {
    margin: 5px 0 4px;
  }
  .balanceDuePanel > span {
    font-size: 10px;
  }
  .balanceDuePanel > strong {
    font-size: 15px;
  }
  .returnPrompt {
    margin-top: 6px;
    padding-top: 6px;
  }
  .returnPrompt span {
    font-size: 10px;
  }
  .returnPrompt .returnSaleButton {
    min-height: 30px;
    font-size: 10px;
    padding: 3px 7px;
  }
}


.clearSearchButton {
  min-width: 66px;
  background: #f7f7f7;
  color: #5a6662;
  border-color: #cbd6d2;
  font-weight: 750;
}
@media (min-width: 751px) and (max-width: 1400px) {
  .clearSearchButton {
    min-width: 54px;
  }
}

/* Phone register: full-width search and compact identity/status area. */
.keyboardLabelPhone { display: none; }
@media (max-width: 750px) {
  body { font-size: 16px; }
  header { padding: 10px 12px; gap: 8px 12px; flex-wrap: nowrap; align-items: center; }
  .brand { flex: 0 0 112px; max-width: 32%; }
  .brand img { width: 112px; display: block; }
  .brand h1 { display: none; }
  .registerHeaderActions { flex: 1; min-width: 0; width: auto; gap: 4px; align-items: flex-start; }
  #schoolIdentity { display: block; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
  #registerIdentity { margin: 3px 0 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
  .installRegister { width: auto; min-height: 44px; padding: 7px 10px; font-size: 13px; }
  .notice { padding: 6px 12px; font-size: 11px; line-height: 1.35; }
  .runningTotals { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 9px 12px; }
  .runningTotals div { gap: 0; }
  .runningTotals span { font-size: 12px; }
  .runningTotals strong { font-size: 23px; line-height: 1.2; }
  .runningTotals small { grid-column: 1 / -1; width: auto; font-size: 10px; }
  nav { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  nav button { flex: 1; padding: 8px; min-height: 44px; font-size: 14px; }
  .connectionStatus { margin: 0 12px 5px; padding: 8px 10px; font-size: 12px; line-height: 1.35; }
  #syncStatus { margin: 4px 12px 8px; font-size: 11px; line-height: 1.3; }
  #syncStatus:empty { display: none; }
  #registerView { gap: 12px; }
  #registerView > section { padding: 14px; min-width: 0; border-radius: 12px; }
  #registerView h2 { font-size: 21px; margin-bottom: 10px; }
  .giftSearch > label { font-size: 13px; line-height: 1.35; margin-bottom: 8px; }
  #scanForm { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; }
  #scanForm input { grid-column: 1 / -1; min-width: 0; min-height: 48px; font-size: 16px; padding: 10px 12px; }
  #scanForm button { min-width: 0; min-height: 44px; padding: 8px 10px; font-size: 14px; line-height: 1.2; }
  .keyboardLabelFull { display: none; }
  .keyboardLabelPhone { display: inline; }
  .cameraScan { width: 100%; min-height: 44px; margin: 8px 0 0; padding: 9px 12px; font-size: 15px; }
  #cameraFeedback { margin: 8px 0 0; padding: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
  #cameraFeedback:empty { display: none; }
  .scannerHelp { display: none; }
  #matchCount { margin: 8px 0; font-size: 12px; line-height: 1.3; }
  .products { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .products button { padding: 10px; min-width: 0; min-height: 80px; font-size: 14px; overflow-wrap: anywhere; }
  #products { max-height: 50vh; }
  .cameraPanel { margin-top: 8px; padding: 10px; }
  .cameraToolbar { gap: 8px; font-size: 13px; }
  .cameraToolbar button { min-height: 44px; padding: 6px 8px; font-size: 13px; }
  .cameraPanel p { margin-bottom: 0; font-size: 12px; }
  .saleComplete { margin: 6px 12px; padding: 12px; border-width: 2px; }
  .saleComplete strong { font-size: 23px; }
  .saleComplete span { font-size: 21px; margin-top: 3px; }
  .saleComplete p { font-size: 14px; margin-top: 6px; }
  #historyView { margin: 0 12px 12px; padding: 14px; }
  footer { padding: 8px 12px; font-size: 11px; }
}

/* Remaining balance includes all entered payments; total due stays the sale total. */
.balanceDuePanel { flex-direction: column; align-items: flex-end; gap: 4px; }
.balanceDuePanel > div { display: flex; align-items: baseline; gap: 8px; }
.balanceDuePanel > div > span { font-size: 12px; font-weight: 800; color: #536d65; }
.balanceDuePanel > div > strong { font-size: 17px; color: #174c43; }

/* Clear sale/return actions and compact search controls. */
#pay { background: #15803d; border-color: #15803d; color: #fff; font-weight: 800; }
#pay:hover { background: #166534; border-color: #166534; }
.returnPrompt { flex-wrap: wrap; }
.returnPrompt span { font-size: 16px; }
.returnPrompt .returnSaleButton { min-height: 44px; padding: 10px 18px; font-size: 16px; background: #dc2626; border-color: #dc2626; color: #fff; }
.returnPrompt .returnSaleButton:hover { background: #b91c1c; border-color: #b91c1c; }
@media (max-width: 750px) {
  #scanForm { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 751px) {
  #scanForm { align-items: center; }
  #scanForm input { flex: 1; min-width: 0; }
  #registerView > section { min-width: 0; }
  #cameraFeedback:empty, #syncStatus:empty { display: none; }
}

/* Successful barcode additions use a green confirmation; errors remain red. */
#message.toast.toastSuccess { background: #15803d; color: #fff; border: 2px solid #22c55e; }

/* One-tap items for products with missing or easily damaged barcodes. */
.quickSaleSection { margin: 12px 0 8px; padding: 12px; background: #eff8f4; border: 1px solid #b8d9c9; border-radius: 10px; }
.quickSaleSection h3 { margin: 0 0 4px; font-size: 17px; }
.quickSaleSection p { margin: 0 0 10px; font-size: 13px; line-height: 1.35; }
.quickSaleItems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.quickSaleButton { min-width: 0; min-height: 66px; text-align: left; font-weight: 650; overflow-wrap: anywhere; background: #fff; border: 1px solid #92c4ae; }
.quickSaleButton strong { display: block; margin-top: 5px; color: #174c43; }
@media (max-width: 750px) { .quickSaleItems { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quickSaleButton { min-height: 76px; } }