* { box-sizing: border-box; margin: 0; padding: 0; }
html { touch-action: manipulation; }
body {
  background: #04140a;
  color: #fff;
  font-family: "Century Gothic", Arial, system-ui, sans-serif;
  font-size: 15px;
  min-height: 100vh;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 24px 16px 32px; }
header { text-align: center; padding: 12px 0 20px; }
header h1 {
  color: #ffcd4e;
  font-size: 22px;
  letter-spacing: 1px;
}
header .sub { color: #f9f9f9; font-size: 14px; margin-top: 6px; }
.card {
  background: #062b12;
  border: 1px solid #1b5e20;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  padding: 20px 16px;
  text-align: center;
  overflow-x: auto;
}
.card a { color: #f2ca27; }
.card h4, .card h5 { line-height: 1.5; }
.loading, .err-sub { color: #f9f9f9; font-size: 14px; line-height: 1.6; }
.err { color: #ffcd4e; font-size: 16px; font-weight: bold; margin-bottom: 8px; }
footer { text-align: center; color: #c8e6c9; font-size: 13px; line-height: 1.8; margin-top: 20px; }
footer a { color: #ffcd4e; }
footer button {
  background: #1b5e20;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 8px;
}
footer button:active { background: #145017; }
@media (max-width: 640px) {
  header h1 { font-size: 19px; }
  .wrap { padding: 16px 12px 24px; }
}