* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #0b1220;
  color: #f1f5f9;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.header {
  padding: 20px 16px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #00c896;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.dot {
  width: 8px;
  height: 8px;
  background: #00c896;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

.header h1 { font-size: 1.15rem; margin-top: 8px; }

.mode-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.mode-kasir { background: rgba(0,200,150,.2); color: #00c896; }
.mode-monitor { background: rgba(0,102,255,.2); color: #60a5fa; }
.mode-owner { background: rgba(251,191,36,.2); color: #fbbf24; }

.missed-banner {
  margin: 0 16px 12px;
  padding: 12px 16px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 12px;
  font-size: .85rem;
  text-align: center;
}
.missed-banner[hidden] { display: none !important; }

.item.missed { border-left: 3px solid #fbbf24; }
.missed-tag { font-size: .65rem; background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 4px; margin-left: 4px; }

.footer label.hidden { display: none; }
.clock { color: #64748b; font-size: .85rem; margin-top: 4px; }

.device {
  margin: 20px 16px;
  background: linear-gradient(145deg, #334155, #1e293b);
  border: 2px solid #475569;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
}

.device-top {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0066ff;
  margin-bottom: 12px;
}

.screen {
  background: #0b1220;
  border-radius: 16px;
  padding: 36px 16px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: .3s;
}

.screen.idle .screen-status { color: #64748b; }
.screen.idle .screen-amount { color: #94a3b8; font-size: 1rem; font-weight: 500; }

.screen.active .screen-status {
  color: #00c896;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.screen.active .screen-amount {
  color: #00c896;
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 800;
  margin: 8px 0;
}

.screen-detail { color: #94a3b8; font-size: .85rem; margin-top: 4px; }

.led {
  width: 14px;
  height: 14px;
  background: #334155;
  border-radius: 50%;
  margin: 16px auto 0;
  transition: .3s;
}

.led.on {
  background: #00c896;
  box-shadow: 0 0 20px #00c896;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 20px;
}

.stat {
  background: #1e293b;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.stat strong { display: block; font-size: 1.2rem; color: #0066ff; }
.stat span { font-size: .72rem; color: #94a3b8; }

.feed { padding: 0 16px 100px; }
.feed h3 { font-size: .85rem; color: #94a3b8; margin-bottom: 10px; }
.feed-list .empty { color: #64748b; font-size: .9rem; }

.item {
  background: #1e293b;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: slide .3s ease;
}

@keyframes slide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

.item .amt { font-weight: 700; color: #00c896; }
.item .meta { font-size: .78rem; color: #64748b; }
.item .time { font-size: .75rem; color: #64748b; }

.flash {
  position: fixed;
  inset: 0;
  background: rgba(0, 200, 150, .96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 200;
  color: #fff;
  text-align: center;
  animation: fadeIn .25s ease;
}

.flash[hidden] { display: none !important; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.flash-icon {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.flash-label { font-weight: 700; letter-spacing: .15em; font-size: .9rem; }
.flash-amount { font-size: clamp(2.5rem, 10vw, 3.5rem); font-weight: 800; margin: 8px 0; }
.flash-detail { font-size: .95rem; opacity: .9; }

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1e293b;
  border-top: 1px solid #334155;
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .82rem;
  color: #94a3b8;
}

.unlock-btn {
  background: #0066ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

.unlock-btn.needs-unlock {
  animation: pulse-audio 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, .35);
}

.unlock-btn.hidden { display: none; }

.btn-test { background: #00c896; }

.audio-warn {
  margin: 0 16px 12px;
  padding: 12px 14px;
  background: rgba(251, 191, 36, .15);
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: 10px;
  color: #fde68a;
  font-size: .85rem;
  text-align: center;
}

.audio-status {
  width: 100%;
  text-align: center;
  font-size: .75rem;
  color: #64748b;
  margin-top: 2px;
}

.audio-status.ready { color: #00c896; }

.poll-debug {
  width: 100%;
  text-align: center;
  font-size: .7rem;
  color: #475569;
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}

.poll-debug.err { color: #f87171; }
.poll-debug.ok { color: #00c896; }

.btn-link {
  background: none;
  border: none;
  color: #64748b;
  font-size: .72rem;
  text-decoration: underline;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-top: 2px;
}

.build-tag {
  width: 100%;
  text-align: center;
  font-size: .65rem;
  color: #334155;
  margin-top: 4px;
}

@keyframes pulse-audio {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.footer .wifi-tip { width: 100%; text-align: center; font-size: .75rem; color: #64748b; margin-top: 4px; }

.kasir-panel {
  margin: 16px;
  padding: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}

.kasir-panel h3 { font-size: .95rem; margin-bottom: 10px; color: #e2e8f0; }

.kasir-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.kasir-form input {
  flex: 1;
  min-width: 140px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0f172a;
  color: #fff;
  font-size: 1rem;
}

.kasir-form .btn-primary,
.kasir-waiting .btn-secondary {
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.kasir-form .btn-primary { background: #0066ff; color: #fff; }
.kasir-waiting .btn-secondary { background: #334155; color: #fff; }

.kasir-waiting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px;
  background: rgba(0, 200, 150, .12);
  border: 1px solid rgba(0, 200, 150, .35);
  border-radius: 10px;
}

.kasir-waiting strong { color: #00c896; font-size: 1.2rem; }

.kasir-hint { font-size: .75rem; color: #64748b; margin-top: 8px; line-height: 1.4; }

.kasir-panel.hidden { display: none; }

.flash.mismatch { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.feed-list .item.mismatch { border-left: 3px solid #f87171; }
.flash.mismatch .flash-icon { background: rgba(0,0,0,.2); }

body { padding-bottom: 120px; }

.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0b1220 0%, #1e3a5f 50%, #0b1220 100%);
  padding: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.start-overlay.hidden {
  display: none;
}

.start-box {
  text-align: center;
  max-width: 320px;
  animation: startPulse 2s ease-in-out infinite;
}

.start-icon {
  font-size: 4rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 20px rgba(0, 200, 150, .5));
}

.start-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}

.start-sub {
  font-size: .9rem;
  color: #94a3b8;
  margin-bottom: 28px;
}

.start-btn {
  display: inline-block;
  background: linear-gradient(135deg, #0066ff, #00c896);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 18px 36px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 102, 255, .45);
  letter-spacing: .04em;
}

.start-hint {
  margin-top: 20px;
  font-size: .75rem;
  color: #64748b;
  line-height: 1.5;
}

@keyframes startPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

body.soundbox-ready .audio-warn { display: none !important; }