/* Layout — App shell */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  z-index: 100;
  gap: var(--space-md);
}

.header__logo {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}

.header__nav {
  display: flex;
  gap: var(--space-sm);
  margin-left: var(--space-lg);
}

.header__nav-link {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.header__nav-link:hover,
.header__nav-link.active {
  color: var(--text-primary);
  background: var(--accent-subtle);
}

.header__spacer { flex: 1; }

.header__status {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.header__status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--status-active);
}

.header__status-dot.offline {
  background: var(--deal-lost);
}

.header__user {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Main layout */
.main {
  margin-top: var(--header-height);
  padding-bottom: 40px;
  min-height: calc(100vh - var(--header-height));
}

/* View containers */
.view { display: none; }
.view.active { display: block; }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-card) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Error state */
.error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--deal-lost);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg);
}

.error-banner__retry {
  margin-left: auto;
  padding: var(--space-xs) var(--space-md);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--deal-lost);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.error-banner__retry:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}

.empty-state__icon { font-size: 2rem; margin-bottom: var(--space-md); }
.empty-state__text { font-size: var(--text-sm); }

/* Footer sync timer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-lg);
  font-size: var(--text-xs);
  color: var(--text-muted);
  z-index: 100;
}