:root {
  --primary: #4f46e5;
  --primary-light: #e0e7ff;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-sub: #64748b;
  --border: #e2e8f0;
  --pos-bg: #ecfdf5;
  --pos-border: #a7f3d0;
  --pos-text: #059669;
  --neg-bg: #fef2f2;
  --neg-border: #fecaca;
  --neg-text: #dc2626;
  --reward-bg: #fffbeb;
  --reward-border: #fde68a;
  --reward-text: #d97706;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text-main);
  padding-top: calc(var(--safe-top) + 12px);
  padding-bottom: calc(var(--safe-bottom) + 30px);
}

.app-container {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
}

.top-bar {
  max-width: 520px;
  margin: 0 auto 16px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.sync-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: #e2e8f0;
  color: var(--text-sub);
}

.sync-pill.live {
  background: #dcfce7;
  color: #15803d;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.btn-action-top {
  border: none;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-action-top:active { opacity: 0.8; }
.btn-backup { background: #e2e8f0; color: var(--text-main); }
.btn-stats { background: var(--primary); color: #ffffff; box-shadow: 0 2px 6px rgba(79,70,229,0.25); }

.category-group {
  margin-bottom: 20px;
}

.section-head {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-sub);
  margin: 16px 0 10px 4px;
}