/* "Set up this phone" button + wizard on the login page */
.btn-setup {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 25px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-setup:hover { background: rgba(255, 255, 255, 0.15); }
.btn-setup .ps-done { color: #7dffa8; font-weight: bold; }

.ps-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: none; align-items: flex-end; justify-content: center;
}
.ps-overlay.open { display: flex; }
@media (min-width: 600px) { .ps-overlay { align-items: center; } }

.ps-card {
  background: #fff; color: #222; text-align: left;
  width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 20px 16px 24px;
  font-family: Arial, sans-serif; box-shadow: 0 -6px 30px rgba(0,0,0,.3);
}
@media (min-width: 600px) { .ps-card { border-radius: 18px; } }
.ps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ps-head h2 { font-size: 1.2rem; margin: 0; }
.ps-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: #666; cursor: pointer; padding: 4px 8px; }
.ps-intro { font-size: .9rem; color: #555; margin: 0 0 14px; }

.ps-step { border: 1px solid #e3e3ea; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ps-step-row { display: flex; align-items: center; gap: 10px; }
.ps-icon {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: .95rem; background: #eceef8; color: #4e54c8;
}
.ps-step[data-state="working"] .ps-icon { background: #fff4d6; color: #b07800; }
.ps-step[data-state="ok"]      .ps-icon { background: #dcf7e5; color: #11803a; }
.ps-step[data-state="warn"]    .ps-icon { background: #fff1d6; color: #b36b00; }
.ps-step[data-state="fail"]    .ps-icon { background: #fde2e2; color: #c62828; }
.ps-step[data-state="working"] .ps-icon::after { content: ""; }
.ps-title { font-weight: bold; font-size: .98rem; }
.ps-status { font-size: .85rem; color: #555; margin-top: 2px; }
.ps-step[data-state="ok"]   .ps-status { color: #11803a; }
.ps-step[data-state="fail"] .ps-status { color: #c62828; }
.ps-step[data-state="warn"] .ps-status { color: #b36b00; }
.ps-help { display: none; margin-top: 10px; font-size: .85rem; line-height: 1.45; background: #f6f7fb; border-radius: 8px; padding: 10px 12px; }
.ps-help.show { display: block; }
.ps-help ol, .ps-help ul { margin: 6px 0 0 18px; padding: 0; }
.ps-help li { margin-bottom: 4px; }
.ps-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.ps-actions:empty { display: none; }
.ps-btn {
  border: 0; border-radius: 20px; padding: 9px 16px; font-size: .9rem; cursor: pointer;
  background: #4e54c8; color: #fff;
}
.ps-btn.secondary { background: #eceef8; color: #4e54c8; }
.ps-preview { margin-top: 10px; width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; background: #000; transform: scaleX(-1); display: none; }
.ps-preview.show { display: block; }
.ps-main { width: 100%; margin-top: 6px; padding: 13px; font-size: 1rem; border-radius: 25px; }
.ps-summary { text-align: center; font-size: .92rem; margin: 10px 0 0; font-weight: bold; }