/* Mini App «Штаб» — мобильная вёрстка 360–430px, тема из Telegram. */
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --fg: var(--tg-theme-text-color, #1a1a1a);
  --muted: var(--tg-theme-hint-color, #8a8a8a);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f5);
  --accent: var(--tg-theme-button-color, #2e7cd6);
  --accent-fg: var(--tg-theme-button-text-color, #fff);
  --link: var(--tg-theme-link-color, #2e7cd6);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg); color: var(--fg);
  font: 15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}
.hidden { display: none !important; }
a { color: var(--link); text-decoration: none; }
h1 { font-size: 19px; margin: 14px 0 2px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.badge { color: var(--muted); font-weight: normal; font-size: 13px; }

.screen {
  min-height: 70vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center;
}
#msg-icon { font-size: 40px; }
.btn {
  background: var(--accent); color: var(--accent-fg); border: 0;
  border-radius: 10px; padding: 10px 22px; font-size: 15px;
}
.btn:disabled { opacity: .5; }

.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cards .kv {
  background: var(--card); border-radius: 10px; padding: 8px 4px;
  text-align: center;
}
.cards .kv b { display: block; font-size: 17px; }
.cards .kv span { font-size: 10.5px; color: var(--muted); }

.note {
  background: var(--card); border-radius: 10px; padding: 8px 10px;
  margin-top: 10px; font-size: 13px;
}
.note.warn { border-left: 3px solid #e0a800; }

.alert, .fix {
  background: var(--card); border-radius: 12px; padding: 9px 11px;
  margin-bottom: 7px;
}
.alert .head { display: flex; gap: 6px; align-items: baseline; }
.alert .kind { font-weight: 600; }
.alert .age { margin-left: auto; color: var(--muted); font-size: 12px; }
.alert .detail { font-size: 13px; color: var(--muted); margin-top: 2px; }

.board {
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: 6px;
}
.col { min-width: 190px; flex: 0 0 190px; }
.col h3 {
  font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600;
}
.card {
  background: var(--card); border-radius: 10px; padding: 7px 9px;
  margin-bottom: 6px; font-size: 13px;
}
.card a { font-weight: 600; }

.fix { display: flex; gap: 8px; align-items: center; }
.fix .body { flex: 1; min-width: 0; }
.fix .state { font-size: 12px; color: var(--muted); }
.fix .summary { font-size: 13.5px; }
.fix.actionable { border-left: 3px solid var(--accent); }
.fix .id {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--muted);
}
footer { margin-top: 20px; text-align: center; }