/* Mini App styles (spec v0.7 §6). Telegram-native semantic colors via CSS
   variables set from themeParams; no fixed white background. */
:root {
  --bg: #17212b;
  --text: #f5f5f5;
  --hint: #98a2b3;
  --card: #1f2b38;
  --accent: #4ea1ff;
  --danger: #ff6b6b;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
#app { padding: 16px calc(16px + env(safe-area-inset-right))
             calc(24px + env(safe-area-inset-bottom))
             calc(16px + env(safe-area-inset-left)); max-width: 640px; margin: 0 auto; }
.period { color: var(--hint); font-size: 14px; margin-bottom: 8px; }
.hero { background: var(--card); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.hero .amount { font-size: 30px; font-weight: 700; }
.hero .sub { color: var(--hint); margin-top: 6px; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h2 { font-size: 15px; margin: 0 0 10px; color: var(--hint); font-weight: 600; }
.insight { border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 10px; }
.insight.attention { border-color: var(--danger); }
.insight .title { font-weight: 600; }
.insight .body { color: var(--text); }
.row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; gap: 12px; min-height: 44px; }
.row .name { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.muted { color: var(--hint); }
.skeleton { height: 60vh; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card) 25%, #26333f 50%, var(--card) 75%);
  background-size: 200% 100%; animation: sk 1.3s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty { text-align: center; padding: 40px 16px; color: var(--hint); }
.empty .title { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.retry { display: inline-block; margin-top: 14px; padding: 10px 18px; min-height: 44px;
  border: none; border-radius: 10px; background: var(--accent); color: #fff; font-size: 16px; }
svg { max-width: 100%; height: auto; }
.trend-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.trend-bars .bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; }
.trend-bars .bar.partial { opacity: 0.55; }
.trend-labels { display: flex; gap: 6px; margin-top: 4px; }
.trend-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--hint); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }