/* PWA案内ページ固有スタイル（discord-template.cssをベースに追加） */

/* テスト中バナー */
.pwa-beta-banner {
  background-color: #FFF7ED;
  border: 1px solid #FDBA74;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #9A3412;
  line-height: 1.7;
}

.pwa-beta-banner strong {
  color: #C2410C;
}

/* アプリ起動済みバナー */
.pwa-running-banner {
  background-color: #F0FDF4;
  border: 1px solid #86EFAC;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #166534;
  line-height: 1.7;
}

.pwa-running-banner strong {
  color: #15803D;
}

/* データ移行ボタン */
.pwa-data-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pwa-data-button {
  display: block;
  width: 100%;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
  transform: translateY(0);
}

.pwa-data-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pwa-data-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.pwa-export-button {
  color: #fff;
  background-color: #14B8A6;
}

.pwa-export-button:hover {
  background-color: #0D9488;
}

.pwa-import-button {
  color: #fff;
  background-color: #818CF8;
}

.pwa-import-button:hover {
  background-color: #6366F1;
}

/* ステータスメッセージ */
.pwa-data-status {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  text-align: center;
}

.pwa-data-status.success {
  background-color: #F0F9FF;
  border: 1px solid #E0F2FE;
  color: #075985;
}

.pwa-data-status.error {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

.note {
  margin-top: 1rem;
}