:root {
  --bg-color: var(--tg-theme-bg-color, #ffffff);
  --text-color: var(--tg-theme-text-color, #000000);
  --btn-color: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
}

body {
  margin: 0;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
}

.hidden { display: none !important; }

.header { margin-bottom: 20px; }
.header h1 { margin: 0 0 5px 0; font-size: 20px; }
.header p { margin: 0; opacity: 0.7; font-size: 13px; }

.loader { text-align: center; padding: 40px 0; }
.spinner {
  width: 30px; height: 30px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: var(--btn-color);
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.key-card {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.key-header { display: flex; justify-content: space-between; align-items: center; }
.key-name { font-weight: bold; }
.key-status { font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.status-ok { background: #e6f4ea; color: #137333; }
.status-bad { background: #fce8e6; color: #c5221f; }

.btn-primary, .btn-sub {
  display: block; width: 100%; text-align: center;
  padding: 10px 0; background: var(--btn-color);
  color: var(--btn-text); border: none; border-radius: 8px;
  text-decoration: none; font-weight: bold; margin-top: 10px;
}
.key-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-sub, .btn-renew {
  flex: 1;
  display: block;
  text-align: center;
  padding: 10px 0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

/* Кнопка Подключить — основной цвет темы Telegram */
.btn-sub {
  background: var(--btn-color);
  color: var(--btn-text);
}

/* Кнопка Продлить — аккуратная контурная/второстепенная кнопка */
.btn-renew {
  background: var(--tg-theme-secondary-bg-color, #f0f0f0);
  color: var(--tg-theme-button-color, #2481cc);
  border: 1px solid var(--tg-theme-button-color, #2481cc);
}