* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #111118; color: #fff; min-height: 100vh; }
.tab-content { display: none; padding: 24px 16px 90px; max-width: 512px; margin: 0 auto; }
.tab-content.active { display: block; animation: tabIn 0.28s ease-out; }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.neon-border { border: 1px solid rgba(0,255,136,0.3); }
.neon-glow { box-shadow: 0 0 20px rgba(0,255,136,0.1); }
.text-neon { color: #00ff88; }
.bg-neon { background: #00ff88; color: #0a0a0f; }
.bg-card { background: #1a1a24; border: 1px solid #2a2a35; border-radius: 16px; }
.bg-card-inner { background: #0f0f15; border-radius: 12px; }
.skeleton { background: linear-gradient(90deg, #1a1a24 25%, #2a2a35 50%, #1a1a24 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 12px; font-size: 14px; cursor: pointer; transition: all 0.2s; border: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: #00ff88; color: #0a0a0f; font-weight: 600; }
.btn-primary:disabled { background: #2a2a35; color: #666; cursor: not-allowed; }
.btn-secondary { background: #1a1a24; border: 1px solid #2a2a35; color: #ccc; }
.btn-secondary:hover { background: #2a2a35; }
.progress-bar { height: 10px; border-radius: 999px; overflow: hidden; background: #2a2a35; }
.progress-fill { height: 100%; border-radius: 999px; transition: width 0.7s ease-out; }
.progress-indeterminate { position: relative; overflow: hidden; }
@keyframes progressIndeterminate {
  0% { left: -35%; width: 35%; }
  50% { width: 55%; }
  100% { left: 100%; width: 35%; }
}
.progress-indeterminate .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, rgba(0,255,136,0.1), #00ff88, rgba(0,255,136,0.1));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0,255,136,0.45);
  animation: progressIndeterminate 1.4s ease-in-out infinite;
}
.tier-free { color: #999; }
.tier-pro { color: #60a5fa; }
.tier-ultra { color: #00ff88; }
.floating-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(33.333% - 2.66px);
  border-radius: 0.5rem;
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0,255,136,0.2);
  transition: transform 0.3s ease-in-out;
}
@keyframes cardPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
  40% { box-shadow: 0 0 28px 2px rgba(0,255,136,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}
.just-activated { animation: cardPulse 0.7s ease-out; }
@keyframes btnPop {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.btn-success { background: #22c55e !important; color: #fff !important; animation: btnPop 0.3s ease-out; }
@keyframes badgeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
 .badge-in { animation: badgeIn 0.35s ease-out; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-in { animation: modalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }