* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
  background: linear-gradient(180deg, #e8f4ff 0%, #f5f7fa 40%);
  min-height: 100vh;
  color: #333;
}
.app { max-width: 480px; margin: 0 auto; padding-bottom: 72px; }
.header {
  padding: 48px 16px 16px;
  background: linear-gradient(135deg, #4a90e2, #67b8ff);
  color: #fff;
  border-radius: 0 0 24px 24px;
}
.header h1 { font-size: 20px; font-weight: 600; }
.nav-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 480px; margin: 0 auto;
  display: flex; background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  border-radius: 16px 16px 0 0;
}
.nav-bottom a {
  flex: 1; text-align: center; padding: 12px 4px;
  text-decoration: none; color: #888; font-size: 12px;
}
.nav-bottom a.active { color: #4a90e2; font-weight: 600; }
.card {
  margin: 12px 16px; padding: 16px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.btn {
  display: block; width: 100%; padding: 14px;
  border: none; border-radius: 10px;
  background: #4a90e2; color: #fff;
  font-size: 16px; cursor: pointer;
  margin-top: 8px;
}
.btn.secondary { background: #f0f0f0; color: #333; }
.user-row { display: flex; align-items: center; gap: 12px; }
.user-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat-item { text-align: center; padding: 8px; background: #f8fafc; border-radius: 8px; }
.stat-item b { display: block; font-size: 18px; color: #4a90e2; }
.rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.rank-item img { width: 40px; height: 40px; border-radius: 50%; }
.quiz-word { font-size: 28px; text-align: center; margin: 24px 0; font-weight: 700; }
.option { padding: 14px; margin: 8px 0; border: 2px solid #e8e8e8; border-radius: 10px; cursor: pointer; }
.option.correct { border-color: #52c41a; background: #f6ffed; }
.option.wrong { border-color: #ff4d4f; background: #fff2f0; }
.hidden { display: none; }