/* Extracted from the hub's shared/base.css — only the pieces the offline-mode
   prompt needs. The rest of base.css (body reset, profile-picker forms) is not
   shipped here: this app's own style.css owns the page chrome. */
.pdg-btn {
  font-family: var(--pdg-font);
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: var(--pdg-radius);
  padding: 10px 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow var(--pdg-transition), background var(--pdg-transition);
  color: #fff;
  background: linear-gradient(135deg, #34d399 0%, #22c55e 100%);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
}
.pdg-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45); }
.pdg-btn:active { transform: translateY(0) scale(0.98); }

.pdg-btn--ghost {
  background: var(--pdg-surface);
  color: var(--pdg-fg);
  border: 1px solid var(--pdg-border);
  box-shadow: none;
}
.pdg-btn--ghost:hover { background: var(--pdg-surface-hover); box-shadow: var(--pdg-shadow-sm); }

.pdg-modal {
  position: fixed; inset: 0;
  background: var(--pdg-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pdg-modal.show { display: flex; }

.pdg-modal__panel {
  background: var(--pdg-surface-solid);
  border-radius: var(--pdg-radius-lg);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--pdg-shadow);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
.pdg-modal__title {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}
.pdg-modal__desc {
  font-size: 14px;
  color: var(--pdg-fg-muted);
  margin-bottom: 20px;
}