:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #111111);
  --muted: var(--tg-theme-hint-color, #707579);
  --link: var(--tg-theme-link-color, #2481cc);
  --button-bg: var(--tg-theme-button-color, #2481cc);
  --button-fg: var(--tg-theme-button-text-color, #ffffff);
  --section-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
}
header {
  padding: 12px 14px 6px;
  border-bottom: 1px solid var(--section-bg);
}
#user-line { color: var(--muted); }
nav#tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--section-bg);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
nav#tabs button {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 12px 16px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
nav#tabs button.active { color: var(--fg); border-bottom: 2px solid var(--link); }
main { padding: 12px 14px 80px; }
.view.hidden { display: none; }
.card {
  background: var(--section-bg);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.card h3 { margin: 0 0 6px; font-size: 14px; }
.card .meta { color: var(--muted); font-size: 12px; }
.row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.row .k { color: var(--muted); }
.empty { color: var(--muted); padding: 20px 0; text-align: center; }
button.action {
  background: var(--button-bg);
  color: var(--button-fg);
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  min-height: 44px;
  min-width: 44px;
  font-size: 14px;
  cursor: pointer;
}
button.action.secondary { background: transparent; color: var(--link); }
#status-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 8px 14px;
  background: var(--section-bg);
  color: var(--muted);
  font-size: 12px;
  border-top: 1px solid var(--bg);
}
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--muted);
  font-size: 12px;
  margin-left: 6px;
  white-space: nowrap;
}
.badge::before {
  display: inline-block;
  margin-right: 4px;
  font-weight: bold;
}
.badge.ok::before { content: "✓"; }
.badge.warn::before { content: "⏱"; }
.badge.err::before { content: "✗"; }
.badge.info::before { content: "•"; }
.badge.progress::before { content: "↻"; }
.badge.ok { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.badge.warn { background: #fff3e0; border-color: #ff9800; color: #ef6c00; }
.badge.err { background: #ffebee; border-color: #f44336; color: #c62828; }
.badge.info { background: #e3f2fd; border-color: #2196f3; color: #1565c0; }
.badge.progress { background: #ede7f6; border-color: #673ab7; color: #4527a0; }

#context-line { color: var(--muted); font-size: 12px; margin-top: 2px; }
.detail-back {
  display: inline-block;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid var(--muted);
  color: var(--link);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}
.detail-body { white-space: pre-wrap; }
.click-card {
  cursor: pointer;
  transition: background 0.1s;
}
.click-card:hover { background: rgba(0,0,0,0.04); }