:root {
  --bg: #f6f8f2;
  --card: #ffffff;
  --text: #1d261f;
  --muted: #5b6b62;
  --green: #2f824d;
  --green-strong: #1d6437;
  --amber: #c27317;
  --amber-strong: #9f5e13;
  --line: #d8e0d3;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 10% 10%, #dcead8 0, transparent 30%),
    radial-gradient(circle at 90% 85%, #f6e3c5 0, transparent 25%),
    var(--bg);
}

.totem-shell {
  width: min(900px, calc(100% - 1rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.totem-head h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}

.totem-head p {
  margin: 0.3rem 0 1rem;
  color: var(--muted);
  font-size: 1rem;
}

.kiosk-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.kiosk-chip {
  border-radius: 999px;
  border: 1px solid #c8d9c5;
  background: #eef7eb;
  color: #1f4b2d;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.32rem 0.65rem;
}

.totem-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.totem-btn {
  min-height: 150px;
  border: none;
  border-radius: 22px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 28px rgba(20, 44, 28, 0.14);
}

.totem-btn.qr {
  background: linear-gradient(145deg, var(--green), var(--green-strong));
}

.totem-btn.face {
  background: linear-gradient(145deg, var(--amber), var(--amber-strong));
}

.workflow,
.ticket-result {
  margin-top: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.9rem;
}

.supervisor-panel {
  margin-top: 1rem;
  background: #fffdf6;
  border: 1px solid #e6d6b6;
  border-radius: 18px;
  padding: 0.9rem;
}

.supervisor-panel h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
}

.supervisor-panel p {
  margin: 0.4rem 0 0.6rem;
  color: #6c5840;
}

.workflow h2,
.ticket-result h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
}

.workflow p {
  margin: 0.4rem 0 0.7rem;
  color: var(--muted);
}

.camera {
  width: 100%;
  border: 1px solid #cad7c4;
  border-radius: 14px;
  min-height: 180px;
  background: #141d16;
  object-fit: cover;
}

.row-actions {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.row-form {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

input {
  border: 1px solid #c7d2c1;
  border-radius: 12px;
  padding: 0.65rem 0.7rem;
  font: inherit;
}

.mini-btn {
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--green), var(--green-strong));
  color: #fff;
  font-weight: 700;
  padding: 0.62rem 0.9rem;
  cursor: pointer;
}

.mini-btn.ghost {
  background: #ecf4ea;
  color: #20432a;
  border: 1px solid #c8d8c7;
}

.receipt {
  margin-top: 0.7rem;
  border: 1px dashed #aec6ad;
  border-radius: 12px;
  background: #f7fff5;
  padding: 0.8rem;
  display: grid;
  gap: 0.3rem;
}

.receipt strong {
  font-size: 1.08rem;
}

.toast {
  border: none;
  border-radius: 11px;
  padding: 0.7rem 0.9rem;
  background: #f6fff5;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
  color: #1f4a2a;
}

.toast::backdrop {
  background: transparent;
}

@media (max-width: 760px) {
  .totem-actions {
    grid-template-columns: 1fr;
  }

  .totem-btn {
    min-height: 128px;
  }

  .row-form {
    grid-template-columns: 1fr;
  }

  .kiosk-badges {
    gap: 0.35rem;
  }
}

@media print {
  body {
    background: #fff;
  }

  .totem-head,
  .totem-actions,
  .workflow,
  .row-actions,
  #btnNew,
  #btnPrint,
  .toast {
    display: none !important;
  }

  .ticket-result {
    border: none;
    margin: 0;
    padding: 0;
  }

  .receipt {
    border: 1px solid #000;
    background: #fff;
  }
}