/* Verigate visitor app — Amazon-style dark + Verigate gold */
:root{
  --bg:#26333f;
  --bg2:#14212c;
  --card:#34424e;
  --line:#53616e;
  --text:#f4f6fa;
  --muted:#c0cad3;
  --accent:#c99a32;
  --accent-dim:rgba(201,154,50,.14);
  --danger:#ff6b6b;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  display:flex;flex-direction:column;
}
.topbar{background:var(--bg2);border-bottom:1px solid var(--line)}
.topbar-inner{
  max-width:640px;margin:0 auto;padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;flex:none}
.brand-hl{color:var(--accent)}
.brand-name{font-weight:800;font-size:19px;letter-spacing:.3px}
.brand-sub{color:var(--muted);font-size:13px}
.container{max-width:640px;margin:0 auto;padding:20px 18px 40px;width:100%;flex:1}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:18px}
h1{font-size:24px;margin:6px 0 4px}
.step-sub{color:var(--muted);font-size:14px;margin:0 0 18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#cdd8e8}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:#202c37;color:var(--text);
  font-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
}
.hint{font-size:12px;color:var(--muted);margin-top:5px}
.req{color:var(--accent)}
.btn{
  display:block;width:100%;padding:14px;border-radius:12px;border:none;
  font-size:16px;font-weight:700;cursor:pointer;margin-top:8px;
}
.btn-primary{background:var(--accent);color:#241a02}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);margin-top:12px}
.form-err{
  background:rgba(255,107,107,.12);border:1px solid var(--danger);
  color:#ffb3b3;padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:14px;
}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#1c2b47;color:var(--text);padding:12px 20px;border-radius:999px;
  border:1px solid var(--line);opacity:0;pointer-events:none;transition:all .25s;
  max-width:90vw;text-align:center;font-size:14px;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{border-color:var(--danger)}
/* gate pass */
.pass{
  background:linear-gradient(160deg,#34424e,#0f1a30);
  border:1px solid var(--accent);border-radius:18px;
  padding:28px 22px;text-align:center;margin-top:10px;
}
.pass .lbl{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}
.pass .code{
  font-size:44px;font-weight:800;letter-spacing:4px;color:var(--accent);
  margin:10px 0 4px;font-family:ui-monospace,Menlo,Consolas,monospace;
}
#qr{display:flex;justify-content:center;margin:18px 0 6px}
#qr img,#qr canvas{border-radius:12px;border:6px solid #fff;background:#fff}
.pass .who{margin-top:14px;font-size:15px}
.pass .who .k{color:var(--muted);font-size:12px;display:block;margin-top:8px;text-transform:uppercase;letter-spacing:1px}
.note{
  background:var(--accent-dim);border:1px solid rgba(201,154,50,.4);
  border-radius:12px;padding:12px 16px;margin-top:18px;font-size:14px;
}
.spinner{
  display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(6,37,31,.3);border-top-color:#241a02;
  animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* status chips on the gate pass */
.status-chip{
  display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:700;margin:10px 0 4px;
  background:#53616e;color:#cdd8e8;
}
.status-chip.approved,.status-chip.checked_in{background:var(--accent-dim);color:var(--accent)}
.status-chip.checked_out{background:#53616e;color:var(--muted)}
.status-chip.pending_approval{background:rgba(255,193,7,.14);color:#ffcf4d}
.status-chip.rejected{background:rgba(255,107,107,.14);color:var(--danger)}

/* VERIGATE approved gold and charcoal presentation */
body{font-family:Arial,"Segoe UI",sans-serif}
.topbar{box-shadow:0 3px 16px rgba(0,0,0,.12);border-bottom:2px solid #c99a32}
.brand{gap:2px}
.brand .logo{width:22px;height:24px;flex:none;transform:none}
.brand-name{font-family:Arial,sans-serif;font-size:26px;font-weight:800;font-style:normal;letter-spacing:-.8px;white-space:nowrap;color:#fff}
.brand-name sup{font-size:10px;letter-spacing:0;color:#c99a32;margin-left:2px;vertical-align:super}
.brand-name em{margin-left:12px;letter-spacing:0}
.card,.login-card{box-shadow:0 10px 28px rgba(0,0,0,.10)}
button,a,input,select,textarea{transition:border-color .15s,box-shadow .15s,background-color .15s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #dbb960;outline-offset:3px}
.foot{line-height:1.6;letter-spacing:.2px}
@media(max-width:480px){.brand-name{font-size:22px}.brand .logo{width:19px;height:21px}.topbar-inner{gap:10px}.brand-sub{font-size:12px}}