@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700&display=swap");

:root {
  --ink: #0f2a1a;
  --accent: #21b573;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
  color: var(--ink);
  background: #f5fff9;
  min-height: 100vh;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 12px 12px 32px; }

.banner-strip { display: grid; gap: 0; margin-top: 8px; }
.banner-wide { display: block; overflow: hidden; background: #ffffff; }
.banner-wide img { width: 100%; height: 78px; object-fit: cover; display: block; }

.notice { text-align: center; color: var(--accent); font-size: 14px; font-weight: 700; margin: 10px 0 16px; }

.apps-grid { display: grid; gap: 10px 8px; }
.apps-grid.simple { --tile: 120px; grid-template-columns: repeat(5, var(--tile)); justify-content: center; }

.app-card, .app-card.compact {
  width: var(--tile);
  aspect-ratio: 1 / 1;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  text-align: center;
}

.app-icon { width: 66px; height: 66px; border-radius: 6px; overflow: hidden; }
.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.app-meta { display: grid; justify-items: center; gap: 4px; }
.app-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 12px; }

.app-btn {
  text-align: center;
  text-decoration: none;
  color: var(--accent);
  background: transparent;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  font-weight: 700;
  font-size: 11px;
}

.empty { background: transparent; padding: 12px; text-align: center; color: #4f6b5b; }

@media (max-width: 900px) { .apps-grid.simple { --tile: 110px; } }
@media (max-width: 720px) {
  .wrap { padding: 10px 8px 24px; }
  .banner-wide img { height: 70px; }
  .apps-grid.simple { --tile: 70px; gap: 6px; }
  .app-icon { width: 44px; height: 44px; }
  .app-name { font-size: 12px; }
}
@media (max-width: 420px) {
  .apps-grid.simple { --tile: calc((100vw - 32px - 4 * 6px) / 5); gap: 6px; }
  .app-icon { width: 40px; height: 40px; }
  .app-name { font-size: 11px; }
}