:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --bg: #031716;
  --surface: #0b2321;
  --surface-soft: #12302d;
  --ink: #f4f8f7;
  --ink-soft: #d7e1df;
  --muted: #8ba5a1;
  --line: rgba(255, 255, 255, 0.09);
  --accent: #d4ff3f;
  --accent-dark: #bfe932;
  --warning: #f3b35b;
  --danger: #ff756b;
  --primary-bg: #d4ff3f;
  --primary-text: #071312;
  --inverse-bg: #d4ff3f;
  --inverse-text: #071312;
  --shadow: 0 24px 64px rgba(0, 0, 0, 0.36);
  --radius: 12px;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.25, 1, 0.5, 1);
  color-scheme: dark;
}

body {
  background: radial-gradient(circle at 20% 0%, rgba(22, 105, 99, 0.16), transparent 32rem), var(--bg);
}
:focus-visible { outline: 3px solid rgba(212, 255, 63, 0.8); outline-offset: 3px; }
.brand-mark { width: 34px; height: 34px; object-fit: cover; border-radius: 9px; }
.brand { color: var(--ink); }
.button,
.icon-button,
.theme-toggle,
.account-button,
.product-card,
.ticket-quantity button {
  transition: transform 140ms var(--ease-enter), border-color 180ms ease, background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}
.button:active,
.icon-button:active,
.theme-toggle:active,
.product-card:active,
.ticket-quantity button:active { transform: scale(0.97); }
.button.primary { background: var(--accent); color: #071312; box-shadow: 0 0 20px rgba(212, 255, 63, 0.13); }
.button.secondary,
.icon-button,
.theme-toggle,
.account-button { border-color: var(--line); background: var(--surface-soft); color: var(--ink); }

.auth-screen {
  position: relative;
  justify-items: end;
  background:
    linear-gradient(90deg, rgba(3, 23, 22, 0.15), rgba(3, 23, 22, 0.76) 58%, #031716 80%),
    url("/assets/kiosco-login.png") center / cover no-repeat;
}
.auth-panel {
  width: min(480px, 100%);
  margin-right: clamp(0px, 7vw, 120px);
  border-color: var(--line);
  border-radius: 16px;
  background: rgba(11, 35, 33, 0.93);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.auth-panel h1 { max-width: 12ch; letter-spacing: -0.04em; }
.auth-loader { border-top-color: var(--accent); }
input,
select,
textarea { min-height: 46px; border-color: var(--line); background: #02100f; color: var(--ink); }
input:focus,
select:focus,
textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 255, 63, 0.08); }

.pos-topbar {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 23, 22, 0.9);
  backdrop-filter: blur(18px);
}
.pos-main { gap: 0; }
.sell-panel { padding: clamp(16px, 2vw, 28px); }
.ticket-panel {
  border-left: 1px solid var(--line);
  background: #0a201e;
  box-shadow: -16px 0 44px rgba(0, 0, 0, 0.16);
}
.search-bar {
  position: sticky;
  top: 88px;
  z-index: 8;
  border: 1px solid rgba(212, 255, 63, 0.38);
  border-radius: 999px;
  background: rgba(11, 35, 33, 0.94);
  padding: 7px;
  backdrop-filter: blur(18px);
}
.search-bar input { border: 0; background: transparent; }
.scan-status { color: #72cbc6; font-family: "JetBrains Mono", ui-monospace, monospace; }
.product-results { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.product-card {
  min-height: 168px;
  border-color: var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, #0d2927, #08201e);
  box-shadow: none;
}
.product-card strong { color: var(--ink); }
.product-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212, 255, 63, 0.14); }
.ticket-heading,
.ticket-item,
.payment-box,
.ticket-summary { border-color: var(--line); }
#ticket-total { color: var(--accent); font-variant-numeric: tabular-nums; }
.finish-button { min-height: 58px; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.toast { border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink); box-shadow: var(--shadow); }
.scanner-dialog::backdrop { background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(4px); }
.scanner-shell { border: 1px solid var(--line); background: var(--surface); }

@media (hover: hover) and (pointer: fine) {
  .product-card:hover { transform: translateY(-2px); border-color: rgba(114, 203, 198, 0.28); }
}

@media (max-width: 880px) {
  .auth-screen { justify-items: stretch; }
  .auth-panel { margin: 0; justify-self: center; }
  .pos-main { grid-template-columns: 1fr; }
  .ticket-panel { border-top: 1px solid var(--line); border-left: 0; }
  .product-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-bar { top: 76px; }
}

@media (max-width: 520px) {
  .pos-topbar { padding: 10px 12px; }
  .pos-topbar .brand > span:last-child,
  .dash-link { display: none; }
  .sell-panel { padding: 12px; }
  .product-results { gap: 8px; }
  .product-card { min-height: 146px; padding: 12px; }
  .ticket-panel { padding: 16px 12px calc(18px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}