:root {
  --bg: #f6efe3;
  --surface: rgba(255, 251, 245, 0.96);
  --surface-soft: #fff6ea;
  --surface-strong: #ffffff;
  --line: rgba(118, 83, 36, 0.14);
  --text: #2f2419;
  --muted: #786553;
  --accent: #cd742b;
  --accent-deep: #a35617;
  --green: #2b7f5f;
  --red: #c45353;
  --shadow: 0 16px 42px rgba(100, 70, 34, 0.12);
  font-family: "Battambang", "Plus Jakarta Sans", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(238, 189, 116, 0.35), transparent 25%),
    linear-gradient(180deg, #f8f2e8 0%, #f2ebdf 100%);
  overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.setup-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 10px 16px;
  background: #fff4d0;
  color: #69470f;
  border-bottom: 1px solid rgba(105, 71, 15, 0.12);
}

.auth-shell,
.app-shell {
  width: min(1120px, calc(100% - 22px));
  margin: 0 auto;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 0;
}

.auth-shell__inner,
.summary-grid,
.screen-stack,
.stack-list,
.two-column,
.grid-form {
  display: grid;
  gap: 16px;
}

.auth-shell__inner {
  width: min(100%, 980px);
}

.auth-card,
.panel,
.summary-card,
.cart-box,
.record-box,
.drawer__card,
.payment-card,
.receipt-card {
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card {
  padding: 22px;
}

.auth-card--warm {
  background: linear-gradient(145deg, rgba(255, 252, 247, 0.97), rgba(255, 242, 221, 0.95));
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.84rem;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

.auth-copy,
.auth-note,
.simple-steps,
.summary-card p,
.list-head span,
.meta-line,
.receipt-brand p,
.receipt-meta,
.receipt-thanks,
.drawer__card,
.topbar__actions {
  color: var(--muted);
}

.auth-link {
  text-decoration: none;
}

.brand-lockup,
.sidebar__brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

.language-switch {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-language-switch {
  justify-content: center;
}

.auth-note {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
}

.auth-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.tab-button,
.primary-button,
.secondary-button,
.ghost-button,
.icon-button,
.delete-button,
.nav-button {
  border: none;
  border-radius: 18px;
}

.tab-button,
.secondary-button,
.ghost-button,
.nav-button {
  background: var(--surface-soft);
  color: var(--accent-deep);
}

.tab-button {
  min-height: 44px;
  padding: 0 14px;
}

.tab-button--active,
.nav-button--active {
  background: rgba(205, 116, 43, 0.18);
}

.form-stack,
.simple-steps {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 8px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  padding: 0 14px;
  color: var(--text);
}

textarea {
  min-height: 132px;
  padding: 14px;
  resize: vertical;
}

input:focus,
select:focus,
button:focus {
  outline: 2px solid rgba(205, 116, 43, 0.25);
  outline-offset: 2px;
}

.primary-button {
  min-height: 52px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--accent), #e59a58);
  color: #fff;
  font-weight: 700;
}

.secondary-button,
.ghost-button {
  min-height: 46px;
  padding: 0 16px;
}

.icon-button {
  min-width: 42px;
  min-height: 42px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.delete-button {
  min-height: 38px;
  padding: 0 12px;
  background: rgba(196, 83, 83, 0.14);
  color: var(--red);
}

.app-shell {
  padding: 16px 0 92px;
}

.topbar {
  display: grid;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.app-layout {
  display: grid;
  gap: 16px;
}

.sidebar {
  display: none;
}

.sidebar__brand {
  padding: 8px 8px 16px;
}

.sidebar__brand span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}

.topbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.user-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(205, 116, 43, 0.12);
  color: var(--accent-deep);
}

.panel {
  padding: 18px;
}

.panel__head,
.list-head,
.cart-row,
.product-row,
.record-row,
.receipt-card__top,
.receipt-actions,
.receipt-row,
.receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.panel__head {
  margin-bottom: 14px;
}

.panel__head--stack {
  align-items: flex-start;
}

.grid-form__wide {
  grid-column: 1 / -1;
}

.cart-box,
.record-box {
  padding: 14px;
  background: var(--surface-soft);
}

.quick-products {
  margin: 16px 0;
}

.quick-product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.category-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.category-chip {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--accent-deep);
}

.category-chip--active {
  background: rgba(205, 116, 43, 0.18);
  border-color: rgba(205, 116, 43, 0.28);
}

.quick-product {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--text);
  text-align: left;
}

