/* The mini app's first page (F0a2, ADR-179). The tokens are skica-v5's; inside
   Telegram app.js fills them from themeParams, outside it the system's light or
   dark scheme holds. */
:root {
  --bg: #ffffff;
  --bg2: #eef1f4;
  --fg: #111a22;
  --muted: #667484;
  --line: #e0e5ea;
  --accent: #2b7fd0;
  --accent-fg: #ffffff;
  --danger: #b33434;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17212b; --bg2: #0e1621; --fg: #e8edf2; --muted: #8b9aab; --line: #26323e;
    --accent: #5aa6ea; --accent-fg: #0b1622; --danger: #f08080;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17212b; --bg2: #0e1621; --fg: #e8edf2; --muted: #8b9aab; --line: #26323e;
  --accent: #5aa6ea; --accent-fg: #0b1622; --danger: #f08080;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg2); color: var(--fg); font-family: var(--ui); font-size: 15px; line-height: 1.45; }

.app { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.greeting, .diag { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }

.status { margin: 0; color: var(--muted); }
.hello { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.problem { margin: 0; color: var(--danger); overflow-wrap: anywhere; }
.problem code { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.diag h2 { margin: 0; font-size: 15px; font-weight: 600; }
.diag .note { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.diag dl { margin: 0 0 12px; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.diag dt { color: var(--muted); }
.diag dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }

button { font: inherit; color: var(--accent-fg); background: var(--accent); border: 0; border-radius: 9px; padding: 8px 16px; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 360px) {
  .diag dl { grid-template-columns: minmax(0, 1fr); }
  .diag dd { margin-bottom: 6px; }
}