* { box-sizing: border-box; }
html, body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  background: #F2F2F2;
}

#app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F2F2F2;
  display: flex;
  flex-direction: column;
  position: relative;
}

button { font-family: inherit; }

.rc-btn { -webkit-tap-highlight-color: transparent; }
.rc-btn:active { transform: scale(0.97); }
.rc-card { transition: opacity 0.15s ease; }
.rc-card:active { opacity: 0.92; }

@keyframes rc-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes rc-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.rc-pop { animation: rc-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rc-fade-up { animation: rc-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }

.ring-progress { transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

.rc-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #E3E3E6; border-top-color: #1C1C1E;
  animation: rc-spin 0.8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

.rc-error-banner {
  background: #FDEBEA; color: #B0271C; border-radius: 14px; padding: 12px 14px;
  font-size: 13px; font-weight: 500;
}

.rc-empty {
  background: #FFFFFF; border-radius: 20px; padding: 28px 18px; text-align: center;
  color: #8E8E93; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.rc-login-input {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid #E5E5EA;
  background: #FFFFFF; padding: 15px 16px; font-size: 16px; font-family: inherit; color: #1C1C1E;
}