:root {
  --pc-bg: #f8fafc;
  --pc-surface: #ffffff;
  --pc-text: #0f172a;
  --pc-muted: #64748b;
  --pc-border: #e2e8f0;
  --pc-accent: #6366f1;
  --pc-nav-glass: rgba(255, 255, 255, 0.8);
}

html {
  scrollbar-gutter: stable;
}

body {
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  min-height: 100dvh;
}

.pc-card {
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.pc-glass-bar {
  background: var(--pc-nav-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pc-border);
}

.pc-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
}

.pc-brand {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.25rem;
}

.pc-brand span {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fade-in {
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}