:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #1b1b1f);
  --hint: var(--tg-theme-hint-color, #7d7f87);
  --link: var(--tg-theme-link-color, #2b7bd6);
  --accent: var(--tg-theme-button-color, #e8701a);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --sep: rgba(127, 127, 127, 0.25);
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 12px 14px calc(24px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); }
[hidden] { display: none !important; }
.status { margin: 8px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--card); color: var(--hint); }
.home-title { font-size: 22px; margin: 6px 0 14px; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-link {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--card); color: var(--fg); text-decoration: none; font-weight: 600;
}
.app-icon { font-size: 22px; width: 28px; text-align: center; }
.empty { color: var(--hint); }
/* The reading surface: a shown document is always light, whatever Telegram's
   theme; shell.js sets html.paper while one is open. */
html.paper {
  --bg: #ffffff;
  --fg: #1f2328;
  --hint: #656d76;
  --link: #0b6b74;
  --card: #f3f5f6;
  --sep: rgba(31, 35, 40, 0.12);
  color-scheme: light;
}