:root {
  color-scheme: light;
  font-family: "Avenir Next", Avenir, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
  --blue: #3166e3;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #111318;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.counter-shell {
  --cashier-height: 46dvh;
  --customer-height: 54dvh;
  display: grid;
  grid-template-rows: var(--cashier-height) var(--customer-height);
  width: 100%;
  height: 100dvh;
  min-height: 34rem;
  overflow: hidden;
  background: #f4f5f3;
  transition: grid-template-rows 260ms cubic-bezier(.2,.75,.25,1);
}

.counter-shell.is-typing { --cashier-height: 32dvh; --customer-height: 68dvh; }

.cashier-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 50% 130%, rgb(58 68 87 / 32%), transparent 45%), #111318;
}

.corner-controls {
  position: absolute;
  z-index: 3;
  top: max(.75rem, env(safe-area-inset-top));
  left: max(.75rem, env(safe-area-inset-left));
  display: flex;
  gap: .45rem;
}

.icon-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 999px;
  background: rgb(255 255 255 / 6%);
  color: #a6acb9;
  backdrop-filter: blur(10px);
}

svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cashier-content {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 86rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 2.4vh, 1.5rem);
  padding: max(3.25rem, env(safe-area-inset-top)) 1rem 1.1rem;
  text-align: center;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.2,.75,.25,1);
}

.cashier-content.is-flipped { transform: rotate(180deg); }
.eyebrow { margin: 0; color: #737a89; font-size: clamp(.7rem,2.8vw,.95rem); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }

.name-display {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: clamp(2.55rem,14.8vw,9rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .88;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-display.is-waiting { color: #3d424e; font-size: clamp(2rem,9.5vw,6.25rem); letter-spacing: -.04em; }
.cashier-actions { display: flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: .55rem; }

.pill {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: 999px;
  padding: .65rem 1.2rem;
  font-size: .92rem;
  font-weight: 700;
}

.pill.primary { background: #fff; color: #111318; }
.pill.primary:disabled { opacity: .35; }
.pill.dark { background: rgb(255 255 255 / 8%); color: #c9ced8; }
.pill.light { background: #e9ebe7; color: #4b5058; }
.hidden { display: none !important; }

.customer-panel {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  color: #16181c;
  background: linear-gradient(180deg, transparent, rgb(255 255 255 / 45%)), #f4f5f3;
  overscroll-behavior: contain;
}

.customer-content {
  display: flex;
  width: min(100%,42rem);
  margin: auto;
  flex-direction: column;
  align-items: center;
  gap: clamp(.85rem,2.4vh,1.45rem);
  padding: 1rem max(1rem,env(safe-area-inset-left)) max(2.5rem,env(safe-area-inset-bottom));
}

.entry-block { display: grid; width: 100%; gap: .75rem; text-align: center; }
.entry-block label { color: #41454d; font-size: clamp(1.05rem,4.5vw,1.45rem); font-weight: 650; letter-spacing: -.02em; }

.name-input {
  width: 100%;
  height: clamp(3.75rem,9vh,5.25rem);
  border: 2px solid #e1e4df;
  border-radius: 1.25rem;
  outline: 0;
  background: #fff;
  padding: 0 1.1rem;
  color: #16181c;
  box-shadow: 0 .65rem 2rem rgb(17 19 24 / 6%);
  font-size: clamp(1.55rem,7vw,2.25rem);
  font-weight: 700;
  letter-spacing: -.035em;
  text-align: center;
}

.name-input::placeholder { color: #b2b6bc; }
.name-input:focus { border-color: #3b6ff2; box-shadow: 0 0 0 4px rgb(59 111 242 / 16%), 0 .65rem 2rem rgb(17 19 24 / 6%); }

.name-preview {
  display: grid;
  min-width: min(18rem,100%);
  gap: .55rem;
  border: 1px solid rgb(22 24 28 / 5%);
  border-radius: 1.15rem;
  background: rgb(22 24 28 / 3.5%);
  padding: .85rem 1.35rem .95rem;
  text-align: center;
}

.name-preview p { margin: 0; color: #6b7079; font-size: .7rem; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
.preview-value { display: flex; align-items: center; justify-content: center; gap: .55rem; color: #16181c; font-size: clamp(1.25rem,5.4vw,1.7rem); font-weight: 700; letter-spacing: -.025em; }
.preview-value span { max-width: calc(100vw - 7rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-value .empty-name { color: #afb3b9; }
.check { width: 1.35rem; height: 1.35rem; color: #2f9e6e; }
.privacy-note { position: absolute; right: 0; bottom: max(.7rem,env(safe-area-inset-bottom)); left: 0; margin: 0; color: #8b9098; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-align: center; }

.settings-dialog {
  width: min(30rem,calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  border: 0;
  border-radius: 1.5rem;
  padding: 0;
  color: #16181c;
  background: #fff;
  box-shadow: 0 2rem 5rem rgb(17 19 24 / 35%);
}

.settings-dialog::backdrop { background: rgb(8 10 14 / 55%); backdrop-filter: blur(3px); }
.dialog-card { padding: 1.35rem; }
.dialog-header h2 { margin: .75rem 0 .3rem; font-size: 1.35rem; letter-spacing: -.03em; }
.dialog-header p { margin: 0; color: #6b7079; line-height: 1.45; }
.settings-icon { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: .9rem; background: #e6edff; color: #2b5fd9; }
.settings-form { display: grid; gap: 1.25rem; margin-top: 1.35rem; }
.setting-row { display: grid; gap: .7rem; color: #32363d; font-size: .86rem; font-weight: 700; }
.setting-row > span { display: flex; justify-content: space-between; }
.setting-row output { color: #717680; font-size: .78rem; font-variant-numeric: tabular-nums; }
.setting-row select { width: 100%; height: 2.8rem; border: 1px solid #dfe2dc; border-radius: .85rem; padding: 0 .75rem; background: #f7f8f6; }
.setting-row input[type="range"] { width: 100%; accent-color: var(--blue); }
.dialog-actions { display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin-top: 1.5rem; }
.dialog-button { min-height: 2.8rem; border: 0; border-radius: .85rem; padding: .65rem 1rem; font-weight: 700; }
.dialog-button.secondary { background: #e9ebe7; color: #24272d; }
.dialog-button.primary-action { background: var(--blue); color: #fff; }

@media (min-width: 44rem) {
  .counter-shell { --cashier-height: 50dvh; --customer-height: 50dvh; }
  .counter-shell.is-typing { --cashier-height: 38dvh; --customer-height: 62dvh; }
  .cashier-content, .customer-content { padding-inline: 2rem; }
}

@media (max-height: 42rem) {
  .counter-shell { min-height: 28rem; }
  .cashier-content { gap: .45rem; padding-top: 2.8rem; padding-bottom: .55rem; }
  .pill { min-height: 2.35rem; font-size: .8rem; }
  .customer-content { gap: .55rem; padding-top: .55rem; padding-bottom: 1.8rem; }
  .entry-block { gap: .4rem; }
  .name-preview { gap: .3rem; padding-block: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}