/* ===== MODE TAMU — gaya + pagar UI ===== */
/* Sembunyikan semua kendali internal kantor untuk tamu */
body.guest #controls,
body.guest #bTasks, body.guest #bKanban, body.guest #bInbox,
body.guest #bDispatch, body.guest #bProject, body.guest #bHealth,
body.guest #bCmd, body.guest #bWorld, body.guest .team-picker,
body.guest #decisions, body.guest #cmdbar, body.guest #fz1-desk,
body.guest .fz1-desk { display: none !important; }
body.guest #info button { display: none !important; }

/* ---------- picker avatar ---------- */
#gPicker {
  position: fixed; inset: 0; z-index: 4000; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(38, 26, 14, .55); backdrop-filter: blur(3px);
}
#gPicker[hidden] { display: none; }
.g-pick-card {
  background: #FFF8E6; color: #3A2A1A; border: 3px solid #6B4226;
  border-radius: 18px; max-width: 680px; width: 100%; max-height: 92vh;
  overflow: auto; padding: 20px 22px; box-shadow: 0 18px 50px rgba(0,0,0,.45);
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; text-align: center;
}
.g-pick-card h1 { margin: 2px 0 4px; font-size: 26px; }
.g-pick-card p { margin: 4px 0 12px; }
#gName {
  width: min(340px, 90%); padding: 10px 14px; font-size: 16px;
  border: 2px solid #8B5E34; border-radius: 999px; background: #fff;
  text-align: center; margin-bottom: 14px; font-family: inherit;
}
#gPickGrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px;
}
@media (max-width: 560px) { #gPickGrid { grid-template-columns: repeat(2, 1fr); } }
.g-card {
  background: #F8ECD0; border: 3px solid #E3C88F; border-radius: 14px;
  padding: 10px 8px 8px; cursor: pointer; font-family: inherit; color: #3A2A1A;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .12s, border-color .12s;
}
.g-card img { width: 84px; height: 84px; object-fit: contain; pointer-events: none; }
.g-card strong { font-size: 16px; }
.g-card span { font-size: 12px; opacity: .75; line-height: 1.25; }
.g-card:hover { transform: translateY(-2px); }
.g-card.sel { border-color: #2E8B8B; background: #EAF6F3; box-shadow: 0 4px 14px rgba(46,139,139,.35); }
.g-btn {
  display: inline-block; margin: 6px 4px 0; padding: 11px 20px; border-radius: 999px;
  background: #F8ECD0; color: #3A2A1A; border: 2px solid #8B5E34; cursor: pointer;
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; font-weight: 700;
  font-size: 15px; text-decoration: none;
}
.g-btn.primary { background: #E8A33D; border-color: #6B4226; color: #2A1C0D; }
.g-btn:hover { filter: brightness(1.06); }
#gEnter { font-size: 17px; padding: 13px 30px; }
.g-fine { font-size: 12px; opacity: .65; margin-top: 10px; }

/* ---------- modal tamu ---------- */
#gModal {
  position: fixed; inset: 0; z-index: 3900; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(38, 26, 14, .5);
}
#gModal[hidden] { display: none; }
#gModalCard {
  position: relative; background: #FFF8E6; color: #3A2A1A;
  border: 3px solid #6B4226; border-radius: 18px; max-width: 430px; width: 100%;
  max-height: 88vh; overflow: auto; padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; text-align: center;
}
#gModalCard h2 { margin: 6px 0 2px; font-size: 22px; }
#gModalCard .g-tag { color: #8B5E34; font-weight: 700; margin: 0 0 8px; }
#gModalCard .g-price { font-size: 22px; font-weight: 800; color: #2E8B8B; margin: 6px 0; }
#gModalCard .g-price s { color: #B08968; font-size: 15px; font-weight: 600; }
#gModalCard .g-note { font-size: 12px; opacity: .7; }
.g-prod-img { width: 150px; height: auto; border-radius: 10px; border: 2px solid #E3C88F; }
.g-emoji { font-size: 44px; }
.g-close {
  position: absolute; top: 8px; right: 10px; width: 34px; height: 34px;
  border-radius: 50%; border: 2px solid #8B5E34; background: #F8ECD0;
  font-size: 15px; cursor: pointer; color: #3A2A1A;
}

/* ---------- toast, chip bantuan, label nama ---------- */
#gToast {
  position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%) translateY(20px);
  z-index: 3800; background: #3A2A1A; color: #FFF3D6; padding: 11px 18px;
  border-radius: 999px; font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: 14.5px; max-width: min(620px, 92vw); text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#gToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#gHelp {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: rgba(255, 248, 230, .94); border: 2px solid #8B5E34; border-radius: 999px;
  padding: 7px 12px; font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-size: 13.5px; color: #3A2A1A; max-width: 94vw;
}
#gHelp[hidden] { display: none; }
#gHelp button {
  border: 2px solid #8B5E34; background: #E8A33D; color: #2A1C0D; border-radius: 999px;
  padding: 6px 13px; font-family: inherit; font-weight: 700; cursor: pointer; font-size: 13px;
}
#gHelp .g-hint { opacity: .8; }
@media (max-width: 700px) { #gHelp .g-hint { display: none; } }
#gLabel {
  position: fixed; left: 0; top: 0; z-index: 3600; pointer-events: none;
  background: #2E8B8B; color: #fff; font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 700; font-size: 13.5px; padding: 4px 12px; border-radius: 999px;
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3); white-space: nowrap;
}
#gLabel[hidden] { display: none; }