.quick-product__media,
.product-row__media,
.cart-row__media {
  display: flex;
  gap: 10px;
  align-items: center;
}

.product-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  flex-shrink: 0;
}

.product-thumb--small {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.quick-product span {
  color: var(--muted);
  font-size: 0.86rem;
}

.quick-product:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.summary-card {
  padding: 16px;
}

.summary-card--warm {
  background: linear-gradient(135deg, #cd742b, #e4a96c);
  color: #fff8ef;
}

.summary-card--warm p {
  color: rgba(255, 248, 239, 0.86);
}

.summary-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.55rem;
}

.cart-row,
.product-row,
.record-row {
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  align-items: start;
}

.cart-row:first-child,
.product-row:first-child,
.record-row:first-child {
  border-top: none;
  padding-top: 2px;
}

.meta-line {
  font-size: 0.9rem;
}

.tag {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(43, 127, 95, 0.12);
  color: var(--green);
}

.tag--low {
  background: rgba(196, 83, 83, 0.12);
  color: var(--red);
}

.cart-footer {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.cart-footer__fee {
  min-width: 0;
}

.cart-footer__summary {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.settings-layout,
.settings-stack {
  display: grid;
  gap: 16px;
}

.settings-media {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-preview {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: var(--surface-strong);
}

.settings-preview--logo {
  max-width: 120px;
}

.payment-qr-image {
  width: min(100%, 240px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.receipt-brand__logo {
  width: 52px;
  height: 52px;
  margin: 0 auto 8px;
  border-radius: 14px;
  object-fit: cover;
}

.product-image-field {
  min-width: 220px;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(20, 15, 10, 0.34);
  display: grid;
  justify-items: end;
  padding: 12px;
}

.drawer__card {
  width: min(100%, 320px);
  padding: 18px;
}

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.drawer__nav {
  display: grid;
  gap: 10px;
}

.nav-button {
  min-height: 48px;
  padding: 0 14px;
  text-align: left;
}

.bottom-nav {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 251, 245, 0.96);
  box-shadow: var(--shadow);
}

.bottom-nav .nav-button {
  min-height: 44px;
  padding: 0 6px;
  text-align: center;
  font-size: 0.8rem;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(27, 22, 18, 0.46);
  display: grid;
  place-items: center;
  padding: 16px;
}

.receipt-card {
  width: min(100%, 420px);
  padding: 16px;
}

.payment-card {
  width: min(100%, 420px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 16px;
}

.payment-total {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.payment-total strong {
  font-size: 2rem;
}

.qr-box {
  display: grid;
  place-items: center;
  gap: 8px;
  margin: 14px auto;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(9, 14px);
  gap: 4px;
  padding: 12px;
  border: 6px solid #111;
  background: #fff;
}

.qr-dot {
  width: 14px;
  height: 14px;
  background: transparent;
}

.qr-dot--active {
  background: #111;
}

.payment-methods {
  margin-top: 12px;
}

.payment-choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.receipt-paper {
  margin-top: 12px;
  border-radius: 0;
  background: #fff;
  color: #222;
  padding: 18px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 10px),
    97% 100%,
    94% calc(100% - 10px),
    91% 100%,
    88% calc(100% - 10px),
    85% 100%,
    82% calc(100% - 10px),
    79% 100%,
    76% calc(100% - 10px),
    73% 100%,
    70% calc(100% - 10px),
    67% 100%,
    64% calc(100% - 10px),
    61% 100%,
    58% calc(100% - 10px),
    55% 100%,
    52% calc(100% - 10px),
    49% 100%,
    46% calc(100% - 10px),
    43% 100%,
    40% calc(100% - 10px),
    37% 100%,
    34% calc(100% - 10px),
    31% 100%,
    28% calc(100% - 10px),
    25% 100%,
    22% calc(100% - 10px),
    19% 100%,
    16% calc(100% - 10px),
    13% 100%,
    10% calc(100% - 10px),
    7% 100%,
    4% calc(100% - 10px),
    1% 100%,
    0 calc(100% - 10px)
  );
}

.receipt-brand {
  text-align: center;
}

.receipt-brand h1 {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.receipt-divider {
  margin: 14px 0;
  border-top: 2px dashed #8e8e8e;
}

.receipt-row span {
  flex: 1;
}

.receipt-row span:last-child,
.receipt-total strong {
  text-align: right;
}

.receipt-row--head {
  font-weight: 700;
}

.receipt-total--grand {
  font-weight: 700;
}

.receipt-thanks {
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.receipt-actions {
  margin-top: 14px;
}

.primary-button--full {
  width: 100%;
}

.startup-splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: #fff;
}

.startup-splash__center {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.startup-logo {
  position: relative;
  z-index: 2;
  width: 136px;
  height: 136px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 18px 24px rgba(205, 116, 43, 0.18));
}

.startup-title {
  font-size: 1.05rem;
  color: var(--muted);
}

.startup-orbit {
  position: absolute;
  inset: -32px;
  animation: orbit-spin 0.86s linear 5;
}

.startup-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.startup-orbit__ring--one {
  border-top-color: rgba(231, 165, 93, 0.95);
  border-right-color: rgba(231, 165, 93, 0.45);
}

.startup-orbit__ring--two {
  inset: 16px;
  border-bottom-color: rgba(252, 202, 120, 0.95);
  border-left-color: rgba(252, 202, 120, 0.4);
  animation: orbit-spin-reverse 0.86s linear 5;
}

.async-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  background: rgba(42, 30, 17, 0.22);
  padding: 18px;
}

.async-overlay__card {
  display: grid;
  gap: 12px;
  min-width: min(92vw, 320px);
  padding: 24px 22px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255, 251, 245, 0.98);
  box-shadow: var(--shadow);
}

.async-spinner,
.async-success {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
}

.async-spinner {
  border: 4px solid rgba(205, 116, 43, 0.16);
  border-top-color: var(--accent);
  animation: orbit-spin 0.9s linear infinite;
}

.async-success {
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #fff;
  background: linear-gradient(135deg, var(--green), #55b38e);
}

.auth-shell {
  position: relative;
  z-index: 10;
  background: transparent;
}

.auth-card--popup {
  align-self: end;
}

.panel--pos-main,
.panel--checkout {
  min-height: 100%;
}

.pos-layout {
  display: grid;
  gap: 18px;
}

.pos-head,
.checkout-head,
.pos-search-row,
.record-actions,
.record-actions__buttons,
.checkout-actions,
.qty-stepper {
  display: flex;
  gap: 12px;
  align-items: center;
}

.pos-head,
.checkout-head,
.checkout-actions {
  justify-content: space-between;
}

.pos-head__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pos-search input {
  background: rgba(255, 255, 255, 0.85);
}

.quick-product-list--desktop {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.quick-product {
  min-height: 210px;
  align-content: start;
  padding: 14px;
  border-radius: 24px;
}

.quick-product .product-thumb {
  width: 100%;
  height: 120px;
}

.quick-product strong {
  font-size: 1rem;
}

.quick-product small {
  color: var(--muted);
}

.panel--checkout {
  display: grid;
  gap: 16px;
  align-content: start;
}

.customer-box,
.checkout-totals {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 248, 239, 0.8);
  border: 1px solid var(--line);
}

.customer-box__toggle {
  justify-self: start;
}

.customer-box__fields {
  display: grid;
  gap: 12px;
}

.checkout-cart-list {
  max-height: 42vh;
  overflow: auto;
}

.cart-row__side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.qty-stepper {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.qty-stepper__button {
  min-width: 34px;
  min-height: 34px;
}

.checkout-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.checkout-line--muted {
  color: var(--muted);
}

.checkout-line--grand {
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 1.08rem;
}

.help-box {
  display: grid;
  gap: 14px;
}

.record-actions {
  align-items: flex-end;
  flex-direction: column;
}

.record-actions__buttons {
  flex-wrap: wrap;
  justify-content: flex-end;
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbit-spin-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@media (max-width: 719px) {
  .auth-shell,
  .app-shell {
    width: min(100% - 16px, 1120px);
  }

  .auth-shell {
    padding: 16px 0 24px;
  }

  .auth-card,
  .panel,
  .summary-card,
  .cart-box,
  .record-box,
  .drawer__card,
  .payment-card,
  .receipt-card {
    border-radius: 22px;
  }

  .auth-card,
  .panel {
    padding: 16px;
  }

  h1 {
    font-size: 2.2rem;
  }

  .topbar__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .topbar__actions .language-switch,
  .topbar__actions .user-chip {
    grid-column: 1 / -1;
  }

  .topbar__actions button,
  .topbar__actions .secondary-button,
  .topbar__actions .ghost-button {
    width: 100%;
  }

  .panel__head,
  .list-head,
  .cart-row,
  .product-row,
  .record-row,
  .receipt-card__top,
  .receipt-actions,
  .receipt-row,
  .receipt-total {
    align-items: flex-start;
  }

  .cart-row,
  .product-row,
  .record-row,
  .receipt-actions,
  .receipt-row,
  .receipt-total {
    flex-direction: column;
  }

  .cart-row > div,
  .product-row > div,
  .record-row > div {
    width: 100%;
  }

  .product-row .delete-button,
  .record-row .delete-button,
  .cart-row .delete-button {
    width: 100%;
    margin-top: 8px;
  }

  .cart-footer {
    grid-template-columns: 1fr;
  }

  .cart-footer__fee,
  .cart-footer__summary {
    width: 100%;
  }

  .receipt-card {
    padding: 12px;
  }

  .quick-product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-product {
    min-height: 190px;
  }

  .checkout-cart-list {
    max-height: none;
  }

  .qr-grid {
    grid-template-columns: repeat(9, 12px);
    gap: 3px;
  }

  .qr-dot {
    width: 12px;
    height: 12px;
  }
}

@media (min-width: 720px) {
  .summary-grid,
  .two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-shell__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .auth-language-switch {
    grid-column: 1 / -1;
  }

  .topbar {
    grid-template-columns: 1fr auto;
  }

  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .cart-footer {
    grid-template-columns: minmax(180px, 1.2fr) repeat(2, minmax(140px, 1fr)) minmax(180px, 1fr);
    align-items: end;
  }

  .settings-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .settings-layout > .primary-button {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .app-shell {
    width: min(1240px, calc(100% - 28px));
    padding-bottom: 40px;
  }

  .app-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 12px;
    min-height: calc(100vh - 32px);
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .screen-stack {
    min-width: 0;
  }

  .pos-layout {
    grid-template-columns: minmax(0, 1.55fr) 360px;
    align-items: start;
  }

  .panel--checkout {
    position: sticky;
    top: 16px;
  }

  .bottom-nav {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  #receiptModal,
  #receiptModal * {
    visibility: visible;
  }

  #receiptModal {
    position: static;
    background: transparent;
    padding: 0;
  }

  .receipt-card {
    box-shadow: none;
    border: none;
    width: 80mm;
    padding: 0;
  }

  .receipt-actions,
  .receipt-card__top {
    display: none;
  }
}

/* Blue shell refresh */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f7faff;
  --surface-strong: #ffffff;
  --line: rgba(0, 93, 253, 0.14);
  --text: #0f172a;
  --muted: #64748b;
  --accent: #005dfd;
  --accent-deep: #0048c9;
  --green: #1d4ed8;
  --red: #dc2626;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

body {
  background: #ffffff;
}

.auth-shell,
.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.auth-shell {
  padding: 0 32px;
}

.auth-shell__inner {
  width: min(100%, 1120px);
}

.auth-card,
.panel,
.summary-card,
.cart-box,
.record-box,
.drawer__card,
.payment-card,
.receipt-card,
.customer-box,
.checkout-totals,
.sidebar,
.bottom-nav {
  border-radius: 12px;
}

.tab-button,
.primary-button,
.secondary-button,
.ghost-button,
.icon-button,
.delete-button,
.nav-button,
input,
select,
textarea {
  border-radius: 10px;
}

.primary-button {
  background: linear-gradient(180deg, #005dfd 0%, #0048c9 100%);
}

.tab-button,
.secondary-button,
.ghost-button,
.nav-button {
  background: #f7faff;
  color: var(--accent-deep);
}

.tab-button--active,
.nav-button--active {
  background: rgba(0, 93, 253, 0.12);
  color: var(--accent-deep);
}

input,
select,
textarea {
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.setup-banner {
  background: #eaf2ff;
  color: #003aa5;
  border-bottom-color: rgba(0, 93, 253, 0.16);
}

.auth-card--warm {
  background: #ffffff;
}

.app-shell {
  min-height: 100vh;
  padding: 0;
}

.topbar {
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.app-layout {
  min-height: calc(100vh - 96px);
  gap: 0;
}

.sidebar {
  top: 0;
  min-height: calc(100vh - 96px);
  max-height: calc(100vh - 96px);
  padding: 18px 16px;
  border: none;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  overflow-y: auto;
  background: #ffffff;
}

.screen-stack {
  padding: 24px;
  overflow: auto;
}

.panel,
.record-box,
.summary-card {
  background: #ffffff;
}

.startup-splash {
  background: #ffffff;
}

.startup-splash__center {
  gap: 10px;
}

.startup-logo {
  width: 146px;
  height: 146px;
  filter: none;
}

.startup-title {
  color: var(--accent-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.startup-orbit,
.startup-orbit__ring {
  display: none !important;
}

.startup-loader {
  display: grid;
  grid-template-columns: repeat(12, 8px);
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.startup-loader__dot {
  width: 8px;
  height: 22px;
  border-radius: 999px;
  background: rgba(0, 93, 253, 0.18);
  transform-origin: center 42px;
  animation: startup-wheel 1.1s linear infinite;
}

.startup-loader__dot:nth-child(1) { transform: rotate(0deg) translateY(0); animation-delay: 0s; }
.startup-loader__dot:nth-child(2) { transform: rotate(30deg) translateY(0); animation-delay: 0.09s; }
.startup-loader__dot:nth-child(3) { transform: rotate(60deg) translateY(0); animation-delay: 0.18s; }
.startup-loader__dot:nth-child(4) { transform: rotate(90deg) translateY(0); animation-delay: 0.27s; }
.startup-loader__dot:nth-child(5) { transform: rotate(120deg) translateY(0); animation-delay: 0.36s; }
.startup-loader__dot:nth-child(6) { transform: rotate(150deg) translateY(0); animation-delay: 0.45s; }
.startup-loader__dot:nth-child(7) { transform: rotate(180deg) translateY(0); animation-delay: 0.54s; }
.startup-loader__dot:nth-child(8) { transform: rotate(210deg) translateY(0); animation-delay: 0.63s; }
.startup-loader__dot:nth-child(9) { transform: rotate(240deg) translateY(0); animation-delay: 0.72s; }
.startup-loader__dot:nth-child(10) { transform: rotate(270deg) translateY(0); animation-delay: 0.81s; }
.startup-loader__dot:nth-child(11) { transform: rotate(300deg) translateY(0); animation-delay: 0.9s; }
.startup-loader__dot:nth-child(12) { transform: rotate(330deg) translateY(0); animation-delay: 0.99s; }

.async-overlay {
  background: rgba(15, 23, 42, 0.18);
}

.async-overlay__card {
  border-radius: 12px;
  border-color: rgba(0, 93, 253, 0.14);
}

.async-spinner {
  border-color: rgba(0, 93, 253, 0.12);
  border-top-color: #005dfd;
}

.async-success {
  background: linear-gradient(180deg, #005dfd 0%, #0048c9 100%);
}

.brand-logo {
  border-radius: 12px;
}

.pos-layout {
  gap: 24px;
}

.quick-product {
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.08);
}

.quick-product .product-thumb {
  border-radius: 10px;
}

.checkout-cart-list {
  padding-right: 4px;
}

.bottom-nav {
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: #ffffff;
}

@media (min-width: 960px) {
  .app-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@keyframes startup-wheel {
  0%, 100% { background: rgba(0, 93, 253, 0.12); }
  45% { background: rgba(0, 93, 253, 1); }
}

/* Compact receipt refresh */
.receipt-card {
  width: min(100%, 390px);
  max-height: calc(100vh - 24px);
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
}

.receipt-paper {
  margin-top: 0;
  padding: 16px 16px 20px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border: 1px solid rgba(15, 23, 42, 0.08);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8px),
    97.5% 100%,
    95% calc(100% - 8px),
    92.5% 100%,
    90% calc(100% - 8px),
    87.5% 100%,
    85% calc(100% - 8px),
    82.5% 100%,
    80% calc(100% - 8px),
    77.5% 100%,
    75% calc(100% - 8px),
    72.5% 100%,
    70% calc(100% - 8px),
    67.5% 100%,
    65% calc(100% - 8px),
    62.5% 100%,
    60% calc(100% - 8px),
    57.5% 100%,
    55% calc(100% - 8px),
    52.5% 100%,
    50% calc(100% - 8px),
    47.5% 100%,
    45% calc(100% - 8px),
    42.5% 100%,
    40% calc(100% - 8px),
    37.5% 100%,
    35% calc(100% - 8px),
    32.5% 100%,
    30% calc(100% - 8px),
    27.5% 100%,
    25% calc(100% - 8px),
    22.5% 100%,
    20% calc(100% - 8px),
    17.5% 100%,
    15% calc(100% - 8px),
    12.5% 100%,
    10% calc(100% - 8px),
    7.5% 100%,
    5% calc(100% - 8px),
    2.5% 100%,
    0 calc(100% - 8px)
  );
}

.receipt-brand {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.receipt-brand__logo {
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 10px;
}

.receipt-brand__eyebrow,
.receipt-support,
.receipt-note,
.receipt-thanks,
.receipt-meta span,
.receipt-row small {
  font-size: 0.72rem;
  line-height: 1.35;
}

.receipt-brand h1 {
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.14em;
}

.receipt-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receipt-meta > div {
  display: grid;
  gap: 2px;
}

.receipt-meta strong {
  font-size: 0.84rem;
  font-weight: 700;
  color: #161616;
}

.receipt-row,
.receipt-total {
  align-items: flex-start;
  font-size: 0.82rem;
}

.receipt-row span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.receipt-row small {
  color: #6b7280;
}

.receipt-divider {
  margin: 12px 0;
  border-top-width: 1px;
}

.receipt-note {
  text-align: center;
  color: #4b5563;
}

.receipt-barcode {
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-align: center;
  color: #111827;
  padding: 8px 0 0;
}

.receipt-actions {
  margin-top: 0;
  position: sticky;
  bottom: 0;
  background: #ffffff;
  padding-top: 10px;
}

@media (max-width: 719px) {
  .modal {
    place-items: start center;
    padding: 10px;
  }

  .receipt-card {
    width: min(100%, 100%);
    max-height: calc(100vh - 20px);
    border-radius: 10px;
    padding: 10px;
  }

  .receipt-paper {
    min-height: 0;
  }

  .receipt-row,
  .receipt-total {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .receipt-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    box-shadow: 0 -8px 20px rgba(255, 255, 255, 0.96);
  }

  .receipt-actions .primary-button,
  .receipt-actions .secondary-button {
    width: 100%;
  }
}

/* POS recovery additions */
.category-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.category-chip {
  min-height: 52px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 93, 253, 0.12);
  font-weight: 700;
}

.category-chip--active {
  background: rgba(0, 93, 253, 0.08);
  border-color: rgba(0, 93, 253, 0.4);
  color: #005dfd;
}

.quick-product {
  text-align: left;
}

.quick-product span {
  display: block;
}

.quick-product__hint {
  margin-top: 2px;
  font-size: 0.72rem;
  color: #64748b;
}

.option-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.search-field {
  display: grid;
}

.mobile-checkout-button {
  display: none;
}

.item-modal-card {
  max-height: calc(100vh - 24px);
  overflow: auto;
}

.option-fieldset {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin: 0;
}

.option-checklist {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.option-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-metrics {
  display: grid;
}

.cart-row .meta-line,
.receipt-row .meta-line {
  margin-top: 4px;
  font-size: 0.76rem;
  color: #6b7280;
}

@media (max-width: 719px) {
  .category-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .quick-product {
    min-height: 148px;
    padding: 10px;
  }

  .quick-product .product-thumb {
    width: 44px;
    height: 44px;
  }

  .customer-box__toggle,
  .checkout-actions .primary-button,
  .checkout-actions .secondary-button {
    width: 100%;
  }

  .checkout-actions {
    display: grid;
    gap: 10px;
  }

  .mobile-checkout-button {
    display: inline-flex;
    position: sticky;
    bottom: 84px;
    z-index: 2;
    width: 100%;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
  }

  .panel--checkout {
    scroll-margin-top: 12px;
  }

  .record-actions__buttons {
    width: 100%;
  }

  .record-actions__buttons .secondary-button,
  .record-actions__buttons .delete-button {
    width: 100%;
  }

  .option-toggle-grid {
    grid-template-columns: 1fr;
  }

.item-modal-card {
  width: 100%;
  padding: 14px;
}
}

/* Next recovery polish */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8fbff;
  --surface-strong: #ffffff;
  --line: rgba(15, 23, 42, 0.1);
  --text: #0f172a;
  --muted: #475569;
  --accent: #005dfd;
  --accent-deep: #0047c4;
  --green: #0f9f63;
  --red: #dc2626;
  --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

body {
  background: #ffffff;
  color: var(--text);
}

.auth-shell,
.app-shell {
  width: 100%;
}

.startup-title {
  color: #0f172a;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}

.startup-loader {
  width: min(260px, 72vw);
  display: block;
  margin-top: 10px;
}

.startup-loader__track {
  display: block;
  width: 100%;
  height: 8px;
  background: rgba(0, 93, 253, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.startup-loader__bar {
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #005dfd 0%, #5aa1ff 100%);
  animation: startup-progress 3s linear forwards;
}

.startup-loader__dot {
  display: none !important;
}

.pos-home-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 93, 253, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.pos-home-identity__image {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0, 93, 253, 0.12);
  background: #ffffff;
}

.pos-home-identity__copy {
  display: grid;
  gap: 4px;
}

.pos-home-identity__copy strong {
  font-size: 1rem;
  color: #0f172a;
}

.pos-home-identity__copy p {
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.45;
}

.quick-product small {
  color: #2563eb;
  font-size: 0.72rem;
}

.record-box--nested {
  margin-top: 12px;
  border-style: dashed;
  box-shadow: none;
}

.modal {
  overflow-y: auto;
  align-items: start;
  padding: 12px;
}

.payment-card,
.receipt-card,
.item-modal-card {
  margin: auto;
}

.receipt-card {
  width: min(100%, 410px);
  max-height: calc(100dvh - 16px);
}

.receipt-paper {
  min-height: 0;
}

.receipt-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.receipt-actions .primary-button,
.receipt-actions .secondary-button {
  width: 100%;
}

.receipt-brand__logo {
  width: 46px;
  height: 46px;
}

.receipt-brand h1 {
  font-size: 1.45rem;
  letter-spacing: 0.12em;
}

.receipt-row,
.receipt-total {
  font-size: 0.78rem;
}

.receipt-brand__eyebrow,
.receipt-support,
.receipt-note,
.receipt-thanks,
.receipt-meta span,
.receipt-row small,
.receipt-row .meta-line {
  font-size: 0.7rem;
}

.primary-button,
.secondary-button,
.ghost-button,
.tab-button,
.nav-button,
.delete-button,
.icon-button,
input,
select,
textarea,
.auth-card,
.panel,
.summary-card,
.record-box,
.receipt-card,
.customer-box,
.checkout-totals,
.sidebar,
.bottom-nav {
  border-radius: 10px;
}

@media (max-width: 719px) {
  .topbar {
    padding: 14px 14px 12px;
  }

  .panel,
  .record-box {
    padding: 14px;
  }

  .pos-layout {
    gap: 14px;
  }

  .pos-home-identity {
    padding: 12px;
    gap: 12px;
  }

  .pos-home-identity__image {
    width: 46px;
    height: 46px;
  }

  .quick-product {
    min-height: 154px;
  }

  .mobile-checkout-button {
    bottom: 78px;
  }

  .receipt-card {
    max-height: calc(100dvh - 10px);
    padding: 10px;
  }

  .receipt-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receipt-actions .primary-button {
    grid-column: span 2;
  }
}

@keyframes startup-progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}