/* Public catalog palette: a single restrained navy/slate system from page to footer. */
body[data-guide] .app-page-shell {
  --apps-page: #0d1725;
  --apps-surface: #152438;
  --apps-surface-raised: #1a2b3f;
  --apps-surface-hover: #20354b;
  --apps-text: #f1f5f9;
  --apps-muted: #a9b8c9;
  --apps-border: rgba(148, 163, 184, 0.24);
  --apps-border-active: rgba(125, 211, 252, 0.4);
  position: relative;
  z-index: 1;
  background: var(--apps-page);
}

body[data-guide] .app-page-shell .home-apps-section {
  background:
    radial-gradient(circle at 50% 0, rgba(56, 189, 248, 0.07), transparent 36rem),
    var(--apps-page);
}

body[data-guide] .app-page-shell .home-app-row,
body[data-guide] .app-page-shell .home-app-store-showcase {
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--apps-border);
  border-radius: 18px;
  background: var(--apps-surface);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.2);
}

body[data-guide] .app-page-shell .home-app-row-title h3,
body[data-guide] .app-page-shell .home-app-store-showcase h3 {
  color: var(--apps-text);
}

body[data-guide] .app-page-shell .home-app-store-showcase h3 {
  margin-left: 0;
  color: #c9e8f7;
}

body[data-guide] .app-page-shell .home-installed-apps {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

body[data-guide] .app-page-shell .home-installed-app-card {
  border-color: var(--apps-border);
  background: var(--apps-surface-raised);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16);
}

body[data-guide] .app-page-shell .home-installed-app-card:hover,
body[data-guide] .app-page-shell .home-installed-app-card:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
}

body[data-guide] .app-page-shell .home-installed-app-copy strong {
  color: var(--apps-text);
}

body[data-guide] .app-page-shell .home-installed-app-copy > span {
  color: var(--apps-muted);
}

body[data-guide] .app-page-shell .home-app-tile {
  border-color: var(--apps-border);
  background: #18283b;
}

body[data-guide] .app-page-shell .home-app-tile:hover,
body[data-guide] .app-page-shell .home-app-tile:focus-visible {
  border-color: var(--apps-border-active);
  background: var(--apps-surface-hover);
}

body[data-guide] .app-page-shell .home-app-tile small {
  color: var(--apps-muted);
}

body[data-guide] .app-page-shell > footer {
  border-top: 1px solid var(--apps-border);
  background: var(--apps-page);
}

body[data-guide] .app-page-shell > footer .text-gray-600 {
  color: #bac7d5;
}

body[data-guide] .app-page-shell > footer .text-gray-700 {
  color: #9eafc1;
}

body[data-guide] .app-page-shell > footer .text-gray-800 {
  color: #7f93a8;
}

@media (max-width: 620px) {
  body[data-guide] .app-page-shell .home-app-row,
  body[data-guide] .app-page-shell .home-app-store-showcase {
    padding: 16px;
    border-radius: 14px;
  }
}